HTML 开发指南：语义化、可访问性与 SEO 优化最佳实践

html by mindrally/skills

209 周安装量

43 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/mindrally/skills --skill html

开发代码规范 SEO

🇨🇳中文介绍

HTML 开发指南

核心原则

编写语义化的 HTML 以提高可访问性和 SEO
根据其预期用途使用适当的元素
确保正确的文档结构和层级
优先考虑可访问性，在需要时使用 ARIA 角色和属性

语义化元素

文档结构

使用 <header> 表示介绍性内容和导航
使用 <main> 表示主要内容（每页一个）
使用 <footer> 表示页脚内容
使用 <nav> 表示导航区域
使用 <aside> 表示附带相关内容

内容区块

使用 <article> 表示独立、可分发的完整内容
使用 <section> 表示主题性的内容分组

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

🇺🇸English

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, , )

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 CSS by using Bootstrap classes

Performance

Minimize DOM depth and complexity
Load scripts with defer or async when appropriate
Use loading="lazy" for below-fold images
Preload critical resources with <link rel="preload">

Weekly Installs

209

Repository

mindrally/skills

GitHub Stars

First Seen

Jan 25, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

opencode185

gemini-cli184

codex176

github-copilot174

amp164

kimi-cli160

React 组合模式指南：Vercel 组件架构最佳实践，提升代码可维护性

111,800 周安装

HTML 开发指南：语义化、可访问性与 SEO 优化最佳实践

🇨🇳中文介绍

HTML 开发指南

核心原则

语义化元素

文档结构

内容区块

相关 Skills

文本内容

交互元素

按钮与链接

表单

媒体元素

图片

视频与音频

可访问性 (ARIA)

何时使用 ARIA

常用 ARIA 属性

地标角色

最佳实践

文档元信息

代码质量

已弃用元素

HTMX 集成

Bootstrap 集成

性能