浏览器解析html时，直接子元素决定页面顶层结构，应使用等语义标签而非多个；必须唯一且不嵌套于或；仅用于可剥离的补充信息；标题层级由嵌套位置而非视觉大小决定，应唯一且避免跳级；是独立可分发单元，仅为主题分组且需配标题；通过chrome devtools的accessibility properties可验证无障碍树中的角色与层级。
看
浏览器解析 HTML 时， 的直接子元素基本就决定了整页的顶层结构。常见组合是：<header></header> + <main></main> + <aside></aside> + <footer></footer>。如果看到多个 <div> 并列在 <code> 下，说明结构没搭对——语义缺失会导致后续所有层级判断失准。
注意：<main></main> 必须且只能出现一次，且不能嵌套在 <article></article> 或 <section></section> 内；<aside></aside> 是“与当前内容相关但可剥离”的补充信息，不是所有右边栏都该用它，纯广告位更适合 <div role="complementary">。
<h3>用标题标签 <code><h1></h1>–<h6></h6> 验证内容嵌套是否合理
标题层级不是靠视觉大小决定的，而是靠嵌套位置体现逻辑归属。比如一个 <section></section> 里以 <h2></h2> 开头，那它内部的 <h3></h3> 就属于这个 section；但如果 <h3></h3> 出现在另一个 <section></section> 外、又在 <main></main> 内，它实际从属于 <main></main> 这个上下文。
-
<h1></h1>应唯一，且通常在<main></main>或<article></article>内部 - 跳级（如
<h1></h1>后直接<h3></h3>）或重复使用<h1></h1>会破坏层级可信度 - 屏幕阅读器依赖这种嵌套跳转，错层会导致导航混乱
识别 <article></article> 和 <section></section> 的嵌套边界
<article></article> 是自包含、可独立分发的内容单元（比如一篇博客、一条新闻），它内部可以有自己的 <header></header>、<footer></footer>、甚至嵌套 <section></section>；而 <section></section> 只是主题分组，没有独立性——它必须依附于父容器（如 <main></main> 或 <article></article>）才有意义。
容易踩的坑：
- 把整个页面包进一个
<section></section>：错，这等于没用语义标签 - 在
<article></article>外写<h2></h2>然后在里面又写<h2></h2>：逻辑断裂，外部<h2></h2>应降为<h3></h3>或更高层级 -
<section></section>没配标题（<h2></h2>–<h6></h6>）：语义不完整，搜索引擎可能忽略其区块意图
检查辅助技术如何“读”出结构：用开发者工具模拟
打开 Chrome DevTools → Elements 面板 → 右键任意语义标签 → “Inspect Accessibility Properties”，能直接看到该元素在无障碍树中的角色（role）、层级（level）、父子关系。比如 <nav></nav> 会显示 role="navigation"，<main></main> 显示 level=0，而它里面的 <h2></h2> 显示 level=2 —— 这个 level 数值就是它在当前上下文中的标题深度。
真正复杂的是混合场景：比如 <article></article> 嵌套在 <section></section> 中，而 <section></section> 又在 <main></main> 里。这时 <article></article> 内的 <h2></h2> 实际 level 是 2，但它的语义权重由三层嵌套共同决定。人眼难判，工具一目了然。
