如何新手高效学习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）能立刻暴露问题。跳级、重复、嵌套错位，都会让屏幕阅读器和搜索引擎无法建立正确权重关系。