web-html

Purpose

This skill enables OpenClaw to generate, edit, and optimize HTML5 code, focusing on semantic markup for structure, ARIA and WCAG compliance for accessibility, form handling, Web Components for encapsulation, Shadow DOM for styling isolation, and SEO techniques like meta tags and structured data.

When to Use

Apply this skill when building web pages requiring accessible, semantic HTML, such as creating e-commerce product pages with ARIA roles or dynamic forms in single-page apps. Use it for SEO-heavy content like blog posts or when integrating custom Web Components to avoid global style conflicts.

Key Capabilities

• Generate semantic HTML: Create elements like <main> or <article> for better readability and SEO. Example: Use <header role="banner"> for accessible site headers.
• Implement ARIA/WCAG: Add attributes like aria-label="Search" to elements for screen reader support, ensuring WCAG 2.1 AA compliance.
• Handle forms: Build forms with required attributes, e.g., <input type="email" required aria-invalid="false">, including validation hooks.
• Create Web Components: Define custom elements with Shadow DOM, e.g., <my-component> encapsulating internal HTML and styles.
• Optimize for SEO: Insert meta tags like <meta name="description" content="Page description"> and use headings for keyword placement. Code snippet:

<section aria-labelledby="sec-title">
  <h2 id="sec-title">Section Heading</h2>
  <p>Content with SEO keywords.</p>
</section>