HTML semantics

A semantic element describes the role of its content, e.g. nav, main, article, button. div and span are generic containers.

<main>
  <article>
    <h1>Article title</h1>
    <p>Content…</p>
  </article>
</main>

In practice: I use button for actions and a with href for navigation. Native elements come with useful keyboard behaviour and information for assistive technologies.

Pitfall: swapping every div for a section doesn't make a page semantic. I choose an element for its meaning, not its default look.