语义化标签提升可访问性与seo：等六类标签比更准确可靠；需有主题和标题；唯一且包裹核心内容；为独立可分发单元；表附属关系而非视觉位置。
直接用 <header></header>、<nav></nav>、<main></main>、<section></section>、<aside></aside>、<footer></footer> 这六类标签分块，比套 <div> 更准、更轻、更可靠——不是“看起来高级”，而是浏览器、爬虫、读屏器真能立刻识别内容角色。
<h3>什么时候该用 <code><section></section> 而不是 <div>
<p><code><section></section> 必须自带主题性，且通常应有标题（<h2></h2>–<h6></h6>）。它不是“视觉上的一块”，而是“逻辑上可独立成节的内容”。
- ✅ 正确：一篇教程里“安装步骤”“配置说明”“常见问题”三个带
<h3></h3>的区块，各自用<section></section>包裹 - ❌ 错误：仅为了加边框或浮动而套一层
<section></section>；或在<main></main>外部、<article></article>内部重复使用（<article></article>本身已含语义） - ⚠️ 注意：
<section></section>不代表“右边栏”，侧边补充信息请用<aside></aside>；也不等于“页面主区域”，那是<main></main>的职责
<main></main> 和 <article></article> 的边界在哪
<main></main> 是页面级容器，每个 HTML 文档中只能出现一次，包裹所有核心内容；<article></article> 是内容级单元，可嵌套多个，表示自成一体、可被单独分发的内容（比如博客文章、新闻条目、论坛帖）。
- ✅ 正确：
<main></main>里放一个<article></article>（单篇博客），或并列多个<article></article>（首页文章流） - ❌ 错误：把导航、页脚塞进
<main></main>；或把广告位、作者简介写成<article></article> - ⚠️ 注意：
<article></article>可以有自己的<header></header>、<footer></footer>，但不能嵌套在<main></main>之外——否则语义断裂，爬虫可能忽略其权重
<aside></aside> 不是“sidebar”视觉概念，而是附属关系
<aside></aside> 表达的是与当前上下文相关但可剥离的补充信息，不是“右边那栏”。它的语义重心是“从属”，不是“位置”。
- ✅ 正确：博客正文旁的引用来源、术语解释、作者简介；
<article></article>内部的侧边注释 - ❌ 错误：纯广告位、无关推荐、全局导航菜单（该用
<nav></nav>） - ⚠️ 注意：若侧边内容与主内容无逻辑关联（比如全站通用广告），建议用
<div role="complementary"> 替代，避免误导辅助技术 <p>真正难的不是记住标签名，而是每次写结构前问一句：“这个区块如果去掉样式、去掉 JS，光靠标签本身，能否让机器和人一眼看懂它的角色？”——多数混乱都源于跳过这句，直接套 class 或 div。</p> </div>
