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 html
• references/add-javascript.md - Add JavaScript via script src="link.js" tag, inline script, or embedded in html
• references/attributes.md - HTML attribute essentials
• references/essentials.md - Semantic markup, validation, responsive techniques
• references/global-attributes.md - Complete global attribute information
• references/glossary.md - Complete HTML element and attribute reference
• references/standards.md - HTML5 specifications and standards

Best Practices

Semantic HTML - Use elements that convey meaning: \x3Carticle>, \x3Cnav>, \x3Cheader>, \x3Csection>, \x3Cfooter>, 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 \x3Cpicture>, srcset, and loading="lazy" for performance.

Performance - Minimize DOM depth, optimize images, defer non-critical scripts, use semantic elements.

Quick Patterns

Semantic Page Structure

\x3C!DOCTYPE html>
\x3Chtml lang="en">
\x3Chead>
  \x3Cmeta charset="UTF-8">
  \x3Cmeta name="viewport" content="width=device-width, initial-scale=1.0">
  \x3Ctitle>Page Title\x3C/title>
\x3C/head>
\x3Cbody>
  \x3Cheader>\x3Cnav>\x3C!-- Navigation -->\x3C/nav>\x3C/header>
  \x3Cmain>\x3Carticle>\x3C!-- Content -->\x3C/article>\x3C/main>
  \x3Caside>\x3C!-- Sidebar -->\x3C/aside>
  \x3Cfooter>\x3C!-- Footer -->\x3C/footer>
\x3C/body>
\x3C/html>

Accessible Form

\x3Cform method="post" action="/submit">
  \x3Cfieldset>
    \x3Clegend>Contact\x3C/legend>
    \x3Clabel for="email">Email:\x3C/label>
    \x3Cinput type="email" id="email" name="email" required
           pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
    \x3Cbutton type="submit">Send\x3C/button>
  \x3C/fieldset>
\x3C/form>

Responsive Image

\x3Cpicture>
  \x3Csource media="(min-width: 1200px)" srcset="large.webp">
  \x3Csource media="(min-width: 768px)" srcset="medium.webp">
  \x3Cimg src="small.jpg" alt="Description" loading="lazy">
\x3C/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

• WHATWG HTML Living Standard: https://html.spec.whatwg.org/
• WCAG Accessibility: https://www.w3.org/WAI/WCAG21/quickref/
• MDN Web Docs: https://developer.mozilla.org/en-US/docs/Web/HTML