Skill 详情
html
General HTML development guidance covering semantics, structure, forms, and accessibility.
使用前先检查
自动化审核只检查相关性，不代表安全审查或推荐。使用前请阅读来源中的说明。
SKILL.md
这段内容是审核时保存的快照。外部来源才是完整且最新的版本。
--- name: html description: Guidelines for semantic HTML markup, document structure, forms, accessibility attributes, and modern HTML best practices --- # HTML Development Guidelines ## Core Principles - Write semantic HTML to improve accessibility and SEO - Use appropriate elements for their intended purpose - Ensure proper document structure and hierarchy - Prioritize accessibility by using ARIA roles and attributes when needed ## Semantic Elements ### Document Structure - Use `<header>` for introductory content and navigation - Use `<main>` for the primary content (one per page) - Use `<footer>` for footer content - Use `<nav>` for navigation sections - Use `<aside>` for tangentially related content ### Content Sections - Use `<article>` for self-contained, distributable content - Use `<section>` for thematic grouping of content - Use appropriate heading hierarchy (`<h1>` through `<h6>`) - Only one `<h1>` per page, representing the main topic ### Text Content - Use `<p>` for paragraphs - Use `<ul>`, `<ol>`, `<dl>` for lists appropriately - Use `<blockquote>` for quotations - Use `<figure>` and `<figcaption>` for illustrations ## Interactive Elements ### Buttons and Links - Use `<button>` for clickable actions that don't navigate - Use `<a>` for links that navigate to URLs - Always include `href` attribute on links - Never use `<div>` or `<span>` for clickable elements ### Forms - Use `<form>` with proper `action` and `method` attributes - Associate labels with inputs using `for` attribute - Use appropriate input types (`email`, `tel`, `number`, etc.) - Group related inputs with `<fieldset>` and `<legend>` - Include validation attributes (`required`, `pattern`, `min`, `max`) ## Media Elements ### Images - Always include `alt` attribute for images - Use descriptive alt text for informational images - Use empty `alt=""` for decorative images - Use `srcset` and `sizes` for responsive images - Include `width` and `height` to prevent layout shift ### Video and Audio - Provide captions and transcripts - Include multiple source formats for compatibility - Use `poster` attribute for video thumbnails - Consider autoplay impact on user experience ## Accessibility (ARIA) ### When to Use ARIA - Use ARIA when native HTML semantics are insufficient - Prefer native HTML elements over ARIA when possible - Ensure ARIA attributes match actual element behavior ### Common ARIA Attributes - `aria-label` for accessible names - `aria-describedby` for additional descriptions - `aria-hidden` for decorative elements - `aria-expanded` for expandable sections - `aria-live` for dynamic content updates ### Landmarks - Use landmark roles to define page regions - Ensure all content is within a landmark - Use `role="main"`, `role="navigation"`, etc., only when semantic elements aren't available ## Best Practices ### Document Meta - Include proper `<!DOCTYPE html>` declaration - Set language attribute on `<html>` element - Include viewport meta tag for responsive design - Use appropriate meta tags for SEO ### Code Quality - Validate HTML using W3C validator - Maintain consistent indentation - Close all tags properly (including self-closing) - Use lowercase for element names and attributes ### Deprecated Elements - Avoid `<font>`, `<center>`, `<b>`, `<i>` for styling - Use CSS for visual presentation - Use `<strong>` and `<em>` for semantic emphasis ## HTMX Integration When using HTMX for interactivity: - Use `hx-get`, `hx-post` attributes for server requests - Leverage `hx-target` to specify update targets - Use `hx-swap` to control how content is inserted - Implement `hx-confirm` for critical actions - Use `hx-push-url` for URL updates without full refresh ## Bootstrap Integration When using Bootstrap: - Leverage Bootstrap's grid system for layouts - Use Bootstrap components with proper markup structure - Include necessary ARIA attributes with components - Use Bootstrap's utility classes for spacing and typography - Minimize custom在 GitHub 阅读完整来源 （打开外部页面）