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: <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

Accessible Form

Responsive Image

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