Structure and accessibility · Lesson 13 of 16

Semantic HTML

header, nav, main, footer: name every part.

6 minutes2 games

Instead of making everything a <div>, some tags describe a part's role: <header> at the top, <nav> for the main links, <main> for the main content (only one), <article> for standalone content, <footer> at the bottom. Screen readers and search engines understand your page better.

HTML

<header>
  <h1>My Blog</h1>
  <nav>
    <a href="#">Home</a> | <a href="#">About</a>
  </nav>
</header>
<main>
  <article>
    <h2>Learning HTML</h2>
    <p>Today I learned semantic tags.</p>
  </article>
</main>
<footer>© 2026 My Blog</footer>

Quick question

Where do you put the main set of links?

Order the lines

Order the page parts from top to bottom.

Click the lines in the right order

Learn more from

Played 0 of 2 games

HTML

Structure and accessibility · Lesson 13 of 16

Semantic HTML

header, nav, main, footer: name every part.

6 minutes2 games

HTML

<header>
  <h1>My Blog</h1>
  <nav>
    <a href="#">Home</a> | <a href="#">About</a>
  </nav>
</header>
<main>
  <article>
    <h2>Learning HTML</h2>
    <p>Today I learned semantic tags.</p>
  </article>
</main>
<footer>© 2026 My Blog</footer>

Quick question

Where do you put the main set of links?

Order the lines

Order the page parts from top to bottom.

Click the lines in the right order

Learn more from

Played 0 of 2 games