html文档结构语义标签仅有、、、、、、七个，它们定义页面逻辑骨架，影响可访问性、seo与维护性，不可用或标题标签等替代。
HTML 文档结构标签不是“换个名字的 div”，用错就等于主动放弃可访问性、SEO 和长期维护性。
哪些标签属于文档结构语义标签
真正参与页面骨架定义、有明确逻辑含义的标签只有这几个：<header></header>、<nav></nav>、<main></main>、<article></article>、<section></section>、<aside></aside>、<footer></footer>。它们不是装饰，浏览器和辅助技术会按规范解析其作用。
常见误判：
<div> 和 <code><span></span>永远不算结构语义标签，哪怕加了class="header"-
<h1></h1>~<h6></h6>是内容层级标签，不参与文档区块划分 -
<figure></figure>、<time></time>、<mark></mark>属于内容语义，不是结构语义 -
<header></header>：必须是某个“区块”的头部，可以嵌套使用；比如<article></article>内部也可以有<header></header>（含标题+作者+时间） -
<nav></nav>：只用于“主要导航链接集合”，面包屑、页脚链接、分页按钮都不算；一个页面可以有多个<nav></nav>，但需用aria-label区分用途 -
<main></main>：整个页面只能出现一次，且不能嵌套在<article></article>、<aside></aside>、<header></header>、<footer></footer>、<nav></nav>内部 -
<article></article>：内容必须能独立存在、被重用或聚合（如 RSS），一篇博客、一条新闻、一个用户评论都符合；但“公司介绍”“服务列表”这类站点级内容通常用<section></section> -
<section></section>：必须有主题，且应配<h2></h2>~<h6></h6>标题；纯样式分隔、无逻辑主题的“区块”仍该用<div> <h3>容易被忽略的嵌套与兼容性问题</h3> <p>结构标签之间不是随便套的，错误嵌套会让屏幕阅读器跳过内容，或让搜索引擎降权。</p> <ul> <li> <code><main></main>不能作为<article></article>的子元素——<article></article>自带隐式主内容语义 -
<aside></aside>必须与父级内容相关；放在下一级的“全局侧边栏”，其实更接近<section></section>+ 视觉定位 - 旧版 Safari（≤13.1）和 IE 不识别这些标签的语义，但不影响渲染；若需兼容，可用
document.createElement('article')激活（仅针对极老项目） - 所有结构标签默认是块级元素，但不要依赖它做布局——
<main></main>里直接写浮动或 Flex 子项没问题，但别用display: inline覆盖其语义流
每个结构标签的真实使用边界
语义标签的判断依据是内容功能，不是视觉位置或设计稿分区。
最常被绕过的点：语义标签不解决样式问题，也不替代 CSS 架构决策。一个 <section></section> 可以对应 BEM 的 .section--features，也可以对应原子类 flex-col gap-4 p-6——语义和样式必须解耦，否则很快就会为了“看起来像 sidebar”而硬塞 <aside></aside> 进错误上下文。
