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