html语义化标签是现代前端开发的底层事实，直接影响seo、无障碍访问和跨端框架协作；必须严格遵循嵌套合法性与唯一性约束，如全局仅能出现一次。
HTML语义化标签不是“锦上添花”，而是现代前端开发中绕不开的底层事实：没有它，SEO、无障碍、框架协作、甚至调试效率都会直接掉档。
搜索引擎爬虫只认 <h1></h1> 不认 div.title
爬虫不会解析 CSS 类名，也不会执行 JS 来推断结构。它靠的是原生标签语义做内容权重判断和区域划分。
-
<h1></h1>内容默认获得最高标题权重；<nav></nav>里的链接会被优先抓取；<main></main>区域内容被视作页面核心，索引优先级更高 - 用
<div class="header"> 替代 <code><header></header>，等于主动屏蔽爬虫对页面逻辑的理解能力 - 实测案例：某资讯站将首页
<div id="article-list"> 改为 <code><section aria-labelledby="sec-title"></section>+<article></article>嵌套后，长尾关键词收录量提升约 27%屏幕阅读器跳不过
<nav></nav>，但真会跳过div.nav视障用户依赖辅助技术（如 NVDA、VoiceOver）按语义节点导航。这些工具内置了对
<nav></nav>、<main></main>、<footer></footer>等标签的快捷键支持（如 Ctrl+Insert+N 跳转导航区）。- 非语义化写法（
<div role="navigation">）虽能模拟，但需手动补 <code>aria-属性，漏一个就导致跳转失败或读错上下文 -
<aside></aside>和<section></section>的嵌套关系直接影响阅读器的“区块感知”——错误嵌套会让用户误以为侧边栏是正文的一部分 - 小程序/跨端框架（如 Taro）在生成原生组件时，会把
<header></header>映射为平台原生导航栏，而div.header只能走通用 view 渲染，失去系统级优化 - 常见误用场景：Vue 单文件组件里每个
<template></template>都塞一个<main></main>；React 中多个<mainsection></mainsection>组件各自渲染<main></main> - 正确做法：整个 HTML 文档层级中，有且仅有一个
<main></main>；组件内部改用<section></section>或带role="region"的容器 - 检查方式：打开 Chrome DevTools → Console 输入
document.querySelectorAll('main').length，结果必须为 1
<main></main>只能出现一次，但很多人写了三处这是 W3C 明确规定的约束，不是建议。违反会导致无障碍校验失败、SEO 权重分散，且部分浏览器会静默忽略后续
<main></main>的语义。真正容易被忽略的，不是“该不该用语义化标签”，而是语义标签之间的**嵌套合法性**和**唯一性约束**——它们不报错，但会在 SEO、a11y、跨端等关键链路上悄悄失效。
- 非语义化写法（
