最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
HTML如何区分内容主次_HTML main标签使用规范【教程】
时间：2026-07-21 17:03:48 编辑：袖梨 来源：一聚教程网
<main>标签必须且只能出现一次，用于标识页面唯一、独立、与主题直接相关的主要内容区域；它不可嵌套于<header>、<footer>等分区元素内，否则会导致屏幕阅读器跳转失效、无障碍检测报错及SEO降权。
一个页面只能有一个 <main></main>，且它必须包裹「当前页面唯一、不可复用的核心内容」——不是视觉上居中那块，也不是最重要的那块，而是去掉导航、页眉、页脚、侧边栏后剩下的那部分。
为什么多个 <main></main> 会出问题
屏幕阅读器（如 NVDA、VoiceOver）把 <main></main> 当作“跳转到主要内容”的唯一快捷键入口。出现两个以上，工具会忽略全部或随机选一个，用户直接卡在导航里出不来。Lighthouse 和 axe 等无障碍检测工具会报 duplicate-main 错误，但浏览器 DevTools 不会警告，容易被忽视。
- SPA（React/Vue）项目里，常见错误是每个路由组件都写一个
<main></main>，实际应只由最外层 Layout 或 App 组件包裹一次 - 服务端渲染（SSR）时若模板拼接出多个
<main></main>，SEO 会降权——搜索引擎认为语义混乱，降低主内容可信度 - 即使加了
aria-hidden="true"也无效，规范不承认这种“隐藏绕过”
<main></main> 能不能嵌套在 <header></header> 或 <footer></footer> 里
不能。HTML5 规范明确定义：<main></main> 不能是 <header></header>、<footer></footer>、<nav></nav>、<aside></aside> 的后代元素。哪怕视觉上它“看起来在页脚上方”，结构上也必须平级于它们，且都在 直接子节点位置。
- 错误写法：
<header><main>...</main></header>—— 屏幕阅读器可能完全跳过该<main></main> - 正确顺序：必须是
<body><header>...</header><main>...</main><footer>...</footer></body> - 如果某区块（比如弹窗、卡片）需要语义化主内容，用
<section>+role="region"+aria-labelledby替代，而不是硬塞<main></main>
<main></main> 和 <div id="main"> 有什么实质区别
区别不在样式或布局，而在机器可读的语义权重。浏览器和辅助技术不解析 class 或 id 名称，<div id="main"> 对它们来说和 <div> 完全一样；而 <main></main> 是原生语义标签，触发明确的 DOM 角色（role="main"），无需额外 ARIA 补充。
立即学习“前端免费学习笔记（深入）”；
- SEO 层面：
<main></main>内容会被搜索引擎赋予更高相关性权重，尤其在标题、段落、列表等配合使用时 - 可访问性层面：支持
main的读屏软件能一键跳转；<div id="main">必须手动加role="main"才等效，且易遗漏 - 维护成本：
<main></main>本身已含语义，不需要重复写class="main-content"或维护 CSS 命名一致性
最容易被忽略的一点：判断某块内容该不该放进 <main></main>，别看它在页面上占多大位置，而要问——“如果我把这块复制粘贴到另一个网站，它还能独立成立吗？” 如果答案是否定的（比如带面包屑、带全局搜索框、带底部版权行），那就得切掉再放。
相关文章
- 解压找茬烧脑 游泳健将找到最优秀的游泳运动员通关攻略 07-31
- 崩坏：星穹铁道千冶 刃技能解析及加点推荐 07-31
- 《解压找茬烧脑》偷喝奶茶通关秘籍 07-31
- 崩坏：星穹铁道千冶-刃核心定位 07-31
- 《解压找茬烧脑》跨栏女神助力运动员加速跨栏夺冠通关攻略 07-31
- 解压找茬烧脑：妈妈洗脚给妈妈舒服的洗一次脚通关攻略 07-31