问题
Okay, so I understand the hype about semantic markup: it enhances/ further specifies the meaning of an element or page for search engines, and therefore for humans reading search results. All credits to microformats and <h1>, <h2>, <p> and such, because these tags indicate a hierarchical structure and/or specific purpose and add meaning to the page.
But why are there now tags like <aside>, <header>, <footer>? What is their advantage over <div id="aside/header/footer">?
These tags have no specific sub-properties or attributes like an <audio>, <form>, <img> tag (src, action, etc.) and I can hardly imagine it means such an improvement for search engine performance to look for a header tag instead of a header id. Furthermore, if beginners make mistakes while using these tags, wouldn't it be even worse because the error goes all the way down to the DOM node level?
So why are there new HTML 'semantic' tags with no apparent benefit over the plain ol' divs? Or if this is wrong, what IS the benefit?
EDIT: The answer I was looking for is in the link Anthony pointed at in the 4th comment of this thread: http://www.w3.org/TR/html5/sections.html.
The justification for the existence of tags like <aside>, <header>, <footer>, is:
Sectioning content is content that defines the scope of headings and footers. - W3C
回答1:
The benefit is that the mark-up describes the content and the structure of the document more accurately. A <div> with an id does not mean a header, whatever that id may be - it's completely arbitrary. Whereas a <header> is a header, no matter what its id.
回答2:
@Tyblitz
Semantic elements means Elements with meaning. These elements clearly describes its meaning to both browser as well as to the developer.
<div> and <span> are examples of non-semantic elements; they don't tell anything about their content, whereas elements like <form>, <table>, and <img> clearly define their content and are therefore referred to as semantic elements.
<header> - header is a semantic element that specifies a header for a document or section.
headers should be used as containers for introductory contents. You can have several header elements in one document.
<section> - section is a thematic grouping of content, typically with a heading.
<article> - article specifies independent, self-contained content.
and so on...
The following example defines how to use schematic elements in HTML5 markup:
<!-- BODY CONTAINER START -->
<header>
<h1>Little Green Guys With Guns</h1>
<nav>
<ul>
<li><a href="/games">Games</a>
<li><a href="/forum">Forum</a>
<li><a href="/download">Download</a>
</ul>
</nav>
<h2>Important News</h2> <!-- this starts a second subsection --
<!-- this is part of the subsection entitled "Important News" -->
<p>To play today's games you will need to update your client.</p>
<h2>Games</h2> <!-- this starts a third subsection -->
</header>
<p>You have three active games:</p>
<!-- this is still part of the subsection entitled "Games" -->
<!-- BODY CONTAINER END -->
回答3:
The answer is hidden in search engines.
Search engines can only crawl for HTML elements, and they do not know much about your website's css colors, font size, and so, they can see clearly which words you find more important written as bold or title, header, footer(for mission or contact), and so.... which gives a clue of your website to their algorythm.
来源：https://stackoverflow.com/questions/19748487/semantic-markup-why-header-instead-of-div-id-header