Why is semantic HTML important? Give examples of semantic elements.
Take a moment.
Say your answer out loud or write it down first — retrieval is what makes it stick. Reveal when you're ready.
Short answer
Semantic elements describe meaning, not appearance — <nav>, <article>, <header>, <button>. They give assistive tech structure, improve SEO, and make code self-documenting. Divs with classes communicate nothing.
Detailed explanation
Semantics create the machine-readable contract of a page. Screen readers navigate by landmarks (<header>, <nav aria-label>, <main>, <footer>), letting users skip sections instead of tab through everything; search engines weight content inside <article>, <h1>-<h6> hierarchy; browsers gain built-in behaviors (native <button> gets focus, keyboard activation, form submission). The classic test: strip all CSS — does the document still read like structured content? Common anti-patterns to call out: div-soup layouts, clickable <div>s missing keyboard support (a real accessibility failure native buttons solve free), heading levels chosen for font size instead of document outline, and lists not marked as <ul>/<ol> breaking screen-reader item counts. Forms deserve special mention: <label for> connections are both usability and compliance. Semantic HTML is the cheapest accessibility and SEO win available.
Example
<main>
<h1>Pricing plans</h1>
<article>
<h2>Pro plan</h2>
<p>Everything in Free plus…</p>
<button type="button">Choose Pro</button>
</article>
<aside aria-label="Compare plans">
<table>…</table>
</aside>
</main>Interview tip
Structure around the three beneficiaries — screen readers, SEO, maintainability — then drop the 'strip the CSS' heuristic and the clickable-div anti-pattern.
Common mistakes
- Naming only 'SEO' without accessibility specifics.
- Not knowing native button behavior differences vs divs.