HTML文档结构语义标签仅有<header>、<nav>、<main>、<article>、<section>、<aside>、<footer>七个，它们定义页面逻辑骨架，影响可访问性、SEO与维护性，不可用<div>或标题标签等替代。

HTML 文档结构标签不是“换个名字的 div”，用错就等于主动放弃可访问性、SEO 和长期维护性。

哪些标签属于文档结构语义标签

真正参与页面骨架定义、有明确逻辑含义的标签只有这几个：<header>、<nav>、<main>、<article>、<section>、<aside>、<footer>。它们不是装饰，浏览器和辅助技术会按规范解析其作用。

常见误判：

• <div> 和 <span> 永远不算结构语义标签，哪怕加了 class="header"
• <h1>~<h6> 是内容层级标签，不参与文档区块划分
• <figure>、<time>、<mark> 属于内容语义，不是结构语义

每个结构标签的真实使用边界

语义标签的判断依据是内容功能，不是视觉位置或设计稿分区。

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

立即学习“前端免费学习笔记（深入）”；

• <header>：必须是某个“区块”的头部，可以嵌套使用；比如 <article> 内部也可以有 <header>（含标题+作者+时间）
• <nav>：只用于“主要导航链接集合”，面包屑、页脚链接、分页按钮都不算；一个页面可以有多个 <nav>，但需用 aria-label 区分用途
• <main>：整个页面只能出现一次，且不能嵌套在 <article>、<aside>、<header>、<footer>、<nav> 内部
• <article>：内容必须能独立存在、被重用或聚合（如 RSS），一篇博客、一条新闻、一个用户评论都符合；但“公司介绍”“服务列表”这类站点级内容通常用 <section>
• <section>：必须有主题，且应配 <h2>~<h6> 标题；纯样式分隔、无逻辑主题的“区块”仍该用 <div>

容易被忽略的嵌套与兼容性问题

结构标签之间不是随便套的，错误嵌套会让屏幕阅读器跳过内容，或让搜索引擎降权。

• <main> 不能作为 <article> 的子元素——<article> 自带隐式主内容语义
• <aside> 必须与父级内容相关；放在 <body> 下一级的“全局侧边栏”，其实更接近 <section> + 视觉定位
• 旧版 Safari（≤13.1）和 IE 不识别这些标签的语义，但不影响渲染；若需兼容，可用 document.createElement('article') 激活（仅针对极老项目）
• 所有结构标签默认是块级元素，但不要依赖它做布局——<main> 里直接写浮动或 Flex 子项没问题，但别用 display: inline 覆盖其语义流

最常被绕过的点：语义标签不解决样式问题，也不替代 CSS 架构决策。一个 <section> 可以对应 BEM 的 .section--features，也可以对应原子类 flex-col gap-4 p-6——语义和样式必须解耦，否则很快就会为了“看起来像 sidebar”而硬塞 <aside> 进错误上下文。