Expert skill for professional HTML development with focus on semantic markup, accessibility, HTML5 features, and standards-compliant web content.
For a new runnable webpage when workspace file-authoring tools are available:
webpage-<topic-slug>/; never place a generated site directly in the
workspace root.index.html, local CSS/JavaScript, and every local asset inside that
project root, using browser-relative references.open_workspace_preview with the
entry file and the complete dedicated root:{
"path": "webpage-<topic-slug>/index.html",
"bundle": "directory",
"bundle_root": "webpage-<topic-slug>"
}
Do not bundle the entire workspace. When a caller explicitly requests
source-only output, forbids tool calls, or supplies its own deterministic
writer, follow that narrower caller contract
instead. When file authoring or open_workspace_preview is unavailable, return
only the requested guidance or source and do not claim that a runnable project
was opened.
Core documentation for HTML experts:
references/add-css-style.md - Add CSS via link tag, inline, or embedded in htmlreferences/add-javascript.md - Add JavaScript via script src="link.js" tag, inline script, or embedded in htmlreferences/attributes.md - HTML attribute essentialsreferences/essentials.md - Semantic markup, validation, responsive techniquesreferences/global-attributes.md - Complete global attribute informationreferences/glossary.md - Complete HTML element and attribute referencereferences/standards.md - HTML5 specifications and standardsSemantic HTML - Use elements that convey meaning: <article>, <nav>, <header>, <section>, <footer>, not div soup.
Accessibility First - Proper heading hierarchy, alt text, labels with inputs, keyboard navigation, ARIA when needed.
HTML5 Validation - Leverage built-in validation (required, pattern, type="email") before JavaScript.
Responsive Images - Use <picture>, srcset, and loading="lazy" for performance.
Performance - Minimize DOM depth, optimize images, defer non-critical scripts, use semantic elements.
<!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><!-- Navigation --></nav></header>
<main><article><!-- Content --></article></main>
<aside><!-- Sidebar --></aside>
<footer><!-- Footer --></footer>
</body>
</html>
<form method="post" action="/submit">
<fieldset>
<legend>Contact</legend>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required
pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
<button type="submit">Send</button>
</fieldset>
</form>
<picture>
<source media="(min-width: 1200px)" srcset="large.webp">
<source media="(min-width: 768px)" srcset="medium.webp">
<img src="small.jpg" alt="Description" loading="lazy">
</picture>