skills.rest
schalkneethling
schalkneethlingCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

semantic-html

Reviews HTML markup and converts it to accessible, semantically correct code.

7|Updated Dec 26, 2025
Search Tags:#accessibility#semantic HTML#web standards#landmarks#markup review#heading hierarchy
One-click install
npx skills add https://github.com/schalkneethling/webdev-agent-skills --skill semantic-html
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: semantic-html
Source: https://github.com/schalkneethling/webdev-agent-skills/tree/main/semantic-html
Command: npx skills add https://github.com/schalkneethling/webdev-agent-skills --skill semantic-html

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Markup often lacks proper semantics and accessible structure, causing reduced accessibility and maintenance challenges. This skill promotes native HTML semantics to improve accessibility, readability, and long-term resilience of web content.

Core Features & Use Cases

  • Landmark-first planning to outline page structure and improve navigation for assistive technologies.
  • Emphasis on native HTML elements over ARIA where appropriate, with guidance for headings, forms, tables, and sections.
  • Practical guidance for reviewing components, pages, and markup in real projects to ensure semantic correctness.

Quick Start

  • Review the provided HTML snippet and convert it to semantic markup with proper landmarks, heading hierarchy, and accessible labeling.

Frequently Asked Questions about semantic-html

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create accessible semantic HTML for web page structure?▼

Semantic HTML uses native elements like header, nav, and main to convey document structure. It prioritizes native semantics over ARIA, ensuring proper landmarks, heading hierarchy, and accessible labeling for assistive technologies.

How do I review existing HTML markup for semantic correctness?▼

Review HTML markup by checking for proper landmark regions, validating heading hierarchy, confirming native element usage over ARIA, and ensuring responsive semantics and accessible labeling are applied correctly.

When should I use native HTML elements instead of ARIA?▼

Use native HTML elements instead of ARIA whenever possible to ensure built-in accessibility. ARIA should only supplement native semantics when HTML elements cannot convey the required semantics or interaction states.

What is landmark-first planning for accessible page structure?▼

Landmark-first planning outlines page structure using semantic elements like header, main, and footer. It improves navigation for assistive technologies by defining clear regions before adding content or components.

Does semantic HTML require any external dependencies or frameworks?▼

Semantic HTML requires no external dependencies or frameworks. It relies entirely on native web standards and built-in browser semantics to improve accessibility, readability, and content resilience.

Why does my HTML markup cause accessibility issues for screen readers?▼

HTML markup causes accessibility issues when it lacks proper semantics, skips heading hierarchy, or uses generic elements like div instead of native semantic tags, reducing navigation for assistive technologies.

Related Skills

Explore More Design & Creative Skills→
mouayadakelmouayadakel

accessibility-checker

Check UI components and forms for accessibility attributes and markup suggestions.

Community
Intermediate
jykimjykim
31

obsidian-markdown-structure

Validate Markdown structure with frontmatter, heading hierarchy, and quote formatting.

Community
Advanced
pranav8494pranav8494
7

frontend-designer

Implement accessible React/TypeScript UI components with semantic HTML and WCAG 2.1 AA compliance.

Community
Advanced
HDeiblerHDeibler
6

accessibility-robust

Audit UI markup for semantic HTML and correct ARIA usage.

Community
Intermediate