The Importance Of HTML5 Sectioning Elements by Heydon Pickering

In notebook:
Article Notes
Created at:
DOM Fundamentals
The Importance Of HTML5 Sectioning Elements – Smashing Magazine​<div>​ doesn't create a new content block in the document. It doesn't add any structure to the DOM it's really just for add styling hooks.
In contrast, sectioning elements have meaning about the role of the element within the page or document. They create a new start level for your heading i.e. you can add any heading element (​h1​,​h2​,​h3​,​h4​ etc) and they will all be tied as first-level heading (like an ​h1​) for that block. Tim Berners-Lee originally suggested to have just one general heading element, ​<h>​.
The HTML5 elements that create these sections are 
  • <section>​, 
  • ​<article>​,
  • ​<aside>
  • ​<nav>​ 
  • (and ​<body>​ as the first section). 
And only these. For example ​<header>​ or ​<footer>​ dont create new sections. 

Document oultiner:

ARIA roles

The ARIA landmark roles are relatively well supported (role="contentinfo", role="banner")
landmark roles

Semantic vs syntactic

Some HTML elements are semantic like ​<address>​ because you can infer that it's about a contact information. A ​<section>​ element is more syntactic because it helps to represent the structure of the document content and thus helps to understand it better by separating meaningful sub-parts.

Microdata You can attach semantic meta data (microdata) to your structured content. You can describe the subject of content your element contains.