HTML语义化标签是现代前端开发的底线要求，而非加分项；不用它们会导致可访问性、SEO和协作维护出现硬伤。

HTML语义化标签不是“加分项”，而是现代前端开发的底线要求；不用它们，代码在可访问性、SEO 和协作维护上会立刻暴露硬伤。

为什么

不能代替

或

浏览器和屏幕阅读器根本不知道这个

是页头还是广告位——它只看到一个空容器。而

一出现，辅助技术就自动将其识别为页面起始区域，搜索引擎也会加权该区块内的

为标题主干。

• 同一视觉效果下，
  能被键盘用户用 Tab 快速跳转到导航区，
  则完全不可感知
• 在整个文档中必须唯一，且是屏幕阅读器默认的“主要内容起点”，漏写或重复会导致朗读逻辑错乱
• 某些 CMS 或自动化工具（如 Lighthouse）会直接将缺失语义标签标记为「严重可访问性问题」

和

的关键区别在哪

很多人把两者当同义词混用，其实它们的语义边界非常明确：

表示**可独立分发、复用的内容单元**（比如一篇博客、一条新闻、一个用户评论），而
只是**主题相关的逻辑分组**（比如“产品特性”“客户评价”这类无独立传播价值的区块）。
• 一个
  内可以嵌套多个
  ，但反过来不行
• 自带隐式大纲层级，其内部
  在文档结构中会被视为与外层
  平级；
  不改变层级关系
• RSS 订阅器、爬虫或内容聚合工具只认
  作为可提取的完整条目，
  被忽略

不等于“右边那个栏”

很多开发者只按视觉位置理解

，把它当成 CSS 布局的代名词。实际上，它的语义核心是「与当前上下文相关但非核心的内容」——它可以出现在页面任意位置，甚至嵌套在
里作为术语注释。

HTML Text Extract
从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。
下载
• 放在文章里的侧边引文、作者简介、参考资料，用
  合理；但“全站通用右侧广告位”属于全局布局，应该用
  或保留
  + ARIA role
• 如果
  内容对理解主文非必要，且移除后不影响主干逻辑，那它才真正符合语义
• 滥用
  会让屏幕阅读器用户反复听到无关信息，反而降低效率

面试时最容易被追问的细节点

考官常从边缘场景切入判断你是否真懂语义，而非背过定义。比如：

能不能嵌套在
里？
是否必须包含链接？
和 的关系是什么？
• 可以出现在任何区块内（包括
  ），表示该区块的结尾信息（如发布时间、编辑者），不专指页面底部
• 必须包含导航意图，纯按钮或 JS 触发菜单但无 链接时，应改用
• 是页面唯一主要内容容器，但不是 的子集替代品——页脚、全局导航等仍需在
  外

语义不是贴标签，是持续判断“这段内容对机器和人意味着什么”。一旦开始思考每个标签在无障碍流、大纲生成、SEO 抓取链路中的真实作用，就很难再退回

堆砌模式了。