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