Guide · Agent skill
How to use the HTML5 Semantic Elements Review agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The html5-semantic-elements skill is a review guide for AI coding agents that checks whether a page's markup uses HTML5 elements such as header, main, nav, article, section, aside and footer where generic div tags are used instead. It is aimed at front-end developers, teams reviewing server-rendered output, and beginners learning which element fits which part of a page. After this guide you will know what the skill does, how to install it, how to ask for a review in plain language, and where its limits are.
HTML5 Semantic Elements Reviewthedaviddias/Front-End-Checklist · MIT Download the skill Quick start
- 1Download the ZIP. Get the html5-semantic-elements ZIP from the skill's page on this directory.
- 2Unzip the folder. Extract it so the folder contains SKILL.md and references/rule.md.
- 3Choose a location. Place it in ~/.claude/skills/ for personal use or in your project's .claude/skills/ folder for one codebase.
- 4Or upload it in the apps. In the Claude apps, go to Settings → Capabilities → Skills and upload the ZIP.
- 5Ask for a review. Describe the template, rendered HTML or component and ask for semantic HTML issues in plain words.
- 6Check the findings. Read each flagged element and suggested replacement, then apply the changes you agree with in context.
What does the skill make the agent do?
Once installed, the agent reviews web page templates, rendered HTML and shared components. It flags places where generic div tags should be replaced with meaningful HTML5 elements and suggests replacements. The reason given is that screen reader users can jump directly to main content or navigation, and search engines use semantics to understand content hierarchy.
The skill is a checklist-style review guide. It does not change your files on its own; you read the findings and decide what to edit.
- Flags generic div elements that could be header, main, nav, article, section, aside or footer
- Explains why the change matters for screen reader users, search engines and maintainability
- Checks that only one main element appears per page, while multiple header and footer elements are allowed
How do you install the html5-semantic-elements skill?
Download the ZIP file from the skill's page on this directory and unzip it. The skill folder contains SKILL.md and references/rule.md. Place the folder in one of these locations:
- Personal skills: ~/.claude/skills/ so the skill is available across your projects
- Project skills: a .claude/skills/ folder inside your project, so it applies only to that codebase
- Claude apps: upload the ZIP under Settings → Capabilities → Skills
How do you trigger the skill with a natural request?
You do not need a special command. Ask for a review of templates, rendered HTML or components in ordinary words that mention semantic structure. The skill's description matches requests about reviewing templates, rendered HTML or shared components for semantic HTML use.
Point the agent at the markup you want checked, and say whether you want the rendered output or the source. The skill asks for validation of the final browser-facing markup, so rendered HTML gives better results than framework source alone.
- "Review this page template for semantic HTML and tell me which divs should be header, nav, main or footer."
- "Check the rendered HTML from this server-side page for correct page structure."
- "Look at this shared card component and suggest article or section elements where they fit."
What does a good review look like?
The skill's reference material shows a complete page built from header, nav, main, article, section and footer. A review should point to exact elements and locations in the markup that break the rule, then suggest a replacement for each.
The reference notes that main should appear only once per page, and that article suits self-contained content while section suits grouped content. Expect a list of findings with the reason for each, not a rewritten site.
- Each finding names the element or route where the problem appears
- Each suggestion explains which semantic element fits and why
What does the skill need and what are the safety notes?
The skill lists no requirements. It does not run scripts and it does not use the network. Because it only reads the markup you provide and returns review notes, it is low risk to run on your project.
Keep in mind that a review is only as good as the markup it sees. Reviewing source files alone can give misleading results when a framework generates the final HTML.
- Requires: nothing listed
- Runs scripts: no
- Uses network: no
- Licence: MIT
What tips help you get the most from it?
Give the agent the rendered HTML from the browser or server output whenever you can. Review shared components along with the pages that use them, so one fix applies everywhere. Treat the findings as a starting point and check each suggested change in context.
Remember the skill's scope. It covers semantic element usage only. It does not check colour contrast, ARIA attributes or keyboard behaviour, so run a full accessibility audit separately if you need one.
- Paste or point to rendered HTML, not only framework templates
- Review shared components alongside the pages that include them
- Use it for structure; use other tools for contrast, ARIA and keyboard checks
What people use it for
- Reviewing a site header, navigation and footer template for correct nav and footer usage
- Checking server-rendered page output for a single main element and proper article or section nesting
- Auditing a shared card or list component to see whether div wrappers should be article or section
- Teaching a junior developer which HTML5 element fits which part of a page
Frequently asked questions
Is the html5-semantic-elements skill free?
The skill is released under the MIT licence, as stated on its page. Check the licence file in the source repository for the full terms before you reuse it.
What do I need to install it?
The skill lists no requirements. Download the ZIP, unzip it, and place the folder in ~/.claude/skills/ or a project's .claude/skills/ folder, or upload it under Settings → Capabilities → Skills in the Claude apps.
Does the skill change my HTML files automatically?
No. It is a checklist-style review guide that flags issues and suggests replacements. You decide which changes to make.
Should I review source files or rendered HTML?
Rendered HTML is better. The skill asks for validation of the final browser-facing markup, because reviewing only framework source can give misleading results.
Does this skill cover a full accessibility audit?
No. It covers only semantic element usage. It does not check colour contrast, ARIA or keyboard behaviour, so you need other tools for those.
How does it compare with other semantic HTML tools?
This skill focuses on choosing the right HTML5 elements for page structure and suggesting replacements for div tags. It runs no scripts and uses no network. Tools that test colour contrast, ARIA or keyboard behaviour cover different ground.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use this skill if you are a front-end developer, a team reviewing server-rendered page structure, or a beginner learning which HTML5 element fits which part of a page. Pick something else if you need a full accessibility audit, or if you only have framework source files and cannot see the rendered output.
Download the skill