semantic-html-and-seo

Semantic HTML and SEO

Good HTML is not just markup — it is the contract between your content, search engines, assistive technologies, and the browser. Semantic HTML, correct metadata, and progressive enhancement make UI resilient, findable, and accessible by default.

---

Semantic HTML5

Use the element that describes the content's meaning, not just its appearance.

Document structure

<header>       <!-- site header, logo, primary nav -->
<nav>          <!-- navigation links -->
<main>         <!-- primary page content, one per page -->
<article>      <!-- self-contained content: blog post, product card, news item -->
<section>      <!-- thematic grouping with a heading -->
<aside>        <!-- tangentially related content: sidebar, callout -->
<footer>       <!-- site footer, secondary links, copyright -->

Headings

One <h1> per page — the primary topic. Headings form an outline: do not skip levels (h1 → h3 without h2).

<h1>Product name</h1>
  <h2>Features</h2>
    <h3>Feature detail</h3>
  <h2>Pricing</h2>

Interactive elements

<button>   <!-- clickable action, submits or triggers JS -->
<a href>   <!-- navigation to a URL -->
<input>    <!-- user data entry -->
<select>   <!-- option selection -->
<details> / <summary>  <!-- native disclosure/accordion -->

Never use <div> or <span> as interactive elements without full ARIA annotation — and even then, prefer the native element.

---

Images and Alt Text

Every <img> needs an alt attribute. What goes in it depends on context.

Image type	Alt text
Informative (product photo, chart)	Describe content: alt="Red leather sofa, three-seater"
Functional (icon button, logo link)	Describe function: alt="Go to homepage"
Decorative	Empty: alt="" — screen readers skip it
Complex (chart, diagram)	Short alt + longer description nearby or in <figcaption>

<!-- Informative -->
<img src="sofa.jpg" alt="Red leather sofa, three-seater">

<!-- Decorative -->
<img src="divider.svg" alt="">

<!-- With caption -->
<figure>
  <img src="chart.png" alt="Bar chart showing revenue growth Q1–Q4 2025">
  <figcaption>Revenue grew 42% year-on-year in Q4 2025.</figcaption>
</figure>