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