Write semantic, accessible HTML5 markup following best practices for structure, SEO, and accessibility. Use when creating HTML templates, fixing markup issues, or building web page structures.
HTML Markup Skill
Instructions
When writing HTML:
1. Document Structure
<!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">
<title>Page Title | Brand</title>
<!-- Preconnect to external domains -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<!-- Critical CSS inline -->
<style>/* Critical styles */</style>
<!-- External stylesheets -->
<link rel="stylesheet" href="styles.css">
<!-- Favicon -->
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
</head>
<body>
<!-- Content -->
<!-- Scripts at end -->
<script src="main.js" defer></script>
</body>
</html>
2. Semantic Elements
<header>
<nav aria-label="Main navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
</header>
<main>
<article>
<header>
<h1>Article Title</h1>
<time datetime="2025-01-15">January 15, 2025</time>
</header>
<section>
<h2>Section Heading</h2>
<p>Content...</p>
</section>
<aside>
<h3>Related Content</h3>
</aside>
<footer>
<p>Article footer content</p>
</footer>
</article>
</main>
<aside aria-label="Sidebar">
<section>
<h2>Widget Title</h2>
</section>
</aside>
<footer>
<nav aria-label="Footer navigation">
<!-- Footer links -->
</nav>
<p>© 2025 Company Name</p>
</footer>
3. Headings Hierarchy
<!-- Correct hierarchy -->
<h1>Page Title (one per page)</h1>
<h2>Main Section</h2>
<h3>Subsection</h3>
<h4>Sub-subsection</h4>
<h2>Another Main Section</h2>
<h3>Subsection</h3>
<!-- Never skip levels -->
<!-- ❌ Bad: h1 → h3 -->
<!-- ✓ Good: h1 → h2 → h3 -->
4. Forms
<form action="/submit" method="POST" novalidate>
<fieldset>
<legend>Contact Information</legend>
<div class="form-group">
<label for="name">Full Name <span aria-hidden="true">*</span></label>
<input
type="text"
id="name"
name="name"
required
autocomplete="name"
aria-required="true"
>
</div>
<div class="form-group">
<label for="email">Email Address</label>
<input
type="email"
id="email"
name="email"
required
autocomplete="email"
aria-describedby="email-hint"
>
<p id="email-hint" class="hint">We'll never share your email.</p>
</div>
<div class="form-group">
<label for="message">Message</label>
<textarea
id="message"
name="message"
rows="5"
required
></textarea>
</div>
<div class="form-group">
<input type="checkbox" id="newsletter" name="newsletter">
<label for="newsletter">Subscribe to newsletter</label>
</div>
</fieldset>
<button type="submit">Send Message</button>
</form>
5. Images
<!-- Standard image -->
<img
src="image.jpg"
alt="Descriptive alt text"
width="800"
height="600"
loading="lazy"
decoding="async"
>
<!-- Responsive images -->
<picture>
<source
media="(min-width: 1200px)"
srcset="large.webp"
type="image/webp"
>
<source
media="(min-width: 800px)"
srcset="medium.webp"
type="image/webp"
>
<img
src="small.jpg"
alt="Description"
width="400"
height="300"
loading="lazy"
>
</picture>
<!-- Figure with caption -->
<figure>
<img src="chart.png" alt="Sales growth chart showing 50% increase">
<figcaption>Fig 1: Sales growth Q1-Q4 2024</figcaption>
</figure>
<!-- Decorative image -->
<img src="decoration.svg" alt="" role="presentation">
6. Links
<!-- Internal link -->
<a href="/about">About Us</a>
<!-- External link -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
External Site
<span class="visually-hidden">(opens in new tab)</span>
</a>
<!-- Download link -->
<a href="/file.pdf" download>Download PDF</a>
<!-- Skip link (accessibility) -->
<a href="#main-content" class="skip-link">Skip to main content</a>
<!-- Anchor link -->
<a href="#section-2">Jump to Section 2</a>
7. Lists
<!-- Unordered list -->
<ul>
<li>Item one</li>
<li>Item two</li>
</ul>
<!-- Ordered list -->
<ol>
<li>First step</li>
<li>Second step</li>
</ol>
<!-- Description list -->
<dl>
<dt>Term</dt>
<dd>Definition</dd>
<dt>Another term</dt>
<dd>Its definition</dd>
</dl>
<!-- Navigation list -->
<nav>
<ul role="list">
<li><a href="/" aria-current="page">Home</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
8. Tables
<table>
<caption>Monthly Sales Report</caption>
<thead>
<tr>
<th scope="col">Month</th>
<th scope="col">Sales</th>
<th scope="col">Growth</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">January</th>
<td>$10,000</td>
<td>+5%</td>
</tr>
<tr>
<th scope="row">February</th>
<td>$12,000</td>
<td>+20%</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row">Total</th>
<td>$22,000</td>
<td>—</td>
</tr>
</tfoot>
</table>
9. Interactive Elements
<!-- Button -->
<button type="button" onclick="handleClick()">
Click Me
</button>
<!-- Details/Summary (accordion) -->
<details>
<summary>Click to expand</summary>
<p>Hidden content revealed on click.</p>
</details>
<!-- Dialog/Modal -->
<dialog id="modal">
<h2>Modal Title</h2>
<p>Modal content</p>
<button onclick="document.getElementById('modal').close()">
Close
</button>
</dialog>
10. Accessibility Checklist
- [ ] All images have alt text
- [ ] Proper heading hierarchy
- [ ] Form inputs have labels
- [ ] Links are descriptive
- [ ] Color isn't only indicator
- [ ] Focus states visible
- [ ] Skip link present
- [ ] ARIA used correctly
- [ ] Keyboard navigable
- [ ] Language declared
You Might Also Like
Related Skills
cache-components
Expert guidance for Next.js Cache Components and Partial Prerendering (PPR). **PROACTIVE ACTIVATION**: Use this skill automatically when working in Next.js projects that have `cacheComponents: true` in their next.config.ts/next.config.js. When this config is detected, proactively apply Cache Components patterns and best practices to all React Server Component implementations. **DETECTION**: At the start of a session in a Next.js project, check for `cacheComponents: true` in next.config. If enabled, this skill's patterns should guide all component authoring, data fetching, and caching decisions. **USE CASES**: Implementing 'use cache' directive, configuring cache lifetimes with cacheLife(), tagging cached data with cacheTag(), invalidating caches with updateTag()/revalidateTag(), optimizing static vs dynamic content boundaries, debugging cache issues, and reviewing Cache Component implementations.
vercel
component-refactoring
Refactor high-complexity React components in Dify frontend. Use when `pnpm analyze-component --json` shows complexity > 50 or lineCount > 300, when the user asks for code splitting, hook extraction, or complexity reduction, or when `pnpm analyze-component` warns to refactor before testing; avoid for simple/well-structured components, third-party wrappers, or when the user explicitly wants testing without refactoring.
langgenius
web-artifacts-builder
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
anthropicsfrontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
anthropics
react-modernization
Upgrade React applications to latest versions, migrate from class components to hooks, and adopt concurrent features. Use when modernizing React codebases, migrating to React Hooks, or upgrading to latest React versions.
wshobsontailwind-design-system
Build scalable design systems with Tailwind CSS v4, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI patterns.
wshobson