HTML语义化标签是现代前端开发的底线要求，而非加分项；不用它们会导致可访问性、SEO和协作维护出现硬伤。
HTML语义化标签不是“加分项”，而是现代前端开发的底线要求；不用它们，代码在可访问性、SEO 和协作维护上会立刻暴露硬伤。
为什么 <div> 不能代替 <code><header></header> 或 <nav></nav>
浏览器和屏幕阅读器根本不知道这个 <div class="header"> 是页头还是广告位——它只看到一个空容器。而 <code><header></header> 一出现，辅助技术就自动将其识别为页面起始区域，搜索引擎也会加权该区块内的 <h1></h1> 为标题主干。
- 同一视觉效果下，
<nav></nav>能被键盘用户用Tab快速跳转到导航区，<div class="nav"> 则完全不可感知 <li> <code><main></main>在整个文档中必须唯一，且是屏幕阅读器默认的“主要内容起点”，漏写或重复会导致朗读逻辑错乱 - 某些 CMS 或自动化工具（如 Lighthouse）会直接将缺失语义标签标记为「严重可访问性问题」
- 一个
<article></article>内可以嵌套多个<section></section>，但反过来不行 -
<article></article>自带隐式大纲层级，其内部<h2></h2>在文档结构中会被视为与外层<h1></h1>平级；<section></section>不改变层级关系 - RSS 订阅器、爬虫或内容聚合工具只认
<article></article>作为可提取的完整条目，<section></section>被忽略 - 放在文章里的侧边引文、作者简介、参考资料，用
<aside></aside>合理；但“全站通用右侧广告位”属于全局布局，应该用<footer></footer>或保留<div> + ARIA role <li>如果 <code><aside></aside>内容对理解主文非必要，且移除后不影响主干逻辑，那它才真正符合语义 - 滥用
<aside></aside>会让屏幕阅读器用户反复听到无关信息，反而降低效率 -
<footer></footer>可以出现在任何区块内（包括<article></article>），表示该区块的结尾信息（如发布时间、编辑者），不专指页面底部 -
<nav></nav>必须包含导航意图，纯按钮或 JS 触发菜单但无<a></a>链接时，应改用<div role="navigation"> <li> <code><main></main>是页面唯一主要内容容器，但不是的子集替代品——页脚、全局导航等仍需在<main></main>外
<section></section> 和 <article></article> 的关键区别在哪
很多人把两者当同义词混用，其实它们的语义边界非常明确：<article></article> 表示**可独立分发、复用的内容单元**（比如一篇博客、一条新闻、一个用户评论），而 <section></section> 只是**主题相关的逻辑分组**（比如“产品特性”“客户评价”这类无独立传播价值的区块）。
<aside></aside> 不等于“右边那个栏”
很多开发者只按视觉位置理解 <aside></aside>，把它当成 CSS 布局的代名词。实际上，它的语义核心是「与当前上下文相关但非核心的内容」——它可以出现在页面任意位置，甚至嵌套在 <article></article> 里作为术语注释。
立即学习“前端免费学习笔记（深入）”；
面试时最容易被追问的细节点
考官常从边缘场景切入判断你是否真懂语义，而非背过定义。比如：<footer></footer> 能不能嵌套在 <article></article> 里？<nav></nav> 是否必须包含链接？<main></main> 和 的关系是什么？
语义不是贴标签，是持续判断“这段内容对机器和人意味着什么”。一旦开始思考每个标签在无障碍流、大纲生成、SEO 抓取链路中的真实作用，就很难再退回 <div> 堆砌模式了。</div>
