Semantic HTML Essentials

Web Development · 3 minute lesson

HTML describes what content means. A heading introduces a section, a paragraph contains prose, and a list groups related items. Choosing elements by purpose creates a document that is easier to read, maintain, and navigate with assistive technology.

Start a simple page with a clear main heading. Use lower heading levels for the sections beneath it. The main element identifies the primary content, while nav groups navigation links. An article works well for a tutorial that could stand on its own.

Links take readers to another location; buttons perform actions. Keep this distinction in your markup. Add useful link text so the destination makes sense without surrounding sentences. HTML provides these behaviors already, so use its built-in elements before inventing custom replacements.

Try the example

<main>
  <article>
    <h1>Learn JavaScript</h1>
    <p>Build your first interactive page.</p>
    <h2>Your next lesson</h2>
    <a href="/javascript-basics">Explore variables</a>
  </article>
</main>

Practice

Outline a tutorial using one main heading and two section headings. Add a short paragraph and an ordered list of steps. Read the outline without the paragraphs: does it still make sense?

Continue learning: Official documentation.