Content updated
By the end, you can…
- Identify the purpose of common page regions.
- Choose between a section, article, and neutral container.
One idea at a time
Semantic HTML describes what content is for. header introduces a page or section; nav groups major navigation links; main identifies the dominant content. These elements provide meaning without deciding where their content appears on screen. Position and appearance are separate styling decisions.
Use article for a self-contained piece that could make sense on its own, such as a blog post. Use section for a thematic grouping, usually with a heading. A div is a neutral container when you need grouping without an extra meaning. It is not wrong to use div when it is the appropriate choice.
aside contains information indirectly related to the surrounding content, such as related reading. footer contains information about its page or section, such as authorship or related links. Neither aside nor footer guarantees a particular visual placement. A footer can belong to an article, not only the whole site.
All these region elements have opening and closing tags and contain other page content. The example reuses a for a link, h1 and h2 for headings, and p for paragraphs. aria-label is an attribute giving a region an accessible name, such as Main for navigation; it does not insert visible text. The link still needs its own readable words.
Give each region a clear job
Choose a container by what its content means, not where you want it to appear.
Start with the page regions
<header>Introduction- Introduces a page or section; it can contain headings and navigation.
<nav>Major navigation- Groups links. aria-label can give the region a name such as Main.
<main>Main page content- Use one visible main region for the page's primary content.
<footer>Closing information- Can contain authorship or related information for a page or article.
Group content when needed
<article>Self-contained piece- A post or story that can make sense on its own.
<section>Topic within the page- Groups related content, usually under a heading.
<aside>Indirectly related content- For supporting information, not automatically a right-hand sidebar.
<div>Neutral group- Adds a container without a special meaning. All these region elements wrap content and have closing tags.
Walk through an example
<header>
<p>Garden notebook</p>
<nav aria-label="Main"><a href="#post">Read the latest post</a></nav>
</header>
<main id="post">
<article>
<h1>My first seedlings</h1>
<p>Three seeds sprouted this week.</p>
<section><h2>What I noticed</h2><p>The soil stayed damp.</p></section>
</article>
</main>
<footer><p>Written by a new gardener.</p></footer>The site introduction and navigation sit outside main. The article contains a complete short story, and its section groups observations under a heading. main occurs once as the visible main content. The aria-label names the navigation region; it does not replace the visible text of its link.
See it happen: try a small change
Toggle the educational outlines. The HTML stays the same; the outlines help you find its regions.
Code to notice
<header aria-label="Lesson example">
<p>Garden notebook</p>
<nav aria-label="Main">
<a href="#post">Read the latest post</a>
</nav>
</header>
<main aria-label="Lesson example" id="post">
<article>
<h1>My first seedlings</h1>
<p>Three seeds sprouted.</p>
<section>
<h2>What I noticed</h2>
<p>The soil stayed damp.</p>
</section>
</article>
</main>
<footer aria-label="Lesson example">
<p>Written by a new gardener.</p>
</footer>Live result
What changed: The elements communicate roles even without colored outlines. Follow the link to reach the post.
Choose meaning before appearance
Imagine removing all visual styling. Could a reader still identify the main topic and follow the heading order? Semantic structure and meaningful headings support that reading path. Our region highlight is an educational overlay, not a claim that the browser automatically draws colored borders around semantic elements.
Not every paragraph needs a section, and not every link needs its own nav. Group content when it has a real purpose. If you have two navigation regions, give them distinct names such as Main and Footer so people can distinguish them. Prefer native elements before reaching for extra accessibility attributes.
Changing a div to article may leave the page looking the same. That is expected: meaning can change without changing visual presentation. Test the structure by reading the headings and identifying each region, rather than judging only by the default font sizes.
Try it in your browser
Replace the visible body content with your journal regions; do not put a new main inside an existing main. Save and refresh, follow the navigation link, and identify the article’s heading and subsection. The preview’s colored region outlines are a teaching aid, not styling you need to reproduce.
A common wrong turn
Choosing aside because you want a box on the right confuses meaning with placement. Content essential to the main story belongs in the main flow even if a design later places it beside other text.
Change one thing
Toggle the region highlight in the example, then read the source without it. Point to the element that holds the page's main content and explain why the post is an article.
Your turn: structure a journal entry
Create a short journal page with a site introduction, navigation to the post, one main region containing an article, and a footer. Include a titled subsection inside the article.
Try this in your own HTML file, then open the page in a browser. There is no separate checked practice for this task yet.
- Write a short post before choosing containers.
- Assign each group a purpose and add an appropriate element.
- Follow the navigation link and read the headings in order. Confirm there is one visible main region.
Go to the source
Examples are authored for Tuklas and checked with code and reference documentation. This is not a claim of independent human review. Suggest a correction.