语义化HTML是SEO、CSS和可访问性的基础，必须用<nav>、<main>、<header>等标签替代<div class="nav">等非语义写法，确保结构正确、权重明确、嵌套合规。
语义化 HTML 不是“写得好看一点”的可选操作，而是给 SEO 和 CSS 提供稳定、可预测、低耦合的挂载点。用 <div> 堆出来的结构，爬虫和样式都得靠 class 名硬猜；而 <header>、<nav>、<main> 这类标签，本身就是天然的语义锚点。
为什么 <div> 不能替代 <nav> 做导航样式？
很多人用 <div class="nav"> 写导航，再配一堆 CSS 选择器去控制样式——这本身没问题，但隐患藏在维护和扩展里。
- SEO 层面：搜索引擎不识别
class="nav"，它只认<nav>标签语义，意味着导航链接权重不会被自动提升 - CSS 层面：一旦团队协作或换人维护，
.nav可能被误用于侧边栏、面包屑甚至分页条，样式污染风险高 - 可访问性层面：屏幕阅读器用户按快捷键“跳到导航”时，
<div class="nav">完全无效，必须依赖 ARIA 属性手动补救
<main> 是唯一合法的“主内容”挂载点，别用 <section> 或 <article> 替代
<main> 在规范中要求页面有且仅有一个，它是浏览器、爬虫、辅助技术公认的“核心内容起始位置”。用错会直接破坏结构信任链。
- 错误做法：
<section class="main-content">—— 搜索引擎无法区分这是主内容还是某个子模块 - 正确做法：
<main>包裹真正不可省略的页面主体，比如文章正文、商品列表、表单容器 - 注意边界：
<main>不能嵌套在<article>、<aside>、<footer>内部，否则语义冲突
标题层级（<h1>–<h6>）不是样式开关，而是内容权重信号
很多项目把 <h2> 当成“比 <p> 大一号的字”来用，结果整页全是 <h2>，<h1> 缺失或乱用。这会让 SEO 和屏幕阅读器彻底迷失主次。
立即学习“前端免费学习笔记（深入）”；
-
<h1>应该且只能出现一次，代表整个页面的主题（如“iPhone 15 Pro 购买指南”） - 每个
<section>或<article>内部可以有自己的<h2>–<h6>子层级，但必须保持嵌套逻辑 - CSS 中避免用
h2 { font-size: 1.5em; }这类全局重置——应通过 class 控制视觉，保留标签原始语义权重
最常被忽略的一点：语义标签不是“加了就完事”，它们之间的嵌套关系必须符合规范。比如 <nav> 放在 <header> 里合理，但放在 <footer> 里也合法；而 <main> 如果被包在 <article> 里，就会让爬虫误判内容粒度。结构对了，挂载点才真正可靠。
