html语义化标签是现代网页的底层结构契约，非锦上添花；div不能替代nav，因浏览器和爬虫不识别class名，nav才明确声明导航链接并支持读屏器快捷键跳转。
HTML语义化标签不是“锦上添花”，而是现代网页的底层结构契约——不用它，SEO、无障碍、协作维护都会在你看不见的地方持续掉血。
为什么 <div> 不能代替 <code><nav></nav>？
浏览器和爬虫不靠 class 名识别导航区域。<div class="nav"> 对搜索引擎来说只是个空盒子；而 <code><nav></nav> 是明确声明“这里是一组导航链接”。屏幕阅读器用户按 N 键就能跳转到它，<div> 则完全不可感知。
<ul>
<li>每个页面最多应有 1 个 <code><main></main>，且不能嵌套在 <article></article> 或 <aside></aside> 内
<section></section> 必须有标题（<h1></h1>–<h6></h6>），否则语义断裂——它代表“有主题的区块”，不是通用容器<aside></aside> 不等于“右边栏”，而是指与当前内容“相关但可分离”的信息，比如文章旁的术语解释、作者简介
<header></header> 和 <footer></footer> 可以嵌套多次吗？
可以，而且应该。一个页面可以有全局 <header></header>，每个 <article></article> 也能有自己的 <header></header>（含该文标题、发布时间等）；同理，<footer></footer> 可用于页面底部，也可用于单篇文章末尾的版权或编辑说明。
- 避免把
<header></header>当成“顶部通栏”来用：它不强制出现在视觉顶部，语义上只表示“介绍性内容” -
<footer></footer>里不应放主导航——那是<nav></nav>的职责；也不该塞全文版权声明以外的主业务入口 - 嵌套时，内部
<header></header>的层级需与所在上下文匹配，例如<article></article>内的<header></header>用<h2></h2>而非<h1></h1>
哪些标签容易被误用为“样式替代品”？
最典型的是把 <section></section> 当 <div> 用、把 <code><article></article> 套在新闻列表项外当“卡片容器”。它们不是布局工具，而是内容关系声明。
-
<article></article>表示可独立分发/复用的内容（如博客正文、微博、产品卡片），必须能脱离当前页面被 RSS 抓取或单独链接访问 -
<section></section>需具备逻辑主题，例如“用户评论区”“技术参数表”；纯为了加 margin/padding 而包一层，就违背语义 -
<main></main>不是“主要内容区”的 CSS 类名，它是 ARIArole="main"的原生等价物——缺失它，屏幕阅读器无法一键定位核心内容
真正难的不是记住标签名，而是每次写结构前问一句：这个区块对机器（爬虫、读屏器）意味着什么？如果答案模糊，大概率该换标签，而不是加 class 或注释补救。
