| name | html |
| description | Semantic HTML with proper elements and structure. Trigger: When writing HTML markup, creating structure, or implementing semantic elements. |
| license | Apache 2.0 |
| metadata | {"version":"1.1","type":"domain","skills":["a11y"]} |
HTML
Semantic, accessible HTML with modern standards, proper structure, meta tags.
When to Use
Use when:
- Writing HTML markup for web pages
- Creating document structure with semantic elements
- Building forms with proper labels and inputs
- Adding metadata and head elements
Don't use for React JSX (react skill) or accessibility details (a11y skill).
Critical Patterns
✅ REQUIRED: Semantic Elements
<header>
<nav>
<ul>
<li><a href="/">Home</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h1>Title</h1>
<p>Content</p>
</article>
</main>
<footer>Footer content</footer>
<div class="header">
<div class="nav">...</div>
</div>
<div class="main">...</div>
✅ REQUIRED: Proper Heading Hierarchy
<h1>Page Title</h1>
<h2>Section</h2>
<h3>Subsection</h3>
<h1>Page Title</h1>
<h4>Section</h4>
✅ REQUIRED: Button vs Anchor
<button type="button" onclick="doSomething()">Click</button>
<a href="/page">Go to Page</a>
<a href="#" onclick="doSomething()">Click</a>
✅ REQUIRED: Essential Meta Tags
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Page description for SEO (150-160 chars)" />
<title>Page Title - Site Name</title>
<meta property="og:title" content="Page Title" />
<meta property="og:description" content="Description" />
<meta property="og:image" content="https://example.com/image.jpg" />
<meta property="og:url" content="https://example.com/page" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Page Title" />
</head>
<body></body>
</html>
Decision Tree
Interactive element?
→ button for actions, a for navigation
Text content?
→ article for standalone content, section for grouped content, aside for related info
Form field?
→ Wrap in label, associate via for/id, use appropriate type
List of items?
→ ul unordered, ol ordered, dl definitions
Heading?
→ h1-h6 sequential; one h1 per page
Image?
→ img with descriptive alt; empty alt="" for decorative
Tabular data?
→ table with thead, tbody, th scope
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Page Title</title>
</head>
<body>
<header>
<nav aria-label="Main navigation">
<ul>
<li><a href="/">Home</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h1>Article Title</h1>
<p>Content</p>
</article>
</main>
</body>
</html>
Edge Cases
- Multiple h1: Allowed, but one per page better for screen readers
- Empty links: Use
<button> for actions, not <a href="#">
- Div soup: Prefer semantic elements over
<div>
- Form without action: Needs
action or JS handler
- Button type: Default
submit; specify type="button" for non-submit
Checklist
Resources
