WGU Proctored ExamsOA study guides & exam prep
Find Your Course
WGU D276 practice

HTML Semantic Structure Tags: When to Use article, section, aside, main, nav, header and footer

Semantic structure tags describe what a block of content is, not how it looks. This lesson explains the difference between article, section, aside, main, nav, header and footer — including the syndication test that settles article vs. section, the strict placement rules for main, and how header and footer change meaning depending on where they sit — then gives you practice questions with worked explanations.

Semantic structure tags tell browsers, screen readers, and search engines what each block of your page is, not just how it looks. In short: <main> wraps the page's dominant, unique content; <article> wraps a self-contained item you could republish elsewhere; <section> groups related content under a heading; <aside> holds material only indirectly related to what surrounds it; <nav> holds a major block of navigation links; and <header> and <footer> hold the opening and closing material for whatever region contains them.

Only four of them are "sectioning content"

HTML classifies just <article>, <aside>, <nav>, and <section> as sectioning content — elements that create a section in the document's outline. <main>, <header>, and <footer> are not. They label a region inside whatever section surrounds them — which is why <header> and <footer> shift meaning by position. Each element, with the question that usually settles it:

  • <article> — a blog post, forum reply, product card, or comment. Would it still make sense republished on its own?
  • <section> — a themed chunk of a larger whole, with its own heading. Would its contents be listed in the page's outline?
  • <aside> — pull quotes, tip boxes, related links, author bios. Is it only indirectly related to what surrounds it?
  • <nav> — primary menus, tables of contents, in-page indexes. Is this a major block of links?
  • <main> — the one region unique to this page. Is this what the page is actually about?
  • <header> and <footer> — introductory and closing material for their container. Whose is it — the page's, or one section's?

The test that settles article vs. section

The WHATWG spec defines an <article> as a composition that is "in principle, independently distributable or reusable, e.g. in syndication," and encourages <article> over <section> whenever syndicating the contents would make sense. A chapter of a guide is a <section> — it only means something inside the guide. A customer review that could appear untouched in a "recent reviews" feed is an <article>. If a wrapper has no heading and exists only so you can attach CSS or JavaScript, use <div> — the spec is explicit that <section> is not a generic container.

main is the picky one

A document must not have more than one <main> without the hidden attribute, and a hierarchically correct <main> has ancestors limited to <html>, <body>, <div>, a <form> without an accessible name, and autonomous custom elements. Nesting it inside <article>, <section>, <nav>, <header>, or <footer> is therefore invalid. Its contents must be unique to the page, so the logo, global nav, sidebar, and copyright line sit outside it.

header and footer read their surroundings

A <header> not nested inside sectioning content or <main> exposes the banner landmark; a <footer> in that position exposes contentinfo. Nest either inside <article>, <aside>, <nav>, <section>, or <main> and its implicit role drops to generic — still meaningful markup, just not a landmark. You may use several of each per page, but a <header> must not contain another <header> or a <footer>, a <footer> must not contain either, and neither may sit inside an <address> element.

New to the course? Start with the WGU D276 Web Development Foundations study guide, then work through the questions below.

