Tutorial: give your page semantic structure

If your page is pure <div> everywhere, it technically works, but it's like labeling every moving box as "stuff". Semantic HTML gives each box an actual name.

Step 1: identify the parts of your page

A typical page has: a header, a navigation menu, main content, and a footer. HTML has a tag for each:

<header>
  <h1>My site</h1>
  <nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
  </nav>
</header>

<main>
  <h2>Welcome</h2>
  <p>This is the page's main content.</p>
</main>

<footer>
  <p>&copy; 2026 My site</p>
</footer>

Step 2: group related content with <section> and <article>

<main>
  <section>
    <h2>My projects</h2>
    <article>
      <h3>Project 1</h3>
      <p>Project description.</p>
    </article>
    <article>
      <h3>Project 2</h3>
      <p>Project description.</p>
    </article>
  </section>
</main>

<article> is for content that makes sense on its own (a post, a product card). <section> groups related content within a page. No pop quiz, but now your HTML explains itself.

Step 3: why it matters (besides looking nice)

• Screen readers use these tags to navigate the page faster.
• Google understands your content better (better SEO, for free).
• Future-you, reading this code in six months, won't want to cry.

What did you just learn?

• The header, nav, main, footer, section, and article tags.
• Why semantic HTML helps accessibility and SEO.
• That swapping <div> for the right tag costs nothing extra.