skills.rest
joabgonzalez
joabgonzalezCOMMUNITY
Explore all skills by this author →
GitHub

html

Write semantic, accessible HTML markup with proper heading hierarchy and ARIA-compliant semantics.

7|Updated Jan 29, 2026
Search Tags:#html#accessibility#forms#web-development#semantic#headings#aria
One-click install
npx skills add https://github.com/joabgonzalez/ai-agents-skills --skill html-joabgonzalez
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: html
Source: https://github.com/joabgonzalez/ai-agents-skills/tree/main/skills/html
Command: npx skills add https://github.com/joabgonzalez/ai-agents-skills --skill html-joabgonzalez

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Writing clean, accessible HTML that correctly conveys structure and semantics for web pages.

Core Features & Use Cases

  • Semantic elements: header, nav, main, article, section, aside, footer
  • Proper heading hierarchy, form labeling, and meta tags
  • Use cases include accessible landing pages, forms, and content-rich documents

Quick Start

Create a semantic, accessible HTML page structure for a simple website.

Frequently Asked Questions about html

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

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

Semantic HTML uses structural elements like header, nav, main, article, section, aside, and footer to convey document hierarchy. This ensures proper navigation and content separation for accessible web development.

What is the best way to make accessible HTML forms?▼

Accessible HTML forms require proper labeling and ARIA-compliant semantics. You must associate labels with inputs and apply accessible defaults to ensure screen readers can navigate form fields correctly.

Why does heading hierarchy matter in content-rich documents?▼

Heading hierarchy establishes a logical content outline for screen readers. Correct semantic heading order allows users to navigate sections effectively, ensuring ARIA-compliant navigation in web pages.

How do I add ARIA semantics to a web page?▼

ARIA semantics enhance HTML accessibility by defining roles and states for interactive elements. They are applied alongside native semantic elements to satisfy compliance requirements for screen reader navigation.

Can I generate accessible defaults for meta tags and landing pages?▼

Yes, generating accessible defaults includes configuring meta tags for proper document structure. This ensures semantic elements and correct heading order are established for accessible landing pages.

Related Skills

Explore More Software Engineering Skills→
aztr0nutzsaztr0nutzs
2

text-processor

Clean and format raw text by stripping HTML and normalizing whitespace.

Community
Basic
deangilmoreremixdeangilmoreremix

frontend-design

Generate production-grade frontend interfaces with a unique aesthetic direction.

Community
Advanced
CrazyDubyaCrazyDubya

accessibility-auditor

Audit web applications for WCAG 2.1 Level AA accessibility compliance.

Community
Intermediate
schalkneethlingschalkneethling
7

semantic-html

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

Community
Basic