<main>必须且只能作为<body>的直接子元素，否则会破坏HTML5大纲算法，导致SEO失效、屏幕阅读器误读及Lighthouse评分下降。
<main></main> 必须且只能出现一次，且是 的直接子元素；否则 SEO 和屏幕阅读器会降级识别，Lighthouse 评分直接受损。
为什么 <main></main> 放错位置会导致 SEO 失效
搜索引擎和辅助技术依赖 HTML5 outline algorithm（大纲算法）解析页面主干。一旦 <main></main> 被包裹在 <div>、<code><section></section> 或嵌套在 <header></header> 里，它就失去 landmark（地标）语义，变成普通容器。
常见错误现象包括：
- NVDA 报告 “multiple main landmarks” 或完全跳过
<main></main> - Google Search Console 显示结构化数据缺失“mainContentOfPage”字段
- Lighthouse 的 “Best Practices” 和 “Accessibility” 分数掉档
<section></section> 和 <article></article> 到底该用哪个
关键区别不在视觉，而在内容是否可独立分发与复用。
立即学习“前端免费学习笔记（深入）”；
<article></article> 表示完整、自包含、能脱离上下文存在的单元（如一篇博客、一条新闻、一个用户评论卡片）；<section></section> 是逻辑分组，必须有标题（<h2></h2>–<h6></h6>），且不能脱离父级语境存在。
实操建议：
- 产品列表页中每个商品卡片 → 用
<article></article>（可 RSS 订阅、可单独分享） - 首页的「关于我们」「服务流程」「客户案例」三个模块 → 每个都用
<section></section>，且内部带<h2></h2> - 没有标题的
<section class="grid-container"></section>→ 直接换为<div>，避免语义污染 <h3>导航、侧边栏、页脚这些区域能不能嵌套使用</h3> <p>可以，而且推荐——但必须遵守角色隔离原则。</p> <p><code><nav></nav>只放导航链接，不塞搜索框、登录入口或广告；<aside></aside>放补充信息（如相关文章、术语解释、作者简介），不放主导航或核心功能入口；<footer></footer>不是“页面底部”的 CSS 定位概念，而是语义终点，可出现在<article></article>内部（比如单篇文章末尾的版权与更新时间）。容易踩的坑：
- 把整个网站顶部区域包进一个
<header></header>，再在里面塞<nav></nav>+<form></form>+<aside></aside>→ 违反<header></header>的“介绍性内容或导航区”本意 - 在
<main></main>外写第二个<header></header>（比如侧边栏顶部）→ 应改用<div role="banner"> 或直接 <code><h2></h2>，避免干扰大纲 -
<footer></footer>里放<nav></nav>→ 错误，页脚导航应仍用<nav></nav>，但需加aria-label="页脚导航"明确作用域
最常被忽略的一点：语义标签不是“写了就有效”，浏览器和爬虫只认原生标签名和嵌套关系，class 名、CSS 样式、JS 注入都无法补救结构错误。哪怕视觉上一模一样，
<div class="main"> 和 <code><main></main>在无障碍与 SEO 层面是完全不同的东西。 - 把整个网站顶部区域包进一个
