定义文档逻辑结构的关键是标签与内容职责匹配：main必须唯一且为body直接子元素，article用于可独立传播的内容，section须配h1–h6标题，header/footer可多处出现但需对应归属，nav仅含导航链接，aside限于相关补充信息。
定义文档逻辑结构，关键不是堆砌标签，而是让每个标签真实反映内容的职责和归属关系。结构对了，屏幕阅读器能读准、搜索引擎能抓对、开发者能一眼看懂。
先理清内容角色，再选标签
写代码前，先问自己三件事：这块内容是不是整页最核心的信息？它能不能单独被订阅或转发？它是不是一个有主题的分组？答案决定用 main、article 还是 section。
- 整页唯一的核心内容区域，必须用 main，且只能出现一次，直接放在 body 下
- 一篇博客正文、一条新闻稿、一个用户评论，各自独立完整，就该包在 article 里
- section 必须带标题（h1–h6），比如“技术原理”“使用步骤”“注意事项”，没标题的 section 和 div 没区别
header 和 footer 可以多处出现
header 不是页面顶部装饰，而是“某块内容的头部”。网站顶部有一个 header（含 Logo 和主导航），里面嵌一个 article，那这篇文章自己也能配一个 header（含标题和发布时间）。
- 每个 article、section 甚至 aside 都可以有自己的 header 和 footer
- 但页面级 header 通常放 Logo 和 nav，而文章级 header 放标题和元信息
- 别用 div class="header" 模拟——浏览器和读屏软件完全不认这个“class”
nav 和 aside 各司其职
nav 只负责真正意义上的导航路径，比如顶部菜单、侧边目录；aside 则放与主内容相关但非必需的补充信息，比如作者简介、术语解释、同类推荐。
立即学习“前端免费学习笔记（深入）”；
- nav 里只放跳转链接，搜索框、登录入口、语言切换器不属于它的职责
- aside 必须和主内容有关联，纯广告或无关推荐不该放这里
- 不要把所有右侧栏都默认塞进 aside，先判断它是否真的“可选但有益”
检查结构是否成立的硬指标
不需要工具也能快速验证：打开源码，看这几项是否满足。
- doctype 在第一行，html 标签带 lang 属性
- head 里有 meta charset 和 title
- body 中 main 是直接子元素，没被 header 或 div 包着
- 每个 article 都有明确标题，每个 section 都有 h 标签开头
- 主导航用 nav 包裹，页脚信息放在 footer 里
