Semantic HTML: Why the Element You Choose Matters

Two pages can look identical and still behave very differently. The difference is semantics: what your markup says about the meaning of each part of the page. Browsers, search engines and assistive technologies all rely on that meaning.

Use the element that already does the job

A native element comes with behaviour you would otherwise rebuild by hand. A button is focusable, responds to Enter and Space and is announced as a button. A styled div with a click handler is none of those things.

<!-- Avoid -->
<div class="btn" onclick="save()">Save</div>

<!-- Prefer -->
<button type="button" onclick="save()">Save</button>

Landmarks give the page a map

Elements such as header, nav, main, aside and footer let screen-reader users jump between regions. A page should have one main element, and navigation blocks belong in nav.

Headings describe structure, not size

Use one h1 for the page topic and nest lower levels in order. If a heading looks too large, change its size with CSS rather than picking a different level.

Labels and alternative text

• Every form control needs a label connected with for and id, or by wrapping the input in the label. Placeholder text is not a substitute.
• Images that carry meaning need descriptive alt text. Purely decorative images use alt="" so they are skipped.
• A button inside a form submits it by default. Add type="button" when it should not.

ARIA is a last resort

The first rule of ARIA is to use a native element when one exists. ARIA changes what assistive technology is told, not how an element behaves, so a div with role="button" still needs focus and key handling.

Key takeaways

• Choose elements for their meaning, then style them.
• Keep heading levels in order and one main per page.
• Connect every label to its input.
• Prefer native controls to ARIA workarounds.