Structural semantics describe regions so humans and assistive tech understand the page before CSS rearranges visuals.
<body>
<header>Brand / utilities</header>
<nav aria-label="Primary">Main menu</nav>
<main>
<article>
<h1>Article headline</h1>
<p>…</p>
</article>
<aside>Supporting widgets</aside>
</main>
<footer>Legal / contact</footer>
</body>Landmarks
header/footercan repeat per sectioning roots.mainshould appear once per document (exceptions exist but require care).navwraps major navigation—not every link list.
Articles vs sections
article: self-contained compositions (blog posts, cards).section: thematic grouping inside broader docs—still wants headings.
Skip links
Provide “Skip to content” anchors at the top for keyboard users jumping past repetitive navigation.
Landmark discipline
- Multiple
mainelements (even if spec edge cases permit) confuse assistive landmarks—prefer one coherentmain. - Advertising iframes often inject extra focusable starters—coordinate skip links accordingly.
SPA vs SSR layout
Hydrating apps should preserve heading order shell-to-route; avoid rendering empty shells with heading promises that load later asynchronously without live regions announcing readiness.
Wireframe vs real landmarks
The grid below uses labelled divs for a quick layout sketch. Replace each region with real <header>, <nav>, <main>, <aside>, <footer> when you ship.
header — brand, util links
nav — primary menu
main — article / task flow
aside — related
footer — legal, contact
Example — minimal semantic shell (copy-paste starter)
<body>
<header><p>Logo</p></header>
<nav aria-label="Primary"><ul><li><a href="/">Home</a></li></ul></nav>
<main id="content"><h1>Page title</h1></main>
<footer><p>© Org</p></footer>
</body>Important interview questions and answers
- Q: What is the practical difference between `id` and `class`?
A: `id` must be unique and is used for fragments/labeling; `class` is reusable for styling and behavior grouping. - Q: Why is `defer` commonly preferred for scripts?
A: It preserves HTML parsing, executes after parse, and avoids blocking rendering unlike classic synchronous scripts. - Q: How do `srcset` and `sizes` work together?
A: `srcset` provides candidate files and `sizes` tells expected rendered width so the browser can pick an optimal resource.
Tip: Structure with HTML first; reach for CSS Grid/Flexbox for visual layout.