Frontend Beauty
ESC

Type to search the knowledge base.

Semantic HTML

Pick elements for meaning, not looks — landmarks, headings, forms, media, and how semantics feed a11y and SEO.

beginner2 min read
  • html
  • semantics
  • a11y

Semantic HTML means using the element that matches the meaning of the content. Browsers, assistive tech, and crawlers build structure from that meaning. CSS can make a div look like a button; it cannot make that div behave like one without extra work you’ll forget under pressure.

Landmarks people actually navigate

Element Typical role Use it for
header banner (when top-level) Site or section chrome
nav navigation Groups of nav links (label them if you have several)
main main Primary page content — one per page
aside complementary Sidebars, related callouts
footer contentinfo (top-level) Site footer
section / article region / article Thematic groupings; article when it stands alone 
<body>
  <a class="skip-link" href="#main-content">Skip to content</a>
  <header>…</header>
  <nav aria-label="Primary">…</nav>
  <main id="main-content">…</main>
  <footer>…</footer>
</body>

Skip links and landmarks are how keyboard and screen-reader users jump instead of tabbing the entire header every time.

Headings are an outline, not a font size

  • Prefer a single clear h1 for the page topic.
  • Don’t skip levels just to get a size (h1 → h3). Style with CSS.
  • If you only restyle divs as “titles,” the accessibility tree has no outline.

Interactive: prefer native

Need Prefer
Go somewhere <a href>
Do something on this page <button type="button">
Submit <button type="submit"> inside a form
Choose options radio, checkbox, <select>

A div with onclick needs tabindex, keyboard handlers, and an accessible name. Native controls already have that. MDN’s accessibility docs hammer this for a reason.

Forms: labels are not optional

<label for="email">Email</label>
<input
  id="email"
  name="email"
  type="email"
  autocomplete="email"
  required
/>
  • Associate every control with a <label> (or aria-labelledby).
  • Use the right type and autocomplete — browsers and password managers help users.
  • Placeholder is a hint, not a label.

Images

  • Informative → meaningful alt.
  • Decorative → alt="".
  • Reserve space (width/height or CSS aspect-ratio) so LCP/CLS don’t fight you.

How this shows up in interviews

“Why not only div?” → accessibility tree, SEO hints, less custom JS, more resilient CSS.
“How do you structure a dashboard?” → landmarks, heading hierarchy, one main, labeled navs.

Further reading

Related guides