HTML Semantics: The Interview Answer

30‑second interview answer

Semantic HTML means using elements that describe the meaning of content—<button>, <nav>, <main>, <article>—instead of generic <div>s. Semantics improves accessibility (screen readers, keyboard behavior), SEO, and maintainability. Prefer native elements first; use ARIA to fill gaps, not to replace semantics.

Why semantics matters (real reasons)

1. Accessibility

• Screen readers use semantics to announce role and structure.
• Native elements come with keyboard behavior for free (e.g., button is focusable and clickable with Enter/Space).

2. SEO & discovery

• Search engines understand page structure better.

3. Maintainability

• Future devs can understand intent instantly.

The most common interview examples

button vs div for clickable UI

Bad:

<div onclick="doThing()">Save</div>

Problems:

• not keyboard accessible by default
• role is unclear
• needs ARIA + tabindex + key handlers

Good:

<button type="button">Save</button>

Page landmarks

Good structure:

<header>...</header>
<nav>...</nav>
<main>
  <article>...</article>
</main>
<footer>...</footer>

Headings: structure matters

Rules of thumb:

• Use one h1 for the page/topic.
• Don’t skip heading levels for visual styling.
• Use CSS for size, not heading level.

Forms: use the right attributes

• Always connect labels to inputs:

<label for="email">Email</label>
<input id="email" name="email" type="email" />

• Use button type="submit" inside forms.
• Use correct input types (email, tel, url) for better mobile keyboards.

ARIA: the interview-safe stance

• Prefer native semantics.
• If you must build a custom control, add:
  • correct role
  • keyboard handling
  • focus management
  • ARIA states (aria-expanded, aria-controls, etc.)

Interview line:

“No ARIA is better than bad ARIA. Native elements first.”

Common traps

1. Using div for everything
2. Click handlers on non-interactive elements without keyboard support
3. Missing alt on images (or meaningless alt)
4. Using headings for styling

Mini Q&A

Q1: Why is semantic HTML important?

• Accessibility + SEO + maintainability.

Q2: When do you use ARIA?

• When native elements can’t express the needed behavior.

Q3: button vs a?

• a navigates; button performs an action.

Summary checklist

• I use native elements for intent.
• I can explain landmarks and headings.
• I know ARIA is a last resort.
• My UI is keyboard accessible by default.