Semantics

Semantic HTML chooses elements whose intrinsic roles reflect content meaning—paragraph vs aside vs navigation—not whichever tag happens to look right in the browser default stylesheet.

Benefits

• Accessibility APIs expose roles, states, and names derived from native elements.
• SEO infers outlines from headings and structured data patterns.
• Maintainability improves because markup reads like the domain model.

Decision workflow

1. Identify the content purpose (navigation, citation, control).
2. Pick the narrowest fitting element (button vs a).
3. Add classes for styling once semantics are locked.

Semantic building blocks (what to use when)

article

Self-contained piece (blog post, review, card story) reusable in syndication.

section

Thematic grouping; usually includes a heading.

nav

Major navigational clusters—not every grouped link row.

aside

Sidebar tangential to main flow (related links, promos).

header / footer

Intro/outro for page or for nested sections.

main

Primary unique content of the document (one per page in most designs).

figure / figcaption

Illustrations, diagrams, quoted media with optional caption.

address

Contact information for people/organizations—not every postal string.

time

Machine-readable timestamps via datetime.

Example — article with header, section, aside

<article>
  <header><h2>Release notes</h2><p><time datetime="2026-05-01">May 1</time></p></header>
  <section><h3>Fixes</h3><p>…</p></section>
  <aside><p>See also <a href="/changelog">full changelog</a>.</p></aside>
</article>

Rendered output (h2/h3 for demo—to avoid stacking extra top-level headings in this lesson page)

When semantics run out

Complex widgets (comboboxes, tabs) may need ARIA roles plus keyboard patterns defined in WAI-ARIA Authoring Practices—still prefer progressive enhancement.

Anti-pattern: div-driven UI

Replicating buttons, links, or headings solely with div forces redundant ARIA and JavaScript—expensive and fragile.

What experienced devs still misjudge

• Shipping ARIA roles without keyboard behavior—role without roledescription is cosplay.
• Assuming automated Lighthouse scores equal accessible—manual flows catch false negatives/positives.
• Localization: translated strings change length—layout must flex; semantics must stay stable across languages.

Important interview questions and answers

1. Q: What is the safest default character encoding for modern HTML?
   A: UTF-8, declared early with `` and matched by server `Content-Type` headers.
2. Q: When are HTML entities still useful in UTF-8 pages?
   A: For reserved characters (`&`, `<`) and contexts where explicit escaping avoids parser ambiguity.
3. Q: What is the key difference between HTML5 parsing and XHTML parsing?
   A: HTML5 recovers from many errors; XHTML (XML) treats many parse errors as fatal.