HTML5允许多个h1，但必须分属逻辑独立的语义区域（如、或模态框），否则会导致语义冲突；每个h1须有明确节区包裹和结构意图，避免平铺DOM中并列出现。
HTML5 允许多个 h1，但前提是它们分属逻辑独立的语义区域（如不同 <section></section>、<article></article> 或模态框），而非在同一个内容上下文中并列出现。真正导致混乱的，不是“多个 h1”本身，而是缺乏明确的语义边界和结构意图。
确保每个 h1 都有清晰的所属节区
浏览器和辅助技术依赖 HTML5 的“大纲算法”来理解标题归属。如果多个 h1 出现在没有包裹 <section></section>、<article></article> 或 <aside></aside> 的平铺 DOM 中，它们会被视为同级主标题，造成语义冲突。
- ✅ 正确：每个 h1 包在自己的
<section></section>内，并配有恰当的 h2–h6 子标题 - ❌ 错误：连续写两个 h1，中间无语义容器，也无视觉或逻辑分隔
- ⚠️ 注意：
<section></section>必须有可感知的语义——通常需配 h2–h6，否则它和<div> 无实质区别 <h3>动态内容场景下统一控制 h1 来源</h3> <p>单页应用（SPA）或模板系统中，重复 <strong>h1</strong> 最常源于布局文件硬编码 + 页面组件再输出一个。这会让 DOM 中始终存在两个 <strong>h1</strong>，且内容不一致。</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill10246" title="HTML Text Extract"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20dee630206.jpg" alt="HTML Text Extract" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill10246" title="HTML Text Extract">HTML Text Extract</a> <p>从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。</p> </div> <a href="/xiazai/skill10246" title="HTML Text Extract" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <ul><li>Layout 文件中移除 <strong>h1</strong>，改用 <code><header role="banner"></header>或纯<div class="logo"> <li>由具体页面组件负责渲染唯一 <strong>h1</strong>，并通过框架能力同步更新（如 Next.js 的 <code>generateMetadata、Vue 的useSeoMeta） - 路由切换后，用
useEffect（React）或onMounted（Vue）确保 DOM 中的 h1 文本实时准确 - Lighthouse 的 “Heading order” 审查项会直接标红提示
- Chrome DevTools → Accessibility 面板中查看“Heading levels should only increase by one”警告
- 命令行快速检查：
curl -s URL | grep -o '<h sort> 查看是否意外出现多个 <strong>h1</strong></h> - 屏幕阅读器实测：用 NVDA 或 VoiceOver 导航标题列表，确认是否出现两个“一级标题”并列
- 文章页：h1 = 文章标题；h2 = 小节标题；h3 = 子小节
- 仪表盘页：h1 = “销售数据总览”；各数据模块用
<section></section>+ h2 标识 - 避免为“视觉强调”而滥用 h1 —— 字号、颜色、间距交给 CSS
用工具验证结构是否合理
不能仅凭“没报错”就认为结构安全。跳级、多 h1、无节区包裹等，都会被可访问性工具识别为问题。
立即学习“前端免费学习笔记（深入）”；
优先考虑“一个主 h1 + 结构化子标题”的稳健方案
除非明确需要嵌入式、可复用、可分发的内容片段（如帮助卡片、微文档），否则多数页面无需多个 h1。一个精准表达页面核心主题的 h1，配合层级分明的 h2–h4，更利于 SEO、维护与无障碍支持。
