HTML Coder

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

OpenSquilla Webpage Delivery

For a new runnable webpage when workspace file-authoring tools are available:

1. Create a filesystem-safe, dedicated project subdirectory such as webpage-<topic-slug>/; never place a generated site directly in the workspace root.
2. Keep index.html, local CSS/JavaScript, and every local asset inside that project root, using browser-relative references.
3. Validate the finished project, then call publish_artifact exactly once with the entry file and the complete dedicated root:

{
  "path": "webpage-<topic-slug>/index.html",
  "mime": "text/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—as AwesomeWebpageMetaSkill does—follow that narrower caller contract instead. When file authoring or publish_artifact is unavailable, return only the requested guidance or source and do not claim that a runnable project was published.

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

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

• 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