Matt provides a great little tutorial on the sectioning elements in HTML5; what they’re for and when to use them.
The article may be a year old, but the information is still current. Sectioning HTML pages is important for understanding the structure of a page. While most visual users will never notice, those using screen readers and voice over/text-to-speech systems will. They also provide a good sense for designing the elements of a page, and thinking about the content you’re creating.
The section elements discussed
mainelement represents the main content of the body of a document or application. (
mainis not one of the sectioning elements but it is still important to use. See: HTML 5.1 4.4. Grouping content - The main element )
articleelement represents a complete, or self-contained, composition in a document, page, application, or site. This could be a magazine, newspaper, technical or scholarly article, an essay or report, a blog or other social media post.
sectionelement represents a generic section of a document or application. A section, in this context, is a thematic grouping of content. Each section should be identified, typically by including a heading (
h1-h6element) as a child of the
navelement represents a section of a page that links to other pages or to parts within the page: a section with navigation links.
asideelement represents a section of a page that consists of content that is tangentially related to the content of the parenting sectioning content, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.
headerelement represents introductory content for its nearest ancestor sectioning content or sectioning root element. A header typically contains a group of introductory or navigational aids.
footerelement represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.
addresselement represents the contact information for its nearest
bodyelement ancestor. If that is the
bodyelement, then the contact information applies to the document as a whole.
Great quote at the end:
Final Thoughts on the Sectioning Elements
In this post you’ve learned how to use the HTML5 sectioning elements when marking up your web pages. Using these elements has a number of benefits. One of the biggest being that it gives certain areas of your page more semantic meaning, allowing computer programs to identify key elements like the main content and page navigation. This information is extremely useful to applications like screen readers.
Additional useful links about HTML5 Sectioning:
- HTML 5.1 4.3. Sections
- HTML 5.1 4.4. Grouping content
- HTML 5.1 3. Semantics, structure, and APIs of HTML documents- WAI-ARIA tags