An element is defined by its tag name and participates in the DOM with a specific content model: which children are allowed and what roles it exposes to accessibility APIs.
Semantics vs presentation
- Semantic elements (
article,nav,button) convey meaning even if CSS is disabled. - Generic elements (
div,span) carry no default role—they are hooks for layout or scripting when nothing more specific fits.
Categories you will use constantly
- Sectioning / landmarks:
header,footer,main,nav,aside,section,article. - Flow content: paragraphs, lists, figures, form controls—most body markup.
- Phrasing content: inline emphasis, links, code spans inside paragraphs.
- Embedded content:
img,video,iframe,canvas, SVG. - Interactive:
a,button,input,select,textarea,details.
Transparent content models
Some elements (like a in certain contexts, ins/del) allow rich children where permitted—always verify against spec summaries when composing unusual patterns.
Why semantics matter
- Screen readers expose headings, landmarks, and native controls predictably.
- Search engines infer structure from headings and lists.
- Teams refactor faster when markup reflects intent.
What developers skim past (but shouldn’t)
- Implicit roles: native elements expose roles automatically; replacing them with styled
divs forces you to re-implement keyboard, focus, announcements, and state. - Content categories: “flow vs phrasing” still governs nesting—validators catch mistakes IDEs sometimes miss.
- The right element often removes ARIA: if
<button>fits, prefer it over<div role="button" tabindex="0">; fewer moving parts equals fewer regressions.
Shipping checklist
- For each interaction: keyboard path, visible focus, and name exposed to accessibility APIs?
- For each region: landmarks (
main,nav, headings) coherent if CSS or JS disappears?
Rendered micro-layout (landmarks)
Uses real nav + main—only for teaching; your app should have one primary main per page.
Main unique content lives here.
section, article, and headings organize what goes inside.
Important interview questions and answers
- Q: What is the purpose of ``?
A: It forces standards mode so browsers use modern layout/parsing behavior instead of legacy quirks mode. - Q: Why is semantic HTML important in interviews and production?
A: It improves accessibility, SEO, maintainability, and reduces ARIA/JS work by using native element behavior. - Q: What is the difference between `head` and `body`?
A: `head` stores metadata/resources for the document, while `body` contains user-visible content.
Pitfall: Void elements (img, input) never use closing tags in HTML5.