Skip to content
Get packs

HTML5 Semantic Elements Review

Checks HTML markup for proper semantic elements like header, main, nav and article instead of generic divs.

Source Download skill
Repository
thedaviddias/Front-End-Checklist
Stars
74,632
Licence
MIT
Files
2 files

What it does

Once installed, the agent reviews web page templates, rendered HTML, and shared components and flags places where generic div tags should be replaced with meaningful HTML5 elements such as header, main, nav, article, section, aside, and footer. It explains why this matters for screen reader users and search engines, and suggests replacements. It is a checklist-style review guide rather than a tool that changes files on its own.

Great for

  • Front-end developers reviewing page templates or components for accessibility
  • Teams auditing server-rendered HTML output for correct page structure
  • Beginners learning which HTML5 elements fit which parts of a page

Skip it if

  • Projects that rely on framework abstractions without checking the final browser output, since the rule asks for validation of rendered markup; the skill may give misleading results if only source files are reviewed
  • Anyone expecting a full accessibility audit, because the skill covers only semantic element usage, not colour contrast, ARIA, or keyboard behaviour

Try asking

  • “Review this React component and tell me where I should use semantic HTML instead of divs”
  • “Check the rendered HTML of my blog template for correct main, nav and footer usage”
  • “Explain to my team why we should use article and section in our product cards”
Step-by-step guide: how to use HTML5 Semantic Elements ReviewInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 2 original files, the MIT licence and an attribution note.

    html5-semantic-elements.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip html5-semantic-elements.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip html5-semantic-elements.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Paste or point the agent at the rendered HTML output, not only the source template, so it can check what browsers actually receive.
  • Ask for exact element and line references so you can apply the suggested fixes quickly.
  • Combine with a broader accessibility review, since this skill covers only semantic structure.

What's inside

  • references/rule.md
  • SKILL.md

Redistributed unmodified from thedaviddias/Front-End-Checklist under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.