语义化是为机器和人快速理解页面结构，应从header、main、article三个核心标签入手：header标识内容起始并配层级标题；main唯一且直属于body，承载主内容；article用于可独立分发的完整内容单元。
直接上重点：语义化不是为了“看起来高级”，而是让机器（搜索引擎、读屏软件）和人（协作开发者）一眼看懂页面在说什么。真正落地时，不必一步到位，从三个核心标签切入——header、main、article，就能显著提升结构可信度与可访问性。
header：上下文入口，不止是页头
它不单指页面最上方的区域，也适用于文章标题栏、卡片头部等独立区块。关键在于传达“这是某部分内容的起始”。
- 每个 header 最好配一个层级明确的标题（h1–h6），构成可导航的大纲
- 允许存在多个 header，比如整个页面一个，每篇 article 内再各有一个
- 避免把 logo + 导航 + 搜索框全塞进同一个 header 却不加标题——这会让辅助技术失去结构锚点
main：唯一主内容声明，不是“内容容器”
main 是页面中不可替代的语义锚点，Google 和屏幕阅读器都依赖它快速定位核心信息。
- 全页只能有一个 main，且必须位于 body 直接子级（不能被 nav、aside 或另一个 section 包裹）
- 它里面可以合法包含 article、section、header（用于文章题头）、footer（如文章末尾版权声明）
- 但绝不能出现 nav（导航应放在 main 外）、也不能嵌套另一个 main
article：可独立分发的内容单元
判断标准很简单：把这块内容单独复制出去，是否依然完整、有意义？如果是，就该用 article。
立即学习“前端免费学习笔记（深入）”；
- 博客正文、新闻条目、用户评论、产品卡片，都属于典型 article
- 不要用 section 替代 article——section 是为分组服务的，比如“产品特性”“技术参数”这类需标题支撑的逻辑块
- 每个 article 建议自带 header 和时间信息（用 time datetime），强化机器可读性
其他标签的实用边界
nav、aside、section、footer 都有明确职责，用错反而稀释语义。
- nav 只包裹主要导航链接，页脚一堆杂项链接或“上一篇/下一篇”通常不用它
- aside 应与主内容相关但非必需，比如侧边推荐、作者简介；广告位或无关链接不适合
- section 必须有主题，且建议搭配 h2–h6 标题，否则不如用 div
- footer 可出现在页面底部，也可嵌入 article 或 section 内部，用于局部版权或操作说明
