Use semantic HTML elements
SkillWeb & browsinghtml5-semantic-elements is a skill that guides an AI agent to review templates, rendered HTML, and shared components so they use semantic HTML5 elements such as header, main, article, and nav instead of generic divs. It validates the final browser-facing markup, not just the source framework abstraction, and flags specific elements and attributes where the markup breaks the rule.
Use Use semantic HTML elements in Claude, ChatGPT or Ahel Desktop
Free. Sign in, add Use semantic HTML elements and connect your AI. About a minute.
Also: Claude Code · Cursor · Codex
Then ask your AI: use the Use semantic HTML elements skill
Details
Instructions available. Your AI can read the instructions. Execution depends on the setup they require.
Account requirements not reviewed. Check the skill instructions before use; ahel provides instructions and does not run this skill.
No other account needed.
Have an agent that can load skills and access the HTML you want reviewed.
What your AI can do with it
- Reviews templates, rendered HTML, and shared components for semantic element use
- Checks for semantic HTML5 elements like header, nav, main, and article
- Flags generic divs where semantic elements should be used
- Validates the final browser-facing markup, not just source framework code
- Points to specific elements and attributes that break the rule
- Explains fixes for non-semantic markup
Getting started
- Have an agent that can load skills and access the HTML you want reviewed.
- Add the html5-semantic-elements skill to the agent's available skills.
- Ask the agent to review your templates, rendered HTML, or shared components for semantic HTML5 elements.
- Apply the fixes the agent explains for flagged elements and attributes.
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
- Oct 2026
Questions
- Does it check source code or rendered output?
- It validates the final browser-facing markup, not just the source framework abstraction.
- When should the skill be used?
- Use it when reviewing templates, rendered HTML, or shared components related to using semantic HTML elements.
- Which elements does it look for?
- Semantic HTML5 elements such as header, main, article, and nav, in place of generic divs.
- Does it fix the markup automatically?
- It flags the specific elements and attributes that break the rule and explains the fixes; the item does not say it applies them automatically.
Advanced
- Item type
- skill
- Key
html5-semantic-elements- Source
- github.com/thedaviddias/front-end-checklist
github.com/thedaviddias/front-end-checklist