Expert skill for professional HTML development with focus on semantic markup, accessibility, HTML5 features, and standards-compliant web content.
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: , , , , 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 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>
共 1 个版本