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

Ready to run

npx skills add https://github.com/joabgonzalez/ai-agents-skills --skill html-joabgonzalez

💬 Prompt for ChatGPT / Claude Chat▼

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.