Nesting and Structure

When building a web page, how you nest semantic layout elements affects both the clarity of your code and the accessibility of your content. Proper nesting means placing elements within each other in a way that reflects the logical structure of your page. For example, your main content should be inside the main element, and distinct sections of content belong in section elements. If you have a news article, that might go inside an article element, which itself could be nested within a section. Related content that is not the main focus—such as a sidebar—should be placed in an aside.

Here are some common patterns for nesting semantic layout elements:

• Place only one main element per page, and do not nest it inside header, footer, article, or section elements;
• Use section elements to group related content within main or within an article;
• Nest article elements inside section when you have multiple, self-contained pieces of content within a section;
• Use aside for tangentially related content, such as tips, links, or sidebars, and place it within main, article, or even section as appropriate;
• Avoid placing header or footer elements directly inside aside unless the aside itself represents a complete, standalone section.

Note

A common mistake is to nest main elements inside each other, or to put main inside a header or footer. Another error is to use section or article elements without a clear reason—use them only when the content has its own heading or could stand on its own.