Practice: Semantic Structure Tags

  1. According to the HTML specification, which placement of the <main> element is invalid?

    • <main> as a direct child of <body>
    • <main> inside a <div> that is a child of <body>
    • <main> inside an <article> element
    • <main> inside a <form> element that has no accessible name
    Show answer & explanation

    Correct answer: <main> inside an <article> element. The spec defines a "hierarchically correct main element" as one whose ancestor elements are limited to html, body, div, form without an accessible name, and autonomous custom elements. An <article> is not on that list, so nesting <main> inside it is invalid. The <form> option is the tempting one, because a form feels like an odd parent, but the spec explicitly permits a form that has no accessible name.

  2. A product page displays a customer review with the reviewer's name, a star rating, and a date. The same review is also pulled into a site-wide "Recent reviews" feed with no changes. Which element should wrap the review?

    • <section>, because the review is one themed part of the product page
    • <article>, because the review is self-contained and independently reusable
    • <aside>, because the review is supplementary to the product description
    • <div>, because a review is not one of the standard document regions
    Show answer & explanation

    Correct answer: <article>, because the review is self-contained and independently reusable. The spec defines <article> as a self-contained composition that is "in principle, independently distributable or reusable, e.g. in syndication" — and a review republished untouched in a feed is exactly that. <section> is the tempting choice because the review does sit inside a larger page, but <section> is for a thematic grouping that only makes sense as part of the whole; content that travels on its own is an <article>.

  3. Which of these uses of <aside> matches MDN's guidance?

    • Wrapping a parenthesized clause in the middle of a sentence so it reads as an aside
    • A boxed "related fact" inside an <article> that supplements the article's topic
    • Wrapping the page's primary content column when the layout puts it on the right
    • Wrapping the site's main menu because the design places it in a left sidebar
    Show answer & explanation

    Correct answer: A boxed "related fact" inside an <article> that supplements the article's topic. MDN's own example nests an <aside> inside an <article> as a call-out holding content only indirectly related to the surrounding material. Option 1 is the classic trap — MDN explicitly says not to use <aside> for parenthesized text, since that text is considered part of the main flow. And <aside> describes a content relationship, not a screen position, so a sidebar full of navigation links is still <nav>.

  4. A page has one <footer> as a direct child of <body> holding the copyright line, and a second <footer> inside an <article> holding that post's tags. Which statement is accurate?

    • The markup is invalid, because a document may contain only one <footer>
    • Both footers expose the contentinfo landmark to assistive technology
    • The body-level footer maps to contentinfo; the one inside the <article> maps to generic
    • The footer inside the <article> must be changed to an <aside> to be valid
    Show answer & explanation

    Correct answer: The body-level footer maps to contentinfo; the one inside the <article> maps to generic. A <footer> has an implicit contentinfo role only when it is not a descendant of article, aside, main, nav or section; inside an <article> its implicit role is generic. The "both are contentinfo" option is the common misconception — landmark meaning is contextual, not baked into the tag. Multiple footers are perfectly valid: one per section plus one for the page.

  5. Your page footer contains three links: Privacy, Terms, and Contact. What does the HTML guidance say about wrapping them in <nav>?

    • Any group of two or more links must be inside a <nav> element
    • <nav> is meant for major blocks of navigation links, and footer link lists often do not need it
    • The links must be in a <nav> that also carries role="navigation" for older screen readers
    • They cannot be in a <nav>, because a document may contain only one <nav> element
    Show answer & explanation

    Correct answer: <nav> is meant for major blocks of navigation links, and footer link lists often do not need it. MDN states that it is not necessary for all links to be contained in a <nav>; the element is intended only for a major block of navigation links, and the footer often has a list of links that do not need one. Option 3 is tempting but wrong twice over: <nav> already has an implicit navigation role and MDN lists no role attribute as permitted on it. A document may also contain several <nav> elements, which is why labelling them is the real accessibility advice.

  6. You need a wrapper around three thumbnail images purely so you can apply a CSS grid. The group has no heading and would not show up in the page's outline. Which element is the right choice?

    • <section>, because it groups related content
    • <div>, because the wrapper exists only for styling
    • <main>, because the thumbnails are page content
    • <article>, because each thumbnail is a separate item
    Show answer & explanation

    Correct answer: <div>, because the wrapper exists only for styling. The spec says the <section> element is not a generic container, and that when an element is needed only for styling or as a convenience for scripting, authors are encouraged to use <div> instead. The general rule is that <section> is appropriate only if its contents would be listed explicitly in the document's outline, which in practice means it carries a heading. A styling hook with no heading and no outline entry is a <div>.

A worked example: one page, all seven elements

Here is a blog page that uses each element for the reason it exists. Read it top to bottom and notice how the same tag means different things at different depths.

