HTML elements such as <main>, <article>, <nav>, and <section> describe what content means. Choose them for their semantics, not because they happen to match a visual layout. Use CSS classes for presentation, and use a <div> when no more specific element fits.
The original post included this HTML5 image:
A quick way to choose an element
- Use
<main>for the page's unique, primary content. A document should have one visible<main>element. - Use
<article>for a self-contained item that could make sense on its own, such as a blog post, forum post, product card, or comment. - Use
<nav>for a major group of navigation links, not every collection of links. - Use
<aside>for content that is related but tangential to the surrounding content, such as a related-links panel or a note. - Use
<section>to group a distinct topic, usually with a heading. - Use
<header>and<footer>for introductory and closing content belonging to the page or a section. - Use
<figure>for a referenced illustration, diagram, code example, or similar item that can be moved without disrupting the surrounding content. - Use
<div>when you need a generic container for styling or scripting and none of these meanings applies.
These elements are not interchangeable layout presets. A sidebar is not automatically an <aside>, and a box with a heading is not automatically a <section>. Decide what the content represents first, then style it with CSS.
When to use <article>
An <article> represents a self-contained composition that could be reused or distributed independently. A blog post, news story, forum post, product card, or reader comment can be an article. A page may contain several articles, and one article can contain related articles such as comments.
Use an article for the primary content only when that content is itself a self-contained item. The element does not mean "the largest content area" or "everything between the header and footer."
When to use <section>
Use <section> to group content around one topic or purpose, such as a chapter, a set of search results, or a pricing section. Include a heading in most document sections so readers can understand and navigate the structure.
<section aria-labelledby="pricing-heading">
<h2 id="pricing-heading">Compare the plans</h2>
<p>Choose the option that fits your current workload.</p>
</section>
The heading gives the group a clear name; aria-labelledby is useful when that section should also be exposed as a named region landmark. Do not add a landmark to every section. If a wrapper exists only to apply a CSS class, a <div> is the better choice.
When to use <nav>
Use <nav> for a major block of navigation, such as a primary menu or a table of contents. Ordinary inline links, a short list of related articles, or every footer link do not need to be wrapped in <nav>.
A page can have more than one navigation block. Give each one a distinct accessible name when people need to tell them apart:
<nav aria-label="Primary">
<a href="/guides/">Guides</a>
<a href="/about/">About</a>
</nav>
<nav aria-label="On this page">
<a href="#sections">Sections</a>
<a href="#examples">Examples</a>
</nav>
When to use <aside>
An <aside> contains useful content that is related to, but not part of, the main flow. Examples include a related-links panel, a glossary, or a supporting note. A sidebar used only for layout is not automatically an aside; use a generic container if its content has no complementary meaning.
An aside can sit beside an article or within it. In either case, check that it genuinely complements the nearby content. Do not use it for text that is essential to understanding the main point.
What <main>, <header>, and <footer> mean
<main> identifies the page's primary, unique content. Repeated site navigation, logos, and copyright notices belong outside it. A skip link can point to an id on <main> so keyboard users can bypass repeated navigation.
<header> and <footer> describe introductory and closing content for their surrounding page or section. A page-level header can contain a logo and primary navigation; an article-level header can contain its title and publication details. Likewise, a footer inside an article can hold that article's author or date, while the page footer can hold site-wide information.
Headings and accessibility
Semantic elements and ARIA landmarks help people understand page regions, but they do different jobs. For example, <nav> provides a navigation landmark, while a <section> is not automatically a landmark. A named section can be exposed as a region when that is useful; do not add role="region" or labels mechanically.
Use headings to express the content hierarchy: generally one <h1> for the page title, then <h2> for its main sections and lower levels for nested topics. Do not rely on putting an <h1> inside <section> or <article> to make it behave like an <h2>; nesting does not replace a clear heading sequence. Headings are also not styling tools—use CSS to change their visual size.
A practical page structure
This example shows the elements working together. The class names control appearance; the HTML elements describe the content.
<a class="skip-link" href="#main-content">Skip to main content</a>
<header>
<a href="/">Studio name</a>
<nav aria-label="Primary">
<a href="/services/">Services</a>
<a href="/contact/">Contact</a>
</nav>
</header>
<main id="main-content">
<article>
<header>
<h1>How to choose a booking system</h1>
<p>Compare available options and review the terms before choosing.</p>
</header>
<section aria-labelledby="needs-heading">
<h2 id="needs-heading">Start with the customer task</h2>
<p>List what a customer needs to do before comparing tools.</p>
</section>
<section aria-labelledby="cost-heading">
<h2 id="cost-heading">Compare the full cost</h2>
<p>Include setup, payment fees, and ongoing maintenance.</p>
</section>
<footer>
<p>Written by the Studio team.</p>
</footer>
</article>
<aside aria-labelledby="related-heading">
<h2 id="related-heading">Related guides</h2>
<a href="/guides/">Browse the guides</a>
</aside>
</main>
<footer>
<p>Contact and business information</p>
</footer>
This is a starting point, not a required template. A small page does not need every element. Add only the structure that matches its content, and keep heading levels in order.
Legacy illustrations from the original article
The original flowchart download is no longer available at its former HTML5 Doctor URL. The copy hosted with this article is retained below as historical context; use the current references in this guide rather than treating the diagram as normative.
The article also included this older page-layout illustration. It is retained as a visual example, not as current semantic guidance:
Further reading
- HTML Living Standard: Sections
- MDN:
<article> - MDN:
<aside> - MDN:
<figure> - MDN:
<main> - MDN:
<nav> - MDN:
<section> - MDN: Heading elements
- W3C WAI: Landmark Regions
For more examples relevant to site builders, see free responsive HTML and CSS templates, free Material Design HTML5 templates, and one-page website templates built with HTML5 and CSS3. You can also browse these web-design infographics.
