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

Source: https://devdocs10.com/articles/html/html-structural-elements  
By Murat Bo · Published 2026-10-03 · DevDocs10 (https://devdocs10.com)

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

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.

```html
<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.

```html
<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.

```html
<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.

```html
<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.

```html
<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.

```html
<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.

```html
<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.

```html
<main>
  <h1>Dashboard</h1>
</main>

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

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

```html
<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.

```html
<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.

```html
<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.

```html
<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.

```html
<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.

```html
<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.

```html
<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:**

```html
<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.