Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Semantic markup: Why <header> instead of <div id="header">? [duplicate]

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

like image 479
webketje Avatar asked Nov 03 '13 00:11

webketje


1 Answers

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.

like image 191
danwellman Avatar answered Oct 18 '22 17:10

danwellman