如何新手高效学习HTML语义化及编写规范技巧？

本文共计1211个文字，预计阅读时间需要5分钟。

HTML语义化并非选个高级标签就完事，而是让每个标签都承担它应有的结构责任。不按规范编写，后期维护、SEO、无障碍访问都会出隐患，越晚改越麻烦。

哪些标签必须用对，不能用 div 或 span 替代

常见错误是把所有区块都塞进 div，再靠 class 命名模拟结构（比如 class="header"），这等于放弃 HTML 的原生语义能力。

• header 只用于页面或章节的页眉区域，含 logo、主导航等；一个 section 内也可有自己的 header
• main 必须且只能出现一次，包裹页面核心内容，不能嵌套在 article 或 aside 里
• article 表示能独立分发、复用的内容单元（如博客条目、新闻稿），不是“随便一块内容”
• aside 是与主内容相关但可分离的补充信息（如侧边栏推荐、作者简介），不是广告位容器
• nav 专指导航链接集合，不是所有带链接的列表都要套它（比如文章末尾的“相关阅读”用 section 更合适）

h1–h6 层级混乱会直接破坏文档大纲

浏览器开发者工具里的“大纲视图”（Elements → Accessibility → Outline）能立刻暴露问题。跳级、重复、嵌套错位，都会让屏幕阅读器和搜索引擎无法建立正确权重关系。

• 整个页面有且仅有一个 h1，代表主题；子模块用 h2，子子模块用 h3，不可 h1 后直接 h4
• 同一层级的标题应逻辑并列，比如两个 h2 不该一个是“产品介绍”，另一个是“联系我们”——后者更适合放在 footer 或独立联系页
• h1–h6 标签内只放文本或行内元素（strong、a 等），禁止嵌套 p、div、section
• 不要为了样式妥协结构：想让 h3 看起来像 h2？用 CSS 调字体大小，别硬换标签

img、form、video 这些媒体和交互元素的语义补全不能省

它们本身不带上下文，不补全就等于把盲人用户、爬虫、离线环境全拒之门外。这不是“加分项”，是基础可用性门槛。

立即学习“前端免费学习笔记（深入）”；

• img 必须有 alt 属性：功能性图片（如搜索按钮）写行为，装饰性图片写 alt=""（空字符串，不是不写）
• form 中每个 input、select、textarea 都要配 label，用 for + id 显式关联，不能只靠视觉位置暗示
• required、aria-invalid、aria-describedby 这类属性不是可选项，表单校验状态必须透出语义
• video 和 audio 至少提供 controls 和 aria-label；含关键信息的视频必须配 track 字幕

验证和检查比“写完就跑”重要得多

很多人写了半年 HTML 都没打开过 W3C Validator，结果一堆隐性错误积累成技术债。语义是否成立，不是“看着像就行”，得靠工具说话。

• 用 W3C Markup Validation Service 检查文档类型、标签闭合、嵌套合法性
• 在 Chrome DevTools 的 Accessibility 面板里看“Landmarks”和“Outline”，确认区域角色和标题层级是否符合预期
• 关掉 CSS 后手动浏览页面：如果结构崩塌、顺序错乱、内容不可读，说明语义骨架没立住
• 用键盘 Tab 导航测试表单焦点流，确保每个可操作元素都有明确语义归属和可访问名称

最容易被忽略的一点：语义化不是一次性动作。组件复用时，article 里的 h2 和页面级 h2 所处上下文完全不同，嵌套层级和含义会变——这意味着你得随时带着“它在整篇文档里是什么角色”这个意识去写，而不是机械套模板。