HTML Structural Elements: header, nav, main, section, article, aside, footer

HTML structural elements give your page a meaningful outline so browsers, screen readers, search engines, and other developers can understand what each part of the page does. Instead of relying on generic containers, you can describe the purpose of the content with elements like header, nav, main, section, article, aside, and footer.

Quick answer: Use these elements to describe page regions by meaning, not by appearance. main holds the page’s primary content, nav holds major navigation, article is self-contained content, and section groups related content.

Difficulty: Beginner

You'll understand this better if you know: basic HTML tags, how headings work, and the difference between content structure and visual styling.

1. What Are HTML Structural Elements?

HTML structural elements are semantic tags that define the major parts of a document. They help explain what the content is for, not how it looks on the screen.

header introduces a page or a section.
nav contains the main navigation links.
main contains the unique primary content of the page.
section groups related content under a heading.
article represents independent, reusable content.
aside holds related but secondary content.
footer contains closing information for a page or section.

These elements are part of HTML5 and are widely supported in modern browsers. They also create landmarks that assistive technologies can use to help users move around a page quickly.

2. Why HTML Structural Elements Matter

Without semantic structure, a page may still look correct, but it becomes harder to understand and navigate. Structural elements improve clarity for humans and machines.

They matter because they:

make the document easier to read and maintain;
help screen reader users jump between major regions;
support better heading and content organization;
make layouts more meaningful in large applications and content-heavy sites;
reduce confusion that comes from using only generic div containers.

They are especially valuable when pages grow beyond a simple demo. A well-structured page can be edited, tested, and audited more easily.

3. Basic Syntax or Core Idea

Each structural element is just an HTML tag, but the meaning comes from how you place it in the document.

Minimal page structure

This example shows the usual top-level layout for a content page.

<header>...</header>
<nav>...</nav>
<main>
  <section>...</section>
  <article>...</article>
  <aside>...</aside>
</main>
<footer>...</footer>

In a real page, those ellipses are replaced by headings, paragraphs, links, or other meaningful content. The important idea is that the tag name matches the role of the content.

How the elements differ

header and footer can be used at the page level or inside sections. main should appear once per page and contain the primary content. section usually needs a heading. article should make sense on its own if copied elsewhere. aside is for supporting content, not the main message.

4. Step-by-Step Examples

Example 1: A simple content page

This layout is common for a blog post, documentation page, or product article.

<header>
  <h1>Kitchen Tips</h1>
</header>

<main>
  <article>
    <h2>How to Store Fresh Herbs</h2>
    <p>Keep herbs fresh longer by trimming the stems and storing them properly.</p>
  </article>
</main>

<footer>
  <p>&copy; 2026 Kitchen Tips</p>
</footer>

This example shows a page with one main topic. The article contains content that could stand alone, while the header and footer frame the page.

Example 2: Navigation and page landmarks

A site with multiple pages usually needs a clearly identified navigation area.

<header>
  <nav aria-label="Primary">
    <a href="/">Home</a>
    <a href="/docs">Docs</a>
    <a href="/support">Support</a>
  </nav>
</header>

<main>
  <h1>Documentation</h1>
</main>

The nav element identifies the primary navigation links. The optional aria-label gives screen reader users more context when there is more than one navigation region on the page.

Example 3: Using section for grouped content

Use section when related content belongs together and has its own heading.

<main>
  <section>
    <h2>Pricing</h2>
    <p>Choose a plan that fits your team.</p>
  </section>

  <section>
    <h2>Frequently Asked Questions</h2>
    <p>Find answers to common setup and billing questions.</p>
  </section>
</main>

Each section has a clear purpose and heading. This makes the page easier to scan and helps technologies that rely on headings to understand structure.

Example 4: An aside with related but secondary content

Use aside for supporting material that is not the main focus of the page.

<article>
  <h1>Getting Started with Baking</h1>
  <p>Mix the ingredients carefully and preheat the oven.</p>

  <aside>
    <h2>Helpful Tool</h2>
    <p>A kitchen scale improves measurement accuracy.</p>
  </aside>
</article>

The aside adds context without interrupting the article’s main point. That makes it ideal for notes, related links, glossary boxes, and side commentary.

5. Practical Use Cases

Structural elements are useful in many real projects, including:

news or blog layouts with a single main story and supporting links;
documentation sites with a page header, sidebar navigation, and main article content;
marketing pages with grouped features, testimonials, and a site footer;
e-commerce product pages where specs, reviews, and related products are separate regions;
dashboards where the main content, filters, and supplementary panels need clear structure;
knowledge bases where each help topic is an independent article.

In each case, the tags describe the role of the content so the document stays understandable even before CSS is applied.

6. Common Mistakes

Mistake 1: Using div instead of semantic landmarks

Many beginners build layouts with only generic containers because they seem flexible. That works visually, but it leaves the document with little meaning.

Problem: A page made only of generic containers gives assistive technologies less useful structure, and future readers must infer the purpose of each block from classes or visual styling.

<div class="top">...</div>
<div class="menu">...</div>
<div class="content">...</div>
<div class="bottom">...</div>

Fix: Use the semantic element that matches each region’s purpose.

<header>...</header>
<nav>...</nav>
<main>...</main>
<footer>...</footer>

The corrected version communicates structure directly in the markup, which makes the page easier to understand and navigate.

Mistake 2: Putting more than one main element on the page

The main element is meant to contain the primary content of the page. It should appear once per document.

Problem: Multiple main landmarks can confuse assistive technology and make page navigation less predictable.

<main>
  <h1>Dashboard</h1>
</main>

<main>
  <section>
    <h2>Reports</h2>
  </section>
