<main>标签必须唯一且不得嵌套在<header>、<nav>、<footer>、<aside>中，否则浏览器和爬虫会忽略第二个<main>或报错；它可包含自身<header>和<footer>，但多个独立内容应使用<article>而非多个<main>。
main 标签必须唯一且不能嵌套在 header/nav/footer 中
浏览器和爬虫会直接忽略第二个 <main>，甚至报 warning；SEO 工具可能丢弃被错误嵌套的 <main> 内容。常见错误是把整页包装进 <header> 后，又在里面塞一个 <main>——这等于告诉搜索引擎：“核心内容在页眉里”，逻辑崩坏。
-
<main>只能出现一次，且不能作为<header>、<nav>、<footer>、<aside>的子元素 -
<main>可以包含自己的<header>和<footer>（比如文章标题和发布时间） - 若页面有多个独立内容块（如首页含三篇推荐文章），用
<article>包裹每篇，而非多个<main>
标题层级必须与语义容器对齐，否则可读性分值反降
搜索引擎和 Lighthouse 等工具会交叉验证 <h1>～<h6> 与语义标签的嵌套关系。错配时不仅不加分，还会触发“结构混乱”警告。
-
<main>内部第一个标题必须是<h1>（代表页面主旨），不能是<h2> - 每个
<section>或<article>应以<h2>起始，子级用<h3>～<h6>，严禁跳级（如<h2>后直接<h4>） -
<header>里的<h1>是站点级标题；<article><header><h2>才是内容级标题——混用会导致权重误判
section 和 article 的使用边界直接影响可读性评分
很多工具（如 axe、Lighthouse）会检查 <section> 是否带标题、<article> 是否可独立分发。空 <section> 或把广告栏硬套 <article>，会被标记为“语义滥用”。
-
<section>必须有明确主题，且建议紧随一个<h2>～<h6>；纯视觉分隔不用它 -
<article>内容需满足“可脱离当前页面独立存在并被聚合”（RSS、分享、存档），博客正文、新闻稿适用，侧边推荐、用户评论不适用 -
<aside>是唯一合法包裹“非主线但相关”内容的标签，比如作者简介、延伸阅读——别用<section>冒充
嵌套顺序错乱会让可读性检测直接失败
DOM 解析器和无障碍 API 依赖标签的物理顺序匹配视觉流。CSS 位移或 flex order 造成的“源码顺序 ≠ 阅读顺序”，会导致屏幕阅读器跳过关键内容，Lighthouse 可访问性项直接扣分。
立即学习“前端免费学习笔记（深入）”；
- 语义标签必须按逻辑流书写：
<header>→<nav>→<main>→<aside>→<footer> - 避免用
display: flex或order改变语义块顺序；真要视觉调整，用grid-template-areas并保持 HTML 顺序不变 -
<nav>必须出现在<main>之前（除非是文章内导航），否则会被视为“次要导航”，权重归零
<main> 重复、<h1> 错位、<section> 无标题这三类问题。不是“用了语义标签就加分”，而是“用错一处，整块结构可信度归零”。 
