HTML 语义化与可访问性

[TODO] HTML语义化标签、ARIA、SEO基础

概述

HTML 语义化是指使用具有明确含义的 HTML 标签来构建网页结构，使代码更具可读性、可维护性和可访问性。

核心内容

语义化标签

• 结构标签：<header>, <nav>, <main>, <article>, <section>, <aside>, <footer>
• 文本标签：<h1>-<h6>, <p>, <blockquote>, <code>, <pre>
• 列表标签：<ul>, <ol>, <li>, <dl>, <dt>, <dd>
• 表格标签：<table>, <thead>, <tbody>, <tfoot>, <th>, <td>
• 表单标签：<form>, <fieldset>, <legend>, <label>
• 多媒体标签：<figure>, <figcaption>, <picture>, <video>, <audio>

可访问性（Accessibility / A11y）

• ARIA（Accessible Rich Internet Applications）：role、aria-label、aria-describedby 等属性
• 键盘导航：tabindex、焦点管理
• 屏幕阅读器适配：alt 属性、语义化标题层级
• 颜色对比度：WCAG 标准

SEO 基础

• 语义化标签对搜索引擎爬虫的友好性
• <meta> 标签优化（description、keywords、viewport）
• Open Graph 协议与结构化数据

待补充内容

[TODO] 各标签的详细用法、ARIA 实战案例、SEO 优化清单、可访问性检测工具。