Semantic HTML

Semantic HTML means using the HTML element that matches the meaning of your content, such as a button for an action or a heading for a section title. The element communicates purpose, not just appearance.

Why it matters

The right element comes with built-in behavior, so you write less code and get accessibility for free. For beginners, it is one of the highest-impact habits for building inclusive interfaces.

In depth

Semantic elements like nav, main, header, and button carry meaning that browsers and screen readers understand. Reaching for a generic div or span and styling it to look interactive is a common shortcut that quietly breaks keyboard and screen-reader support. Choosing the meaningful element first is almost always simpler than recreating its behavior later.

Real-world example

A real button element handles clicks, keyboard activation, focus, and its role for assistive technology automatically, while a styled div has to add every one of those behaviors back by hand.

Try it

Outline

<header>
<nav>
<main>
<h1>
<button>

Semantic

Related terms

Back to index