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