<main>必须且只能出现一次，是<body>的直接子元素，标识页面唯一核心内容；误用会导致SEO权重分散、辅助技术焦点丢失及爬虫无法识别主体。
因为不掌握语义化标签，等于没真正开始写 HTML —— 你写的不是结构，只是带样式的 div 堆砌。
为什么搜索引擎会跳过你的 <div class="article">？
爬虫不解析 class 名，它只认原生语义标签。当你用 <div class="article"> 包裹正文，爬虫看到的只是一个无意义的容器；换成 <article>，它立刻识别出这是独立、可索引的内容单元，自动提升该区块的权重。
常见错误现象：
- 页面有多个
<h1>却没有<main>，导致核心内容定位失败 - 导航栏写成
<div id="nav">，但屏幕阅读器无法通过快捷键“跳转到导航” - 用
<section>替代<article>发布博客，使单篇内容失去独立性标识
<main> 只能出现一次，但很多人在组件里重复用了
<main> 表示整个文档中唯一的核心内容区域，不是每个模块都要套一层。SPA 中常见误用：每个路由组件都包裹 <main>，结果 HTML 验证直接报错 Element main not allowed as child of element main in this context。
立即学习“前端免费学习笔记（深入）”；
使用场景判断要点：
- 整页只有一个
<main>，且必须是<body>的直接子元素（或仅被<header>/<footer>包裹） - 组件级内容应使用
<section>或<article>，而非降级复用<main> - 若页面含多个独立文章（如博客列表），每篇用
<article>，外层用<main>统一封装
无障碍访问不是“加功能”，而是靠标签本身触发
视障用户按 Ctrl+Alt+I（NVDA）或 Cmd+Option+H（VoiceOver）能直接列出所有 <header>、<nav>、<main> 区域——前提是这些标签真实存在，且没被 CSS 的 display: none 或 aria-hidden="true" 破坏语义流。
容易踩的坑：
- 用
<div role="navigation">模拟<nav>，但漏掉键盘焦点管理，导致 Tab 键无法进入该区域 - 把
<footer>放在<article>内部当“文章底部”，实际应属于文章级语义，此时该用<footer>而非全局页脚 -
<time datetime="2026-08-25">没写datetime属性，屏幕阅读器只能读出“八月二十五日”，无法解析为机器可读日期
最常被忽略的一点：语义化不是“写对标签就完事”。<section> 和 <article> 的嵌套层级一旦错乱（比如 <article> 里套 <section> 却没配标题），不仅影响辅助技术，连 Chrome DevTools 的 Accessibility 面板都会标黄警告。结构对了，语义才真正落地。
