Build Html Pages Forms Content

Name: Build Html Pages Forms Content
Author: rondoflow

ASecurity

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 accessib…

19 stars

0 votes

0 copies

1 views

Added 9/19/2026

developmentjavascriptgojavatestingapiperformancedocumentation

Works with

api

Security Analysis

A100/100

Scanned 9/19/2026

Install to Claude Code

$npx -y skills add rondoflow/rondoflow --skill build-html-pages-forms-content --agent claude-code

Installs into .claude/skills of the current project.

Are you the author of Build Html Pages Forms Content?

Add the live security badge to your README — it updates automatically with every re-scan.

Security grade badge for Build Html Pages Forms Content

[![Security: A — Skills Directory](https://www.skillsdirectory.com/api/skills/rondoflow-build-html-pages-forms-content/badge)](https://www.skillsdirectory.com/skills/rondoflow-build-html-pages-forms-content)

More formats (shields.io, HTML) on the badges page.

Download with Pro

Files

SKILL.md

---
name: build-html-pages-forms-content
description: "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 accessib…"
category: "Web & Scraping"
author: community
version: "2.0.1"
icon: globe
---

# 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`](references/add-css-style.md) - Add CSS via `link` tag, inline, or embedded in html
- [`references/add-javascript.md`](references/add-javascript.md) - Add JavaScript via `script src="link.js"` tag, inline `script`, or embedded in html
- [`references/attributes.md`](references/attributes.md) - HTML attribute essentials
- [`references/essentials.md`](references/essentials.md) - Semantic markup, validation, responsive techniques
- [`references/global-attributes.md`](references/global-attributes.md) - Complete global attribute information
- [`references/glossary.md`](references/glossary.md) - Complete HTML element and attribute reference
- [`references/standards.md`](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
```html
<!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
```html
<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
```html
<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

---

Attribution

rondoflow

View source More from rondoflow →

SSkills DirectorySkills Directory

Ship a skill? Prove it's safe.

Free 120-pattern security scan, letter grade, and an embeddable README badge.

Submit a skill

Is this your skill, or is something wrong with this listing? Request removal or report an issue. Author removals are honored within 72 hours.

Comments (0)

No comments yet. Be the first to comment!

--- name: build-html-pages-forms-content description: "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 accessib…" category: "Web & Scraping" author: community version: "2.0.1" icon: globe --- # 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`](references/add-css-style.md) - Add CSS via `link` tag, inline, or embedded in html - [`references/add-javascript.md`](references/add-javascript.md) - Add JavaScript via `script src="link.js"` tag, inline `script`, or embedded in html - [`references/attributes.md`](references/attributes.md) - HTML attribute essentials - [`references/essentials.md`](references/essentials.md) - Semantic markup, validation, responsive techniques - [`references/global-attributes.md`](references/global-attributes.md) - Complete global attribute information - [`references/glossary.md`](references/glossary.md) - Complete HTML element and attribute reference - [`references/standards.md`](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 ```html <!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></nav></header> <main><article></article></main> <aside></aside> <footer></footer> </body> </html> ``` ### Accessible Form ```html <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 ```html <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 ---