---
title: "Semantic HTML"
slug: "html"
category: "frontend"
tags: ["frontend", "html", "accessibility"]
status: "stable"
last_updated: 2026-05-14
summary: "Semantic elements, heading order, accessible forms, head and meta hygiene, and image defaults that prevent layout shift."
related: ["[[frontend/css]]", "[[frontend/tailwind]]", "[[seo/technical]]", "[[seo/structured-data]]"]
---
## Overview
HTML is the contract between your page and every downstream consumer: screen readers, search crawlers, browser reader modes, embedders, and LLM agents. Semantic elements, correct heading order, and a clean `` make that contract legible. This page is the baseline every page on a real site should clear.
## Pick the element that names the role
Use the element that names what the region is, not a `
` with a class.
- ``: the page's primary content. One per page.
- ``: a self-contained piece of content (a blog post, a product card).
- ``: a thematic group within an article or page. Needs a heading.
- `