The Importance Of HTML5 Sectioning Elements by Heydon Pickering
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).
<header> or <footer> dont create new sections. Document oultiner: https://gsnedders.html5.org/outliner/
ARIA roles
The ARIA landmark roles are relatively well supported (role="contentinfo", role="banner")
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
Schema.org. You can attach semantic meta data (microdata) to your structured content. You can describe the subject of content your element contains.