# HTML

> HTML markup language for structuring web pages

- Skill: `ffsshhttiikk/html` (Agent Skill)
- Install (CLI): `npx skillmds@latest add ffsshhttiikk/html`
- Raw SKILL.md: https://api.skillmd.com/api/skills/ffsshhttiikk/html/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- License: MIT
- Author: ffsshhttiikk (https://skillmd.com/u/ffsshhttiikk)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/ffsshhttiikk/html

---

## What I do
- Create semantic HTML documents
- Use proper document structure
- Build accessible forms
- Implement responsive images
- Use semantic elements (header, nav, main, article, section, footer)
- Add metadata and SEO tags
- Handle multimedia elements

## When to use me
When creating or structuring web pages.

## Document Structure
```html
<!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>
  <meta name="description" content="Description">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <nav>
      <a href="/">Home</a>
      <a href="/about">About</a>
    </nav>
  </header>
  
  <main>
    <article>
      <h1>Title</h1>
      <p>Content</p>
    </article>
    
    <aside>
      <h2>Related</h2>
    </aside>
  </main>
  
  <footer>&copy; 2024</footer>
</body>
</html>
```

## Semantic Elements
```html
<header>Site header</header>
<nav>Navigation</nav>
<main>Main content</main>
<article>Self-contained content</article>
<section>Thematic grouping</section>
<aside>Sidebar content</aside>
<footer>Footer content</footer>

<figure>
  <img src="image.jpg" alt="Description">
  <figcaption>Caption</figcaption>
</figure>
```

## Forms
```html
<form action="/submit" method="POST">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" minlength="8">
  
  <select name="country">
    <option value="">Select</option>
    <option value="us">USA</option>
  </select>
  
  <button type="submit">Submit</button>
</form>
```

## Accessibility
```html
<!-- ARIA -->
<button aria-label="Close menu" aria-expanded="false">
  <span class="visually-hidden">Close</span>
</button>

<!-- Focus management -->
<a href="#main" class="visually-hidden">Skip to content</a>

<!-- Alt text -->
<img src="chart.png" alt="Sales chart showing 50% growth">
```

