html语义化是让标签本身表达内容角色，而非靠class名解释；如是机器可识别的导航区域，提升seo权重40%、支持读屏快捷跳转、降低维护成本，而无此能力。
直接说结论：面试官问 HTML 语义化，不是考你背了多少标签名，而是看你能不能讲清 <nav></nav> 和 <div class="nav"> 的实际差异——尤其在 SEO、可访问性、维护成本这三点上有没有真实体感。
<h3>怎么定义“语义化”才不被追问？</h3>
<p>别张嘴就答“有含义的标签”，太虚。应该用一句话锚定场景：<strong>语义化是让标签本身表达内容角色，而不是靠 class 名或注释去解释它是什么</strong>。比如 <code><footer></footer> 就是页脚，不是“一个叫 footer 的 div”；<article></article> 表示可独立分发、复用的内容单元（如一篇博客、一条新闻），不是“看起来像文章的 div”。
容易踩的坑：
- 把
<section></section>当成<div> 的高级替代——错。<code><section></section>要求有标题（<h1></h1>–<h6></h6>），否则语义不成立； - 在非主要内容区滥用
<main></main>——<main></main>页面中只能出现一次，且不能嵌套在<article></article>、<aside></aside>、<header></header>、<nav></nav>、<footer></footer>内； - 用
<aside></aside>包裹广告位却不加说明——<aside></aside>内容需与主文相关（如作者介绍、延伸阅读），纯广告建议用<div role="complementary"> 更准确。 <h3> <code><section></section>和<article></article>到底怎么选？关键看内容是否具备“独立传播性”。
<article></article>是自包含的，能单独 RSS 推送、被搜索引擎当独立条目索引；<section></section>只是逻辑分组，脱离上下文就失去意义。使用场景对比：
- 博客列表页：每个帖子用
<article></article>，整个列表区域用<section></section>； - 产品详情页：参数表格、用户评价、售后说明——各自用
<section></section>，因为它们共同服务于同一个产品主体； - 错误写法：
<section><h2>关于我们</h2> <p>…</p></section>没问题；但若把这个“关于我们”单独拎出来发到公司官网子站，它就不该是<section></section>，而应是<article></article>。
面试时被问“不用语义化会怎样？”怎么答得具体？
别只说“SEO 差”“不友好”，要对应到真实后果：
- SEO 层面：Google 的文档结构解析器（如 Document Outline 算法）依赖语义标签识别主次内容。没
<main></main>或乱用<section></section>，可能导致正文被降权，侧边栏内容反被当成重点； - 无障碍层面：NVDA 或 VoiceOver 读屏时，会把
<nav></nav>自动标记为“导航区域”，用户可快捷跳转；而<div class="nav"> 默认就是“普通组”，视障用户得逐行听过去； <li>维护成本：当产品要接入自动化测试（如用 Puppeteer 抓取 <code><main></main>区域做快照比对），或 CMS 系统要按语义提取摘要，非语义结构会让这类需求要么写死 class 名（脆弱），要么人工标注（不可持续）。
真正难的不是记住标签名，是判断某个业务模块该用
<section></section>还是<article></article>时，有没有翻过 W3C 规范里那句：“An article is intended to be independently distributable or reusable”——这句话得自己查过、试错过，才算真懂。 - 博客列表页：每个帖子用
