必须是的直接子元素且全页唯一，应作为页面或区块的语义头部，二者共同构建可访问、可索引的内容主干结构。
用 <header></header> 和 <main></main> 区分内容层级
浏览器和读屏工具依赖语义化标签识别页面主干结构，<header></header> 不只是放 logo 的容器，它应包裹整个页面的顶部导航与标题；<main></main> 必须且只能出现一次，代表文档核心内容区域。常见错误是把多个 <section></section> 堆在 <div> 里，结果搜索引擎无法判断哪块才是用户真正要找的信息。
<ul><li>
<code><header></header> 内建议包含 <h1></h1>（页面主标题），不可省略或用 <div> 模拟
<li>
<code><main></main> 不能嵌套在 <article></article> 或 <aside></aside> 中，否则会破坏其“唯一主体”的语义
<article></article> 应有自己的 <header></header>，但整个页面仍只用一个 <main></main>
避免滥用 <div> 替代语义标签
<p>写 HTML 时下意识用 <code><div> 套样式，容易导致结构扁平、无障碍支持失效。比如页脚联系信息用 <code><div class="footer">，屏幕阅读器只会读作“分区”，而换成 <code><footer></footer> 就能明确播报“页脚”。
- 导航区块优先用
<nav></nav>，即使只有两个链接也值得用
- 侧边栏内容（如相关链接、广告）用
<aside></aside>，不是所有“靠边”的内容都算 <aside></aside>——它必须与 <main></main> 内容弱相关
-
<section></section> 要有明确主题和标题（<h2></h2>–<h6></h6>），纯样式分隔不用它
<article></article> 和 <section></section> 的边界在哪
<nav></nav>，即使只有两个链接也值得用<aside></aside>，不是所有“靠边”的内容都算 <aside></aside>——它必须与 <main></main> 内容弱相关<section></section> 要有明确主题和标题（<h2></h2>–<h6></h6>），纯样式分隔不用它<article></article> 和 <section></section> 的边界在哪二者都表示“成块内容”，但语义不同：<article></article> 是可独立分发、复用的内容单元（如一篇新闻、一条微博），<section></section> 是为组织内容而设的逻辑分组（如“技术细节”“性能对比”）。混淆会导致 RSS 订阅失败或结构化数据提取出错。
- 博客正文 + 评论区整体不是
<article></article>，正文是<article></article>，评论区应是独立的<section></section>或<aside></aside> - 一个
<section></section>里可以有多个<article></article>（如首页文章列表），但一个<article></article>内部不应再套<article></article> - 没有标题的区块别硬套
<section></section>，空白<section></section>对辅助技术毫无意义
检查
HTML5 规范允许 下直接放 <header></header>、<main></main>、<footer></footer> 等，但实际中常因 CSS 布局需求多套一层 <div id="wrapper">，这会打断语义流。现代 CSS（如 Flex/Grid）已无需靠包裹 div 控制布局。
<ul><li>若必须加容器（如为了 max-width 居中），用 <code><div role="document"> 显式声明语义，避免读屏器跳过
<li>
<code> 下首个标题应为 <h1></h1>，且属于 <main></main> 或 <article></article>，不在 <header></header> 里重复定义
<main></main> 或 <nav></nav> 出现多次
