Semantic HTML: choose elements for meaning and behavior

Semantic HTML uses elements and attributes that describe the content and provide appropriate browser behavior. A button is an actionable control; a link with href navigates; a heading introduces a topic. Their meaning remains useful when styling is unavailable.

Build a small meaningful page

The navigation links reach real sections. Main identifies the dominant content, and the heading ranks describe its structure. The example is an isolated document with its own h1.

<header>
  <p>Practice notes</p>
  <nav aria-label="On this page">
    <a href="#forms">Forms</a><a href="#layout">Layout</a>
  </nav>
</header>
<main>
  <h1>HTML and CSS practice</h1>
  <section id="forms">
    <h2>Forms</h2>
    <p>Use labels and real controls.</p>
  </section>
  <section id="layout">
    <h2>Layout</h2>
    <p>Choose CSS for presentation.</p>
  </section>
</main>
<footer><p>End of the practice document.</p></footer>

body {
  max-width: 35rem;
}
nav a {
  margin-inline-end: 1rem;
}

Choose an element by the question it answers

Use p for a paragraph, ul for unordered related items, and ol when sequence matters. Use th and proper header relationships in data tables. Use img with a context-appropriate alt for meaningful images. Use strong for importance and em for stress emphasis rather than simply requesting bold or italic pixels.

Generic div/span remain useful when there is no more appropriate meaning. Do not replace every div with section; a section normally needs a thematic purpose and heading. The HTML content model still matters: semantic intentions do not make invalid nesting valid.

Native behavior helps, but still needs care

A native button supports keyboard activation and focus, but it still needs an accessible name. An input still needs a label and relevant validation. A dialog still needs sensible opening focus, closing behavior, and return focus. Semantic elements do not make every page automatically accessible.

Inspect the heading/landmark structure and test with the keyboard. Avoid adding redundant ARIA roles to elements that already provide the intended semantics, and do not use a role to conceal a mismatched interaction. Meaningful structure helps readers and tools understand the page, but it is not a guarantee of better search rankings.

Learn forms and controls, headings, main, and div.

Sources

Reference 1 Reference 2 Reference 3 provide the technical details and current compatibility information.