语义化标签缺失会导致搜索引擎降权、屏幕阅读器失效、团队协作低效；必须用等原生标签替代div，确保结构清晰、可访问、易维护。
因为不用语义化标签，代码在三类关键场景里会“失语”：搜索引擎爬不到重点、屏幕阅读器读不出结构、新同事打开文件像在破译电报。
搜索引擎为什么只信任 <h1></h1> 不信 <div class="title"><p>爬虫不是人，它不解析 CSS 类名，也不执行 JS，只靠 HTML 标签的原生含义做内容权重判断。<code><h1></h1> 被明确定义为“页面最高级标题”，爬虫会默认其包裹的内容是主题核心；而 <div class="title"> 在它眼里和 <code><div class="ad-banner"> 没区别——都是无意义容器。<p>常见错误现象：</p>
<ul><li>用 <code><div> + CSS 模拟标题，导致页面关键词密度高但无主次，收录页标题显示为“首页 - 网站名”而非实际文章题<li>把导航栏写成 <code><div id="nav">，爬虫无法识别链接集合意图，漏抓重要频道页<p>实操建议：</p>
<ul>
<li>每个页面有且仅有一个 <code><h1></h1>，内容必须匹配 <title></title> 的核心关键词
<nav></nav> 包裹，内部链接应为真实 <a></a>，避免 <div onclick="jump()">
<li>主内容区强制使用 <code><main></main>，且不能嵌套在 <article></article> 或 <section></section> 外层（否则语义被稀释）屏幕阅读器怎么靠 <nav></nav> 和 <main></main> 跳过广告直奔正文
视障用户常用快捷键如 Ctrl+Shift+M（NVDA）或 Cmd+Option+J（VoiceOver）直接跳转到 <main></main>，这是浏览器原生支持的语义契约，不依赖任何 JS 或 ARIA 属性。
容易踩的坑：
- 用
<div role="navigation"> 代替 <code><nav></nav>：虽然功能相似，但部分旧版读屏软件对role支持不稳定，且失去<nav></nav>自带的隐式aria-label行为 - 在
<footer></footer>里塞大量无关链接（如“友情链接”“合作伙伴”），破坏其“页面元信息结尾”的语义，导致用户误以为已读完全部内容 -
<nav></nav>内只放主导航链接，侧边栏分类导航用<aside></aside>+<nav></nav>组合更准确 -
<main></main>必须是文档流中第一个可聚焦的语义块，前面不能有未声明角色的<div> 遮挡<li>所有交互元素（按钮、输入框）必须用原生语义标签：<code><button></button>而非<div tabindex="0"> <h3>团队协作时，<code><article></article>和<section></section>的区别不是“哪个更高级”，而是“是否可独立分发”<article></article>表示内容能脱离当前页面存在——比如一篇博客、一条新闻、一个用户评论；<section></section>只是逻辑分组，比如“产品特性”“客户评价”这些段落，离开上下文就失去意义。为什么这点影响维护效率：
- CMS 后台导出纯 HTML 归档时，只有
<article></article>会被自动提取为独立条目，<section></section>只是结构标记 - 前端组件化时，
<article></article>天然适配 Web Component 封装粒度，而<section></section>往往需配合 JS 才能复用
实操建议：
- 用户生成内容（UGC）、RSS 订阅源、邮件推送模板，必须用
<article></article>包裹主体 -
<section></section>内部不要嵌套<header></header>或<footer></footer>——那是<article></article>的权利，<section></section>的<h2></h2>只表示本节标题，不是文档层级 - 避免
<article><section><article></article></section></article>这种嵌套：子<article></article>应该是独立实体（如评论），否则用<div> 更合适<p>最常被忽略的一点：语义化不是“加标签”，而是“删标签”。当你写完一段结构，试着关掉所有 CSS，如果仍能靠标签本身读出清晰大纲——那才是真正的语义化落地。</p> </div>
- CMS 后台导出纯 HTML 归档时，只有
实操建议：
