Semantic Layout
HTML Structure
Validates HTML5 semantic elements, ARIA landmarks, skip navigation, and page structure for SEO and accessibility.
Key Checks
Required elements (header, main, footer, nav)
Recommended elements (article, section, aside)
Skip-navigation link
Div-soup detection
ARIA landmark roles
Layout suggestions
Audit Checks
| Check | Status | Rule |
|---|---|---|
| Missing <header> | FAIL | Required semantic element |
| Missing <main> | FAIL | Required semantic element |
| Missing <footer> | FAIL | Required semantic element |
| Missing <nav> | FAIL | Required semantic element |
| Missing <article> | WARN | Consider using for content structure |
| Skip-navigation link missing | WARN | Add for accessibility |
| Divs > 5× semantic elements | WARN | High div-to-semantic ratio |
Industry Thresholds
Required elements
header, main, footer, nav
Recommended elements
article, section, aside, figure
Div-soup ratio
Divs ≤ 5× semantic elements
Related Skills
Edge Cases
- Next.js/React root <div> does not count as div-soup
- Audit the initial SSR output when possible
- Components in <template> or <slot> aren't visible in static HTML
Try These Prompts
Copy any prompt below and paste it into your AI coding agent to run Semantic Layout checks:
“Does this page have all required semantic elements — header, main, footer, and nav?”
“Check the div-to-semantic element ratio — is it div-soup?”
“Is there a skip-navigation link for accessibility?”
“Are my headings placed inside semantic containers like section or article?”
“Which ARIA landmark roles (banner, navigation, main, contentinfo) are present?”