结构清晰的语义化html关键在于标签与内容功能严格匹配：必须唯一且为直接子元素，仅用于跳转路径，须可独立分发，错配比不用更糟。
结构清晰的语义化 HTML 不靠标签数量，而靠标签与内容功能是否严格匹配——header 就得是页头，nav 就得是跳转路径，main 就得是唯一核心内容区，错配比不用语义标签更糟。
一个页面只能有一个 <main></main>，且不能嵌套在 <article></article> 或 <section></section> 里
浏览器和辅助技术把 <main></main> 当作整页“唯一主内容入口”，多写一个或把它塞进 <section></section> 里，等于告诉屏幕阅读器“这里有两处核心内容”，逻辑直接冲突。
- ✅ 正确：直接放在
下，包裹文章正文、产品列表等用户真正来访问的内容 - ❌ 错误：
<section><main>...</main></section>——<main></main>的语义被稀释，SEO 和可访问性双降 - ⚠️ 容易忽略：登录框、搜索栏、面包屑不是“主内容”，它们该归
<header></header>或独立<nav></nav>管理
<nav></nav> 不是“有链接就是导航”，得看它是否提供页面级跳转路径
<nav></nav> 的本质是“路径选择器”，不是“链接容器”。页脚一堆友情链接、文章末尾的“相关推荐”，哪怕全是 <a></a>，也不该用 <nav></nav> 包裹。
- ✅ 应该用
<nav></nav>：顶部主导航、侧边栏目菜单、带 aria-label 的面包屑（如<nav aria-label="位置导航"></nav>） - ❌ 不该用
<nav></nav>：文章内超链接、作者社交账号列表、底部“关于我们｜隐私政策”纯信息链接组 - ? 性能提示：多个
<nav></nav>时必须加aria-label，否则屏幕阅读器无法区分“主导航”和“页脚导航”
<section></section> 和 <article></article> 的边界在于“是否可独立分发”
<article></article> 是自包含的、可单独提取发布的单元（比如一篇博客、一条新闻、一个用户评论）；<section></section> 是逻辑分组，依赖上下文才有意义（比如“技术方案”“性能对比”这类章节标题下的内容块）。
- ✅ 正确：
<article><h2>如何配置 Webpack5</h2>...</article>—— 这篇文章可以 RSS 推送、被其他站点引用 - ❌ 错误：
<section><h2>联系我们</h2> <p>邮箱：xxx</p></section>—— 联系方式脱离页面无意义，用<div> 或 <code><aside></aside>更准 - ⚠️ 常见坑：用
<section></section>套整个首页轮播图+服务介绍+客户评价——这其实是多个语义区块，应拆成<header></header>、<main></main>、<section></section>、<footer></footer> - ✅ 必须写：
nav { display: flex; gap: 1.5rem; }，header { display: flex; justify-content: space-between; } - ❌ 别依赖：
<nav></nav>在 Chrome 里有 1em margin，在 Safari 可能只有 0.8em —— 统一用* { margin: 0; padding: 0; box-sizing: border-box; }清底 - ? 关键提醒：用 Flexbox 或 Grid 控制布局时，别把语义和样式混绑。例如不要给
<aside></aside>写width: 30%;，而是用父容器的display: grid;+grid-template-columns分配空间
CSS 不该为语义标签预设样式，但必须显式控制布局行为
HTML5 标签本身不带视觉含义，<nav></nav> 不会自动横排，<main></main> 不会自动占满宽度。靠浏览器默认 margin 或幻想“语义即样式”，只会让结构在不同设备上崩坏。
最复杂的点不在标签怎么选，而在每次写标签前问一句：“这个区块如果脱离当前页面，还能被正确理解吗？”——答案决定它是 <article></article>、<section></section>，还是干脆就该回退到 <div>。</div>
