# HTML
> Semantic HTML with proper elements and structure. Trigger: When writing HTML markup, creating structure, or implementing semantic elements.
- Skill: `joabgonzalez/html` (Agent Skill)
- Install (CLI): `npx skillmds@latest add joabgonzalez/html`
- Raw SKILL.md: https://api.skillmd.com/api/skills/joabgonzalez/html/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- License: Apache 2.0
- Author: joabgonzalez (https://skillmd.com/u/joabgonzalez)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/joabgonzalez/html
---
# 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
```html
```
### ✅ REQUIRED: Button vs Anchor
```html
Go to PageClick
```
### ✅ REQUIRED: Essential Meta Tags
```html
Page Title - Site Name
```
---
## 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
```html
Page Title
Article Title
Content
```
---
## Edge Cases
- **Multiple h1:** Allowed, but one per page better for screen readers
- **Empty links:** Use `