skills.rest
vidzza
vidzzaCOMMUNITY
Explore all skills by this author →
GitHub

semantic-html

Generate semantic HTML with native elements and accessible document structure.

Updated Feb 4, 2026
Search Tags:#html#accessibility#a11y#web development#frontend#semantics
One-click install
npx skills add https://github.com/vidzza/JRM_SMTR_V- --skill semantic-html-vidzza
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: semantic-html
Source: https://github.com/vidzza/JRM_SMTR_V-/tree/main/.claude/skills/semantic-html
Command: npx skills add https://github.com/vidzza/JRM_SMTR_V- --skill semantic-html-vidzza

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps developers write semantic HTML that is accessible to all users, focusing on native elements and proper document structure over ARIA.

Core Features & Use Cases

  • Accessible Document Structure: Guides the use of landmark elements (header, nav, main, etc.) and logical heading hierarchies.
  • Native Element Prioritization: Emphasizes using native HTML elements (like <button>, <input>, <label>) before resorting to ARIA attributes.
  • Form Accessibility: Provides best practices for labels, fieldsets, and error messaging.
  • Table Semantics: Ensures tables are structured correctly for accessibility.
  • Use Case: When building a new web component, use this Skill to ensure it uses the most appropriate HTML elements for its purpose and is understandable by screen readers.

Quick Start

Use the semantic-html skill to review the provided HTML snippet for accessibility and semantic correctness.

Frequently Asked Questions about semantic-html

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

FAQPage Schema
How do I write semantic HTML for accessible web pages?▼

Semantic HTML uses native elements like header, nav, and main to provide built-in accessibility, ensuring proper document structure and screen reader compatibility without extra attributes.

What's the best way to structure HTML landmarks and headings for accessibility?▼

Structure HTML accessibility using landmark elements like header and main for navigation, while maintaining a logical heading hierarchy to ensure content is understandable for screen readers.

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

Use native HTML elements instead of ARIA whenever possible, because built-in interactive elements like button and input provide inherent accessibility semantics and keyboard support without requiring extra attributes.

How do I make HTML forms accessible with proper labels and semantics?▼

Make HTML forms accessible by using native label, fieldset, and legend elements to group related controls and provide clear instructions, ensuring screen reader compatibility without relying on ARIA.

Do I need semantic table structure for frontend web accessibility?▼

Semantic table structure is needed for frontend accessibility to properly associate data cells with headers, allowing screen readers to navigate and understand complex tabular data relationships accurately.

Why does my screen reader skip content in my web component?▼

Screen readers skip content when HTML lacks proper semantics, such as missing heading hierarchy, incorrect landmark elements, or non-native interactive elements missing inherent accessibility roles.

Related Skills

Explore More Software Engineering Skills→
auldsyababuaauldsyababua
6

seo-optimizer

Analyze HTML/CSS websites for SEO issues and generate optimization reports.

Community
Advanced
mgd34msumgd34msu
6

accessibility-audit

Audit web applications for WCAG 2.1 AA accessibility compliance.

Community
Advanced
thec3ukthec3uk

Frontend Accessibility

Guide frontend code to meet accessibility standards like ARIA and keyboard navigation.

Official
Basic
adrien-barretadrien-barret
8

accessibility-audit

Audit frontend code for WCAG 2.1 AA accessibility issues.

Community
Intermediate