“Major” is a very subjective term though. The element is intended for only major navigation blocks. Sub-navigation that is already contained inside a element does not need to be wrapped in a second element. The element only ever needs to be used once per navigation block.

Using aria on the example layout sectioning elements.

Concerns with the simplified outline algorithm spec.

Adding section labels to our example layout.

Method 3: Use an aria-labelledby attribute.No browser supports the document outline algorithm.Sectioning elements and the document outline algorithm.Article is like “Block” Section is like “Element”.Don’t use the word “nav” or “navigation” in the label.Thanks for being such an awesome community where we can all learn and grow together! For now, please see Adrian Roselli’s Pen below for a more appropriate approach to sectioning the example layout. We’ll be making updates to make sure the article reflects the best possible information. 👋 It has been brought to our attention in the comments ( and on Twitter) that some of the techniques used in this article result in a poor user experience for screen reader users. This is a generic sectioning element that is used whenever it doesn’t make sense to use the other more semantic ones. Content that needs extra context from its parent sectioning element to make sense. That could mean a widget, a blog post or even a comment within a blog post. Content that is self-contained in that it makes sense on its own when taken out of context. Think of something like a sidebar with supplementary information, a note within an article, or the outer container for a list of related articles at the bottom of a blog post. Content that is only tangentially related (or not related) to the main content.

Examples include the primary navigation, secondary navigation, and in-page navigation. Major site navigation that consistently appears frequently across the site. Here is a brief explanation of each sectioning element and how they are used: is also kind of a sectioning element since all content lying inside of it is part of the default document section. The sectioning elements in HTML5 are, ,, and.

Section bar access