HTML Coder Skill
Expert skill for professional HTML development with focus on semantic markup, accessibility, HTML5 features, and standards-compliant web content.
When to Use This Skill
- Creating HTML documents with semantic structure
- Building accessible forms with HTML5 validation
- Implementing responsive markup and multimedia
- Using HTML5 APIs (Canvas, SVG, Storage, Geolocation)
- Troubleshooting validation or accessibility issues
Core Capabilities
- Semantic HTML: Document structure, content sections, accessibility-first markup
- Forms: All input types, validation attributes, fieldsets, labels
- Media: Responsive images, audio/video, Canvas, SVG
- HTML5 APIs: Web Storage, Geolocation, Drag & Drop, Web Workers
- Accessibility: ARIA, screen reader support, WCAG compliance
Essential References
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 standards
Best Practices
Semantic 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.
Quick Patterns
Semantic Page Structure
<!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>
Accessible Form
<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>
Responsive Image
<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>
Troubleshooting
- Validation: W3C Validator (validator.w3.org), check unclosed tags, verify nesting
- Accessibility: Lighthouse audit, screen reader testing, keyboard nav, color contrast
- Compatibility: Can I Use (caniuse.com), feature detection, provide fallbacks
Key Standards
1---2name: html-coder3description: Expert HTML development skill for building web pages, forms, and interactive content. Use when creating HTML documents, structuring web content, implementing semantic markup, adding forms and media, working with HTML5 APIs, or needing HTML templates, best practices, and accessibility guidance. Supports modern HTML5 standards and responsive design patterns.4license: MIT-05---67# HTML Coder Skill89Expert skill for professional HTML development with focus on semantic markup, accessibility, HTML5 features, and standards-compliant web content.1011## When to Use This Skill1213- Creating HTML documents with semantic structure14- Building accessible forms with HTML5 validation15- Implementing responsive markup and multimedia16- Using HTML5 APIs (Canvas, SVG, Storage, Geolocation)17- Troubleshooting validation or accessibility issues1819## Core Capabilities2021- **Semantic HTML**: Document structure, content sections, accessibility-first markup22- **Forms**: All input types, validation attributes, fieldsets, labels23- **Media**: Responsive images, audio/video, Canvas, SVG24- **HTML5 APIs**: Web Storage, Geolocation, Drag & Drop, Web Workers25- **Accessibility**: ARIA, screen reader support, WCAG compliance2627## Essential References2829Core documentation for HTML experts:3031- [`references/add-css-style.md`](references/add-css-style.md) - Add CSS via `link` tag, inline, or embedded in html32- [`references/add-javascript.md`](references/add-javascript.md) - Add JavaScript via `script src="link.js"` tag, inline `script`, or embedded in html33- [`references/attributes.md`](references/attributes.md) - HTML attribute essentials34- [`references/essentials.md`](references/essentials.md) - Semantic markup, validation, responsive techniques35- [`references/global-attributes.md`](references/global-attributes.md) - Complete global attribute information36- [`references/glossary.md`](references/glossary.md) - Complete HTML element and attribute reference37- [`references/standards.md`](references/standards.md) - HTML5 specifications and standards3839## Best Practices4041**Semantic HTML** - Use elements that convey meaning: `<article>`, `<nav>`, `<header>`, `<section>`, `<footer>`, not div soup.4243**Accessibility First** - Proper heading hierarchy, alt text, labels with inputs, keyboard navigation, ARIA when needed.4445**HTML5 Validation** - Leverage built-in validation (`required`, `pattern`, `type="email"`) before JavaScript.4647**Responsive Images** - Use `<picture>`, srcset, and `loading="lazy"` for performance.4849**Performance** - Minimize DOM depth, optimize images, defer non-critical scripts, use semantic elements.5051## Quick Patterns5253### Semantic Page Structure54```html55<!DOCTYPE html>56<html lang="en">57<head>58 <meta charset="UTF-8">59 <meta name="viewport" content="width=device-width, initial-scale=1.0">60 <title>Page Title</title>61</head>62<body>63 <header><nav><!-- Navigation --></nav></header>64 <main><article><!-- Content --></article></main>65 <aside><!-- Sidebar --></aside>66 <footer><!-- Footer --></footer>67</body>68</html>69```7071### Accessible Form72```html73<form method="post" action="/submit">74 <fieldset>75 <legend>Contact</legend>76 <label for="email">Email:</label>77 <input type="email" id="email" name="email" required78 pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">79 <button type="submit">Send</button>80 </fieldset>81</form>82```8384### Responsive Image85```html86<picture>87 <source media="(min-width: 1200px)" srcset="large.webp">88 <source media="(min-width: 768px)" srcset="medium.webp">89 <img src="small.jpg" alt="Description" loading="lazy">90</picture>91```9293## Troubleshooting9495- **Validation**: W3C Validator (validator.w3.org), check unclosed tags, verify nesting96- **Accessibility**: Lighthouse audit, screen reader testing, keyboard nav, color contrast97- **Compatibility**: Can I Use (caniuse.com), feature detection, provide fallbacks9899## Key Standards100101- **WHATWG HTML Living Standard**: https://html.spec.whatwg.org/102- **WCAG Accessibility**: https://www.w3.org/WAI/WCAG21/quickref/103- **MDN Web Docs**: https://developer.mozilla.org/en-US/docs/Web/HTML104105---
thestratcore