</main>

Fix: Keep one main element and place all primary content inside it.

<main>
  <h1>Dashboard</h1>
  <section>
    <h2>Reports</h2>
  </section>
</main>

The fixed version gives the page a single clear primary landmark.

Mistake 3: Using section without a heading or clear purpose

A section should group related content, usually with a heading. If it has no heading and no clear reason to exist, a simpler element may be better.

Problem: Empty or unlabeled sections make the outline harder to understand and can create unnecessary document structure.

<section>
  <p>This content has no heading or clear grouping.</p>
</section>

Fix: Add a heading when the content is truly a section, or use a simpler container if it is only for styling.

<section>
  <h2>Shipping Information</h2>
  <p>Orders are processed within two business days.</p>
</section>

The corrected version makes the grouping obvious and gives the section a meaningful heading.

7. Best Practices

Practice 1: Use elements for meaning, not appearance

Choose tags based on what the content is, even before you think about CSS. That keeps the HTML accurate and resilient.

<aside>
  <h2>Related Tip</h2>
  <p>This note supports the main article.</p>
</aside>

This is better than using a generic container because the element name tells everyone what role the content plays.

Practice 2: Reserve main for the unique primary content

Keep only one main element and avoid wrapping sidebars, repeated navigation, or footers inside it.

<main>
  <article>
    <h1>Release Notes</h1>
    <p>Version 2.0 improves performance and accessibility.</p>
  </article>
</main>

This keeps the page’s main landmark predictable for both users and tools.

Practice 3: Give navigational regions clear labels when needed

If a page has more than one navigation block, use an accessible label so each one can be distinguished.

<nav aria-label="Footer links">
  <a href="/privacy">Privacy</a>
  <a href="/terms">Terms</a>
</nav>

A label helps screen reader users understand which navigation they are entering without relying on sight.

8. Limitations and Edge Cases

These elements improve meaning, but they do not replace headings. Good structure still depends on a logical heading order.
section is not just a styled box. If a block has no heading and no semantic purpose, use div instead.
article should be reusable. If content only makes sense in one exact page position, it may not be an article.
aside is not a synonym for sidebar width. It describes the importance of the content, not the visual placement.
header and footer can appear multiple times in a document when they belong to different sections, but the page still needs a clear top-level structure.
Older browsers can still render these elements, but very old environments may need HTML5 support consideration in legacy projects.

A common surprise is that changing a section to an article does not change the look of the page. The difference is semantic, not visual, unless you add CSS.

9. Practical Mini Project

Here is a small, complete page structure for a news article site. It shows how the structural elements fit together in a realistic layout.

<header>
  <h1>Daily Design Notes</h1>
  <nav aria-label="Primary">
    <a href="/latest">Latest</a>
    <a href="/topics">Topics</a>
    <a href="/about">About</a>
  </nav>
</header>

<main>
  <article>
    <header>
      <h2>Designing Clear Page Hierarchy</h2>
      <p>Published on March 10, 2026</p>
    </header>

    <section>
      <h3>Start with meaning</h3>
      <p>Choose elements that describe the role of each page region.</p>
    </section>

    <aside>
      <h3>Related reading</h3>
      <p>See our guide to heading levels and document outline patterns.</p>
    </aside>
  </article>
</main>

<footer>
  <p>&copy; 2026 Daily Design Notes</p>
</footer>

This example combines page-level and nested structural elements. The result is a clear hierarchy that is easier to maintain and more accessible to navigate.

10. Key Points

header, nav, main, section, article, aside, and footer describe meaning, not styling.
main should contain the page’s unique primary content and usually appear only once.
section is best when related content has a heading and a clear topic.
article is for content that could stand alone or be reused elsewhere.
aside is for secondary content that supports the main topic.
Semantic structure improves accessibility, readability, and long-term maintainability.

11. Practice Exercise

Build a simple article page using the correct structural elements.

Create a page with a site header, a primary nav, a main content area, one article, one aside, and a footer.
Give the article a title and at least two sections with headings.
Add a secondary navigation or related-links block if needed, and label it clearly.

Expected output: A page whose structure makes it obvious which content is primary, which content is supporting, and where the navigation belongs.

Hint: If a block would still make sense when copied into another page or feed, it is probably an article.

Solution:

<header>
  <h1>My Learning Blog</h1>
  <nav aria-label="Primary">
    <a href="/home">Home</a>
    <a href="/posts">Posts</a>
  </nav>
</header>

<main>
  <article>
    <header>
      <h2>Why Structure Matters</h2>
      <p>A quick guide to semantic page layout.</p>
    </header>

    <section>
      <h3>Readability</h3>
      <p>Semantic tags make HTML easier to understand.</p>
    </section>

    <section>
      <h3>Accessibility</h3>
      <p>Landmarks help users move through the page.</p>
    </section>

    <aside>
      <h3>Related topic</h3>
      <p>Learn more about heading order next.</p>
    </aside>
  </article>
</main>

<footer>
  <p>&copy; 2026 My Learning Blog</p>
</footer>

This solution uses each structural element for its intended purpose and keeps the page easy to navigate.

12. Final Summary

HTML structural elements help you write markup that reflects the real purpose of your content. When you use header, nav, main, section, article, aside, and footer correctly, your page becomes easier to understand for both people and tools.

The biggest idea to remember is that these tags describe meaning, not appearance. A page can still look the same after you replace generic containers with semantic ones, but the structure becomes much clearer and more accessible.

If you want to go further, the next topic to study is heading hierarchy and how it works together with semantic landmarks. That combination gives you a strong foundation for building accessible, maintainable HTML pages.