HTML main, article, section – Content Structure Elements

The main Element

The <main> element represents the primary, dominant content of the page — the content that is unique to this specific page, excluding content that repeats across pages like site header, sidebar navigation, and footer.

• There should be only one visible <main> per page.
• It is a landmark region — screen readers jump directly to it via keyboard shortcut.
• It is the target of "Skip to content" links, improving keyboard navigation.
• Do not nest <main> inside <header>, <footer>, <nav>, <article>, or <aside>.

<!-- Skip link targets main -->
<a href="#main-content" class="skip-link">Skip to content</a>

<header>…site header, nav…</header>

<main id="main-content">
  <!-- All unique page content goes here -->
  <h1>HTML Form Basics</h1>
  <p>HTML forms are the primary way…</p>
</main>

<footer>…site footer…</footer>

The article Element

The <article> element represents a self-contained piece of content that could be independently distributed or syndicated — taken out of context and still make complete sense. Ask yourself: "Could this be published as a standalone item in an RSS feed, a social media card, or a different website?" If yes, it is an <article>.

Typical uses:

• A blog post or news article
• A product listing card (the card for a single product in a grid)
• A user comment (a complete, standalone contribution)
• A tutorial page (like this page)
• A social media post embed
• A widget or interactive component distributed on its own

<!-- A blog post listing: each post is an article -->
<main>
  <h1>Latest tutorials</h1>

  <article>
    <header>
      <h2><a href="/html/forms/form-basics.html">HTML Form Basics</a></h2>
      <time datetime="2026-03-10">10 March 2026</time>
    </header>
    <p>Learn how the form element, action, method, and input controls work…</p>
    <a href="/html/forms/form-basics.html">Read more</a>
  </article>

  <article>
    <header>
      <h2><a href="/html/forms/input-types.html">HTML Input Types</a></h2>
      <time datetime="2026-03-12">12 March 2026</time>
    </header>
    <p>Every HTML input type explained with code examples…</p>
    <a href="/html/forms/input-types.html">Read more</a>
  </article>

</main>

Nested articles

Articles can be nested. A comment thread is a good example: the original post is an <article>, and each reply is also a self-contained <article> nested inside the parent's comment section.

<article class="blog-post">
  <header>
    <h1>What is Semantic HTML?</h1>
    <time datetime="2026-04-01">1 April 2026</time>
  </header>

  <p>Semantic HTML means using elements that describe their meaning…</p>

  <section class="comments">
    <h2>Comments</h2>

    <!-- Each comment is a self-contained article -->
    <article class="comment">
      <header>
        <strong>Alice</strong>
        <time datetime="2026-04-02T09:30">2 April 2026</time>
      </header>
      <p>Great explanation! Really helped me understand article vs section.</p>
    </article>

    <article class="comment">
      <header>
        <strong>Bob</strong>
        <time datetime="2026-04-02T11:15">2 April 2026</time>
      </header>
      <p>I always used divs for everything. Not any more!</p>
    </article>

  </section>
</article>

The section Element

The <section> element represents a thematic grouping of content that belongs together and typically has a heading. It is a named chapter within a larger document — unlike <article>, the content of a <section> does not make complete sense on its own outside of its parent document.

Typical uses:

• Chapters within an article (Introduction, Features, Conclusion)
• Themed areas on a landing page (Hero, Features, Pricing, Testimonials)
• Named parts of a long-form document
• Tab panels (the content of each tab)

<!-- Section as chapter within an article -->
<article class="tutorial">
  <h1>HTML Form Basics</h1>

  <section>
    <h2>The form element</h2>
    <p>The form element wraps all your controls…</p>
  </section>

  <section>
    <h2>GET vs POST</h2>
    <p>Choosing the right method matters…</p>
  </section>

  <section>
    <h2>The name attribute</h2>
    <p>The name attribute keys the submitted data…</p>
  </section>

</article>

<!-- Sections on a homepage -->
<main>
  <section class="hero">
    <h1>Learn to Code for Free</h1>
    <p>Structured tutorials for beginners.</p>
  </section>

  <section class="features">
    <h2>Why ylearner?</h2>
    <!-- feature cards -->
  </section>

  <section class="courses">
    <h2>Our Courses</h2>
    <!-- course cards -->
  </section>
</main>

Comparison: main vs article vs section vs div

When to Use article vs section

The key question is: can this content stand alone?

• Use article when the content is self-contained and would make sense if copied to a different website, RSS feed, or social media card. A blog post, a product card, a comment, a recipe.
• Use section when the content is a named chapter or thematic block within a larger document and would lose context if removed from that document. The "Features" section of a homepage, a "Summary" chapter of a tutorial.

<!-- Real-world blog listing page: articles within a section -->
<main>

  <section>
    <h2>HTML Tutorials</h2>

    <article>  <!-- standalone post card -->
      <h3><a href="/html/forms/form-basics.html">HTML Form Basics</a></h3>
      <p>Everything you need to know about building HTML forms.</p>
    </article>

    <article>  <!-- another standalone card -->
      <h3><a href="/html/semantic/what-is-semantic.html">What is Semantic HTML?</a></h3>
      <p>Using elements that describe their meaning.</p>
    </article>

  </section>

  <section>
    <h2>Python Tutorials</h2>
    <!-- more articles -->
  </section>

</main>

main, article, section: Choosing the Right Container

These three semantic containers confuse people because they can look identical. The distinction is about meaning and reusability, not appearance.

<main>
  <article>                    <!-- a standalone blog post -->
    <h1>Title</h1>
    <section><h2>Background</h2>...</section>
    <section><h2>Method</h2>...</section>
  </article>
</main>

The test: could this block stand alone somewhere else (syndicated, reused)? Use <article>. Is it just a themed part of its parent? Use <section>. Is it purely a styling wrapper with no meaning? Then it's a plain <div>. A <section> should almost always have a heading — if it doesn't, a <div> is probably right.

Interview Questions

• How many <main> elements should a page have?
• What is the difference between <article> and <section>?
• When is content appropriate for an <article>?
• Should every <section> have a heading? Why?
• Can an <article> contain <section>s and vice versa?

Related Topics