Use semantic HTML elements
SkillWeb & browsinghtml5-semantic-elements is a skill that guides an AI agent to check web markup for proper semantic HTML5 elements. When reviewing templates, rendered HTML, or shared components, it flags places where generic divs should be replaced with elements like header, main, article, and nav, and explains why the change improves accessibility and SEO.
Available today. Use it from your connected AI after setup.
No other account needed.
Have an agent setup that supports loading skills.
Then ask your AI: use the Use semantic HTML elements skill
What your AI can do with it
- Review templates, rendered HTML, and shared components for semantic element usage
- Flag exact elements, attributes, and routes where rendered HTML violates the rule
- Suggest replacements for generic divs using header, main, article, section, aside, and foo
- Explain how semantic elements improve accessibility, SEO, and code maintainability
- Validate the final browser-facing markup, not just the source framework abstraction
Getting started
- Have an agent setup that supports loading skills.
- Add the html5-semantic-elements skill to the agent's available skills.
- Ask the agent to review a template, rendered HTML file, or shared component for semantic element usage.
- Optionally consult references/rule.md for implementation details and code examples.
What this skill tells your AI
The instructions your AI receives, as published by thedaviddias/front-end-checklist in skills/html5-semantic-elements/SKILL.md and read by ahel’s review.
Screen readers use semantic elements to navigate pages—users can jump directly to <main> content or <nav>. Search engines also use semantics to understand content hierarchy.
Quick Reference
- Use , , for page structure
- Use for self-contained content, for grouped content
- Use for navigation, for related/sidebar content
- Only one per page, but multiple / allowed
Check
Review this HTML structure to ensure it uses appropriate semantic elements like header, main, section, article, aside, and footer instead of generic div elements.
Fix
Replace generic div elements with semantic HTML5 elements that accurately describe the content structure and purpose.
Explain
Explain how semantic HTML elements improve accessibility, SEO, and code maintainability by providing meaningful structure to web content.
Code Review
Review templates, server-rendered HTML, and shared components that output markup related to Use semantic HTML elements. Flag exact elements, attributes, and routes where the rendered HTML violates the rule.
For full implementation details, code examples, and framework-specific guidance,
see references/rule.md.
Rule page: https://frontendchecklist.io/en/rules/html/html5-semantic-elements
Signals
- GitHub stars
- 74k
- Forks
- 7k
- Last commit
- Aug 2026
Questions
- What does the skill check for?
- It checks that HTML uses appropriate semantic elements like header, main, section, article, aside, and footer instead of generic div elements, and flags where the rendered markup violates the rule.
- Does it review source code or rendered output?
- It validates the final browser-facing markup, not just the source framework abstraction, and can review templates, server-rendered HTML, and shared components.
- How many main elements can a page have?
- Only one <main> per page, though multiple <header> and <footer> elements are allowed.
Advanced
- Item type
- skill
- Key
html5-semantic-elements- Source
- github.com/thedaviddias/front-end-checklist