STRUCTURE

Semantic HTML

Use elements that describe the role of page content.

After this lessonChoose header, nav, main, section, article and footer deliberately.

How it works

Semantic elements communicate meaning in addition to structure. They help assistive technology, search engines and future developers understand a page.

Use div when no more meaningful semantic element fits. Good semantics usually reduce the need for extra ARIA roles.

REAL WORK

Make a public tutorial or internal tool easier to navigate and maintain without changing its visual design.

SYNTAX

The pattern

<header>...</header>
<nav>...</nav>
<main>...</main>
<footer>...</footer>

Example

<main>
  <section>
    <h2>Daily output</h2>
  </section>
</main>

TRY IT

Edit and preview

Change the HTML on the left. The sandboxed preview updates on the right.

<main>
  <section>
    <h2>Daily output</h2>
  </section>
</main>

QUICK CHECK

Which element should contain the primary page content?

Progress is stored only in this browser. No account required.