Structuring the Main Content: main, section, article, aside

~9 Min. Lesezeit Zuletzt aktualisiert am August 8, 2026

Now that header, navigation, and footer are settled, let's move on to the most important part: the actual content of the page. There are four more semantic elements for that.

<main>: the main content

<main> marks the unique, most important content of a page - everything that isn't navigation, header, or footer. One rule: <main> may only appear once per page.

<main>
  <!-- The page's main content goes here -->
</main>

<section>: thematic sections

<section> groups a connected thematic part within the page - usually with its own heading:

<section>
  <h2>My Hobbies</h2>
  <ul>
    <li>Riding my bike</li>
    <li>Drawing</li>
  </ul>
</section>

A good rule of thumb: if a section would have its own heading if it appeared in a table of contents, <section> is usually the right choice.

<article>: standalone content

<article> marks content that would make sense entirely on its own, completely detached from the rest of the page - for example a blog post, a product card, or a single match report:

<article>
  <h2>Match Report: Our Win on Saturday</h2>
  <p>We won 3 to 1! I scored a goal myself.</p>
</article>

<section> vs. <article>: the difference

These two are often confused. Rule of thumb: ask yourself whether the content would make sense entirely on its own, for example if you copied it and pasted it onto a different page.

<article>: yes, it would make sense on its own (a match report, a blog post).
<section>: no, it needs the context of the rest of the page ("My Hobbies" really only makes sense in the context of "this is Finn's website").

An <article> can even contain <section> elements, if the standalone article itself has several thematic parts - and conversely, a <section> can contain several <article> elements (for example a "News" section with several individual articles inside).

<aside>: secondary content

<aside> marks content that's somehow related to the main topic but isn't the actual core of it - comparable to a sidebar or an info box in a newspaper:

<aside>
  <h3>Did You Know?</h3>
  <p>The fastest penalty kick in football history was scored after just 2.8 seconds!</p>
</aside>

Fully structuring Finn's home page

Let's bring it all together now - here's how the structure of index.html could look:

index.html

<body>

  <header>
    <h1>Finn's Football Website</h1>
  </header>

  <nav>
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="players.html">My Favourite Players</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </nav>

  <main>

    <section>
      <h2>About Me</h2>
      <p>Hi! I'm Finn and I love football ...</p>
    </section>

    <article>
      <h2>Match Report: Our Win on Saturday</h2>
      <p>We won 3 to 1! I scored a goal myself.</p>
    </article>

    <section>
      <h2>My Hobbies</h2>
      <ul>
        <li>Riding my bike</li>
        <li>Drawing</li>
      </ul>
    </section>

    <aside>
      <h3>Did You Know?</h3>
      <p>The fastest penalty kick in football history was scored after just 2.8 seconds!</p>
    </aside>

  </main>

  <footer>
    <p>&copy; 2026 Finn's Football Website</p>
  </footer>

</body>

Tipp: Move your remaining existing sections (club, photos, video, form link, etc.) into <section> or <article> elements inside <main> accordingly, whichever fits the content best.

Vorheriges Kapitel Header and Footer Areas: header, footer, nav Nächstes Kapitel Restructuring Your Whole Website