html-standards

Enforce accessible, semantic, maintainable, and secure HTML standards across multiple file types.

Updated Mar 6, 2026
One-click install
npx skills add https://github.com/alex5141/github-copilot-starter --skill html-standards-alex5141
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: html-standards
Source: https://github.com/alex5141/github-copilot-starter/tree/main/.github/skills/html-standards
Command: npx skills add https://github.com/alex5141/github-copilot-starter --skill html-standards-alex5141

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill ensures that HTML code adheres to best practices for accessibility, semantic correctness, maintainability, and security, preventing common pitfalls and improving web application quality.

Core Features & Use Cases

  • Semantic HTML: Promotes the use of meaningful HTML5 elements over generic divs.
  • Accessibility: Guides on proper image alt text, form labeling, and keyboard navigation.
  • Security: Highlights the importance of escaping user-generated content and using security meta tags.
  • Use Case: When writing a new component or page, use this Skill to ensure all HTML is structured correctly, accessible to users with disabilities, and free from common security vulnerabilities.

Quick Start

Apply these HTML standards to the provided code snippet.

Frequently Asked Questions about html-standards

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I write accessible and semantic HTML for web components?

Accessible and semantic HTML uses meaningful HTML5 elements over generic divs, ensuring proper document structure, heading hierarchy, image alt text, form labeling, and keyboard navigation for users with disabilities.

What are the best practices for securing HTML against user-generated content?

Securing HTML requires escaping user-generated content to prevent injection attacks and implementing security meta tags, safeguarding web applications from common vulnerabilities and cross-site scripting risks.

Does this HTML standards guidance work with Vue, Svelte, and PHP templates?

Yes, these HTML standards apply directly to .html, .vue, .twig, .php, .cshtml, and .svelte files, enforcing accessibility, semantic correctness, and security across multiple web development frameworks.

How do I add ARIA attributes and form labels for keyboard navigation?

Adding ARIA attributes and form labels involves applying descriptive labeling elements and roles to interactive components, enabling proper screen reader announcements and supporting full keyboard navigation accessibility.

What are the best practices for inline style avoidance and image optimization in HTML?

Avoiding inline styles promotes maintainable code by using external CSS, while image optimization and resource hints improve page load performance and overall web application quality.

Why does my HTML heading hierarchy affect web accessibility?

HTML heading hierarchy affects web accessibility because screen readers use it to navigate document structure, so maintaining a logical order ensures content is readable and accessible to users with disabilities.