HTML Layout
html layout semantic layout elements define document regions for users, assistive technology html layout uses semantic landmarks — header, nav,
Introduction
HTML layout uses semantic landmarks — header, nav, main, aside, footer, section, article — instead of div soup. BBC News and GOV.UK templates map regions to landmarks for screen reader navigation; Google extracts main content from article/main. Staff engineers pair semantics with CSS grid — markup expresses structure, not appearance.
Business problem
Div-only layouts lack landmark navigation — support tickets from blind users unable to jump to main content. Multiple main elements from micro-frontends break accessibility tree; SEO extractors misidentify boilerplate as body.
- A11y lawsuits: Missing main landmark and skip link — common ADA finding.
- SEO: Article content buried in nested divs — main content algorithms confused.
- Maintenance: Anonymous div wrappers — engineers can't grep for page regions.
Why this feature exists
HTML5 introduced semantic sectioning to replace meaningless div id="header" patterns with interoperable roles. Browsers expose implicit ARIA landmarks on nav, main, header, footer — reducing redundant role attributes.
- History: XHTML era used div+id; HTML5 added elements with defined roles.
- Rejected: table-based layout — accessibility and responsive failure.
- Today: CSS grid/flex on semantic skeleton — layout in CSS, structure in HTML.
Browser internals
Sectioning content elements create outline and accessibility landmarks. main should be unique per document (except iframe). nav inside header common; multiple nav allowed if labeled. Parser allows flow content models per element.
- Implicit roles: header in article vs page header — role banner vs generic.
- main: IE11 needed role=main polyfill — modern browsers implicit.
- section: Requires heading for best practice — otherwise use div.
<body>header[banner] → site chromenav[navigation] → link listmain[main] → primary content (one per page)aside[complementary] → sidebarfooter[contentinfo] → site footer
Rendering workflow
Semantic tags are display:block by default in user-agent stylesheet — same as div unless CSS changes. Layout performance comes from CSS, not tag name. Nested section without containment doesn't isolate layout.
- CLS: Header height changes when nav wraps — reserve min-height in CSS.
- Sticky header: header position:sticky — paint layer promotion.
- Print: nav/footer hidden via @media print — structure still in DOM.
Feature deep dive
Page skeleton pattern: one header (logo + nav), one main (h1 + content), optional aside, footer. Article for syndicatable content; section with heading for thematic grouping. Don't use section as generic wrapper without heading.
- Skip link: First focusable link to #main — keyboard essential.
- Micro-frontends: Shell owns header/footer/main wrapper; MFEs inject into main only.
- Ads: aside or dedicated regions — not inside main if supplementary.
<body><a href="#main" class="skip-link">Skip to main content</a><header><nav aria-label="Primary">…</nav></header><main id="main"><h1>Shopify Partners dashboard</h1><article>…</article></main><aside aria-label="Help links">…</aside><footer>© Shopify</footer></body>
Accessibility analysis
Landmark rotor in NVDA/VoiceOver lists banner, navigation, main, complementary, contentinfo — users jump directly. Multiple unlabeled nav elements confuse — use aria-label. main must not be nested inside article incorrectly.
- WCAG 2.4.1: Bypass blocks — skip link or landmarks.
- Focus: SPA route change — focus main or h1 on navigation.
- Order: DOM order matches visual — CSS grid reorder breaks landmark flow.
SEO impact
Google main content extraction heuristics favor article/main text over nav/footer boilerplate. Amazon product details in main; reviews may be article sections. Footer links still crawl — internal linking architecture.
- Thin main: Empty main with content only in divs — quality signal risk.
- Article schema: Pair article element with JSON-LD NewsArticle on BBC pages.
- Duplicate nav: Same links in header and footer — normal; not duplicate content issue.
Security considerations
Layout slots in CMS — attacker injects aside with phishing form mimicking main. Visual CSS can make aside look like main — structural semantics help AT but sighted users need visual distinction and CSP.
- Clickjacking: Layout overlays — frame-ancestors CSP.
- UGC: User article in main — sanitize; don't allow header injection.
- Tabnabbing: Footer external links — rel=noopener.
Performance impact
Layout HTML weight minimal vs div equivalent. Perf wins from reducing DOM depth — semantic flattening where possible. Airbnb lazy-loads below-fold aside widgets, not main content.
- LCP: Hero inside main — ensure main in first HTML chunk SSR.
- INP: Sticky header intercepts clicks — pointer-events tuning in CSS.
- DOM: Deeply nested section/div — style recalc cost on updates.
Real production example
GOV.UK frontend template — documented landmark structure, skip link, single main, labelled nav regions. Copied by BBC for public service pages with strict a11y gates.
- Design system: PageLayout component enforces main id and skip link.
- Tests: axe landmark-one-main rule in CI.
- MFE: Contract test — shell HTML snapshot includes exactly one main.
<main id="main-content" role="main" tabindex="-1"><!-- MFE mount point --></main>
Enterprise usage
Enterprise design systems document PageShell with slots: header, nav, main, footer. CMS page types map to layout templates — blog uses article, marketing uses section blocks inside main.
- Lint: eslint-plugin-jsx-a11y landmark rules on React layouts.
- Training: Authors can't pick "div layout" — template constrained.
- Audit: Quarterly manual screen reader landmark walkthrough.
Common production failures
Micro-frontend integration shipped two main elements — axe critical in prod for six weeks until shell merged regions. Blind users reported "can't find content" in user research.
- SEO: Product description outside main in div — snippet quality dropped post redesign.
- Skip link: href="#main" but id on div — keyboard bypass broken.
- SPA: Footer duplicated on client nav — duplicate contentinfo landmarks.
Architecture review questions
- Is there exactly one main landmark per document view?
- Does skip link target exist and receive focus on activation?
- Are nav regions labelled when multiple exist?
- Does each section have an associated heading where appropriate?
- Is primary content inside main, not aside or footer?
- Do micro-frontend boundaries preserve landmark integrity?
Hands-on project
Rebuild a div-soup page with semantic layout landmarks, skip link, labelled nav, axe landmark audit pass, and document region map for content team.
- Deliverable: Landmark diagram + HTML refactor PR.
- Verify: NVDA landmark list matches intended regions.
- Stretch: MFE integration guide for main slot ownership.
Interview questions
When to use section vs div vs article?(Advanced)
article: self-contained syndicatable content (blog post, product card in feed). section: thematic grouping with heading. div: no semantic meaning when neither applies. Staff avoid section without h2+ — use div. Multiple articles on listing page OK.
Follow-up: section inside article?
How do landmarks interact with micro-frontend architecture?(Advanced)
Shell owns single main, header, footer landmarks. MFEs mount inside main without wrapping another main. Nav in shell only. Integration tests snapshot landmark count. Focus management on route: focus main or h1.
Follow-up: What about MFE with own sidebar?
SEO impact of wrapping all content in divs vs semantic main/article?(Advanced)
Heuristics and ML extract main text from semantic hints plus DOM density and link patterns. Semantic main/article improves signal clarity; not a direct ranking factor but reduces misclassification of nav as body. Google still parses div-heavy sites — staff use semantics for reliability.
Follow-up: Does role=main on div equal main element?
Try it yourself
Edit the HTML, CSS, or JS panels — the preview updates as you type.
Try it yourself
Summary
Semantic layout elements define document regions for users, assistive technology, and content extraction. Production templates at BBC and GOV.UK treat landmark structure as non-negotiable shell infrastructure — CSS handles visuals, HTML handles meaning.