HTML5结构化文档依靠语义标签定义内容角色，形成机器可解析、人眼易读、辅助设备可导航的逻辑主线；<header><nav><main><footer>各司其职，<article>强调独立可分发，<section>侧重逻辑分组，语义误用会破坏结构清晰度。
HTML5结构化文档不是靠视觉位置堆出来的，而是靠语义标签定义内容在信息流中的真实角色。它们共同构成一条可被机器解析、人眼理解、辅助设备导航的逻辑主线。
明确区域职责，建立页面骨架
每个语义标签承担固定的信息定位功能，不能混用或替代：
- <header> 表示一个“介绍性区域”，可以出现在整个页面顶部，也可以嵌套在 <article> 或 <section> 内部，用于该区块自身的标题、作者、发布时间等
- <nav> 专指“主导航链接集合”，不是所有链接都放这里；面包屑、页脚链接、文章内跳转链接一般不归入 <nav>
- <main> 是页面唯一主体内容容器，必须且只能出现一次，不能包裹在 <article>、<aside>、<footer> 等内部
- <footer> 属于其父级上下文的底部，可以有多个——页面有一个，每篇 <article> 也可以有自己的 <footer>
区分内容粒度：article 与 section 的关键差异
两者都用于分组，但语义层级和复用意图完全不同：
- <article> 强调“独立可分发性”：一篇博客、一条新闻、一个用户评论，即使脱离当前页面也能被聚合、RSS 推送或跨平台引用
- <section> 强调“逻辑分组性”：比如“产品特性”“用户评价”“技术参数”这些同属一篇文章的子模块，需配 h1–h6 标题才符合规范
- 一个 <article> 内部可包含多个 <section>，但一个纯展示区块若无独立主题、不可重用，优先考虑 <div> 或 <section>（视是否有标题而定）
支撑机器理解：从SEO到AI代理的关键信号
搜索引擎和AI模型不再只读文本，而是依赖结构线索判断内容权重与可信度：
立即学习“前端免费学习笔记（深入）”；
- 爬虫通过 <main> 快速定位核心内容，避开 <header>、<nav>、<aside> 中的重复或干扰信息
- <article> + <time datetime="2026-06-10"> 这样的组合，向LLM明确传递“这是时效性强的独立报道”，提升被引用概率
- 屏幕阅读器依靠 <nav>、<main>、<aside> 等地标（landmark）实现一键跳转，缺失语义则用户需逐行听读
避免常见误用，守住语义底线
语义化不是加标签越多越好，错用反而破坏结构清晰度：
- 不要仅因样式需要就用 <section> 包裹按钮或图标——它需要标题和主题，否则用 <div> 更诚实
- <aside> 不等于“右边那栏”，而是指“与当前上下文相关但非必需”的内容，如文章旁的术语解释、作者简介卡片
- <footer> 里放导航链接不违规，但若该链接集合是全站通用主导航，则应放在 <nav> 中，<footer> 只承载版权、备案、联系方式等元信息
