HTML · The document layer
What is semantic HTML and why does it matter?
Short answer
Semantic HTML uses elements that describe the meaning of content, such as nav, main, article and button, instead of generic containers. That helps screen readers, search engines and future maintainers understand the page.
Semantics are the difference between a div that happens to look like a button and a real button element. The real element carries behaviour, keyboard support and an accessible role for free.
<!-- Generic and meaningless -->
<div class="nav">
<div class="link" onclick="goHome()">Home</div>
</div>
<!-- Semantic and accessible -->
<nav aria-label="Primary">
<a href="/">Home</a>
</nav>Why it helps
- Screen readers announce roles, states and landmark regions from the markup
- Keyboard behaviour such as Enter, Space and focus comes built in
- Search engines get a clearer outline of the content
- CSS and JavaScript hooks are more meaningful and less brittle
- The markup is easier to read and maintain
Semantic HTML does not mean avoiding div entirely. It means reaching for div only when no element describes the content. A div is a last resort, not the default.
Follow-ups you should expect
Interviewers use these to check whether the first answer was understanding or memorisation.
- 1When is it acceptable to use a div?
- 2Does semantic HTML improve SEO?
- 3Why is a real button better than a clickable div?
- 4Can ARIA fully replace semantic elements?
Say it in the interview
Semantic HTML means choosing elements that describe what the content is, like nav, main, article, button and label. That gives screen readers useful roles and gives browsers built-in keyboard behaviour. It also helps search engines and makes the code easier to maintain. I still use div when nothing semantic fits, but I treat it as a fallback rather than a default.
Use this as a model, not a script. Saying it in your own words is what makes it survive follow-up pressure.
Related questions
Reading is step one
Now say it out loud.
Understanding an answer and delivering it under pressure are different skills. Rehearse this topic in a live HTML mock interview and get scored feedback on depth, clarity and confidence.