真正结构化且广泛支持的HTML5标签是<header>、<nav>、<main>、<article>、<section>、<aside>、<footer>，它们定义文档大纲；<article>用于可独立分发内容，<section>仅表主题区块；<main>全局唯一且不得嵌套于其他结构标签内。
哪些 HTML5 标签真正算“结构化”且被浏览器和屏幕阅读器广泛支持
只有具备明确文档大纲语义、能被 document.body.innerHTML 解析为独立节（sectioning content）的标签，才算真正意义上的 HTML5 结构标签。浏览器原生支持的仅限：<header>、<nav>、<main>、<article>、<section>、<aside>、<footer>。像 <div> 或 <span> 不在其中；<hgroup> 已被废弃，<time> 属于内联语义标签，不算结构标签。
<section> 和 <article> 的核心区别在哪
关键看内容是否「可独立分发或复用」：<article> 必须能脱离当前页面单独存在（如博客正文、新闻稿、评论），而 <section> 仅表示一个主题区块，依赖上下文（如「产品特性」「用户反馈」这类页面内分组）。误用会导致大纲混乱——例如把多个新闻摘要包进一个 <section>，屏幕阅读器会将其视为单个不可拆分单元。
-
<article>内部可嵌套<header>、<footer>，甚至其他<article>（如评论嵌套） -
<section>应有明确的<h2>–<h6>标题，否则语义弱化，部分辅助技术可能忽略 - 不要用
<section>替代<div>做样式布局——它不提供任何视觉样式，只影响大纲和 ARIA 角色
<main> 的使用限制和常见错误
<main> 在整个文档中**只能出现一次**，且不能是 <article>、<aside>、<footer>、<header>、<nav> 的子元素。很多项目把它当“主内容容器”乱套，结果导致无障碍工具报错或 SEO 识别失败。
- 错误写法：
<header><main>...</main></header>
（<main>不能在<header>内） - 错误写法：
<article><main>...</main></article>
（<main>不能嵌套在<article>中） - 正确位置：紧贴
<body>下，与<header>、<nav>、<footer>并列 - 若页面含多个独立内容流（如仪表盘），应优先用
<article>或<section>，而非多个<main>
为什么 <nav> 不等于「所有导航链接」
<nav> 专指页面级主导航（如顶部菜单、侧边全局导航、页脚站点地图），不是每个链接组都要套它。面包屑、文章内跳转锚点、分页控件、版权声明里的链接，都不属于 <nav> 范畴。
立即学习“前端免费学习笔记（深入）”；
- 面包屑推荐用
<ol>+<li>+aria-label="breadcrumb"，更准确表达层级关系 - 分页链接可用
<nav aria-label="pagination">，但需确保它是整站统一的翻页逻辑，而非单篇文章内的章节跳转 - 误用后果：屏幕阅读器连续播报多个
<nav>，用户无法快速定位真正重要的导航区
语义标签的价值不在“看起来更规范”，而在 DOM 大纲生成、键盘焦点顺序、屏幕阅读器播报层级和搜索引擎内容权重分配。一旦嵌套错位或滥用，反而比纯 <div> 更难调试——尤其是 <main> 缺失或重复时，Lighthouse 无障碍检测会直接标红，且无法通过 CSS 修复。