<body>
  <header>                        <!-- banner: logo + global nav -->
    <a href="/">Site logo</a>
    <nav aria-label="Main">...</nav>
  </header>

  <main>                          <!-- unique content only -->
    <article>
      <header>                    <!-- generic: the post's intro -->
        <h1>Choosing a Layout</h1>
        <p>By Dana, <time datetime="2026-03-04">March 4</time></p>
      </header>

      <section>
        <h2>Grid vs. Flexbox</h2>
        <p>...</p>
        <aside><p>Tip: start with the content, not the columns.</p></aside>
      </section>

      <footer><p>Filed under: CSS</p></footer>  <!-- generic -->

      <article>                   <!-- a reader comment -->
        <h3>Great write-up</h3>
        <p>...</p>
      </article>
    </article>
  </main>

  <footer><p>&copy; 2026</p></footer>   <!-- contentinfo -->
</body>

The nested <article> is deliberate. The spec says that when articles are nested, the inner one represents an article that is in principle related to the contents of the outer one — which is why comments on a post are marked up this way.

The mistakes people actually make

  • Using <section> as a fancy <div>. If it has no heading and its contents would not be listed in the outline, it is a <div>. A <section> with no accessible name also exposes only a generic role, so you gain nothing.
  • Putting site chrome inside <main>. The logo, global navigation, sidebar, and copyright repeat on every page, so they sit outside <main>.
  • Adding a second visible <main>. Only one per document may lack the hidden attribute.
  • Choosing <aside> by position. A left-hand menu is still <nav>; a tip box in the middle of the flow is still <aside>. And do not wrap parenthesized text in <aside> — that text is part of the main flow.
  • Nesting <header> inside <footer>. Not allowed — and a <header> may not contain another <header> or a <footer> either.

Reasoning through the tricky cases

When two elements both seem to fit, ask these questions in order. First: could this content stand alone somewhere else? If yes, <article>. If no, second: does it have a heading and belong in the outline? If yes, <section>. If no, third: is it merely supporting the surrounding content? If yes, <aside>. If none apply, you are looking at a <div>, and that is a perfectly good answer.

One landmark habit worth building: when a page has more than one <nav>, label each with aria-label or aria-labelledby so screen-reader users hear "Main navigation" and "Table of contents" rather than "navigation" twice. The full details live in the MDN reference for <nav>.

Ready to keep drilling? Work through more D276 practice questions and come back to this page whenever an element choice feels ambiguous.

Want someone to walk you through this?

Book 1-on-1 prep for WGU D276 — original coaching, never exam content.

Stuck on this topic? WhatsApp us on +1 646 980 4914.

Working through the whole course? Read the full WGU D276 study guide, or see every WGU D276 practice topic.

More WGU D276 practice

Html Document Structure

The five lines at the top of every HTML file are not decoration. Here is what the doctype, the html/head/body split, meta charset, and the viewport tag each do — why the browser misbehaves when you leave one out, and how to reason about the cases that trip people up.

Headings Text Links Lists

Heading elements rank content instead of sizing it, strong and em carry meaning that b and i do not, a fragment link points at an element's id, and ul, ol, and dl each describe a different kind of grouping. Work through how each one behaves, then test yourself on the cases people actually get wrong.

Images And Alt Text

An image starts with one element and one honest description. From there, srcset, sizes, and picture answer a single question: which file should the browser download on this screen? This guide walks through alt text, figure and figcaption, resolution switching, and art direction, then gives you six practice questions with full explanations.

Html5 Audio And Video

The audio and video elements embed media without a plugin. Learn how the browser chooses among source children, which MIME types to use for MP4, WebM, and MP3, what controls and preload actually do, and why fallback content between the tags is not an error message. Includes practice questions with full explanations.

Html Tables

A plain-English walkthrough of HTML table markup for WGU D276: how table, caption, thead, tbody, tr, th and td nest, what the scope attribute actually does for assistive technology, and how colspan and rowspan reshape the grid — plus practice questions with worked explanations.

Forms And Input Types

A form's action says where the data goes and its method says how it travels there. Work through the pieces that carry the data — name attributes, input types, labels tied to ids, select options, textarea content and the button that submits it all — then test yourself on the details that trip people up.