html语义化核心是内容角色决定标签选择：须全页唯一且为直接子元素，专指不可替代的主体内容；要求内容独立完整，仅作逻辑分组；限于主要导航系统；、等小标签提供机器可读性关键信息。
HTML文档结构不是“怎么好看怎么来”，而是“内容角色决定标签选择”。用错一个 <main></main> 或把 <nav></nav> 套在页脚友情链接里，SEO 和屏幕阅读器就可能直接跳过你最想传达的部分。
为什么 <main></main> 必须全页唯一且不能嵌套
它不是“主视觉区域”或“主要内容区”的 CSS class 替代品，而是向浏览器和辅助技术声明：“这里才是用户真正该看的、不可替代的内容”。一旦嵌套在 <article></article> 或 <section></section> 里，语义层级就崩了——相当于告诉屏幕阅读器“这篇博客是整页的主内容”，而忽略掉页面其他所有文章。
-
<main></main>只能作为的直接子元素出现，不能出现在<header></header>、<footer></footer>、<article></article>或<section></section>内部 - 里面不该有导航栏、侧边栏、页脚链接、版权声明、广告位——哪怕它们视觉上在“主区域”内
- 可以包含多个
<article></article>（如文章列表），但不能反过来：一个<article></article>里再塞一个<main></main>
<article></article> 和 <section></section> 的分界线在哪
关键不在“有没有标题”，而在“删掉周围还能不能独立存在”。RSS 订阅器、打印预览、搜索引擎摘要提取，都依赖这个判断。
-
<article></article>：内容自带上下文和完整性。例如一条用户评论、一篇新闻稿、一个独立卡片式组件。即使脱离当前页面，也能被理解、被转发、被聚合 -
<section></section>：只是逻辑分组，比如“产品特性”“客户评价”“技术参数”，单独拿出来没有意义，必须依赖父级上下文 - 常见误用：
<section></section>包裹单个<h2></h2>+ 一段文字——没分组对象，纯属占位；该用<div> 或直接用标题+段落 <h3> <code><nav></nav>不是“所有导航链接”的容器它的语义是“主要导航系统”，不是“带链接的盒子”。滥用会稀释其信号，让辅助工具无法快速定位真正重要的跳转路径。
- 适合：
<nav></nav>应包裹顶部主导航菜单、左侧栏目树、面包屑（如果构成核心路径） - 不适合：页脚一堆友情链接、文章末尾的“上一篇/下一篇”、登录/注册按钮、搜索框（除非搜索是站点一级入口）
- 一个页面可有多个
<nav></nav>，但每个都得是“主要”的——比如主站导航 + 文档内部目录导航，两者并存合理；但页脚十几个外链硬塞一个<nav></nav>就破坏语义
<time></time>、<figure></figure>这些小标签为什么不能省它们不是锦上添花，而是机器可读性的最小单位。省略
datetime属性的<time></time>对 SEO 和日历聚合毫无价值；不用<figure></figure>包裹图+说明，屏幕阅读器就无法确认图文关联性。-
<time datetime="2026-06-23">今天</time>—— 人类看到“今天”，机器拿到精确时间戳 -
<figure><img src="..."><figcaption>示意图：DOM 渲染流程</figcaption></figure>——<figcaption></figcaption>必须是<figure></figure>的直接子元素，否则语义断裂 -
<aside></aside>不等于“右边那块”，而是“与主内容相关但可分离的信息”，比如文章右侧的“作者简介”或“延伸阅读”，广告位或装饰图标不算
语义化最难的地方，不是记不住标签名，而是每次写标签前得停下来问一句：“这个内容，在脱离当前页面时，还成立吗？辅助工具需要把它当作什么角色来处理？”——答案决定了该用
<article></article>还是<section></section>，该包<nav></nav>还是留白。 - 适合：
