语义化不是加标签就完事，而是用对的标签表达对的结构关系——错用<section>比不用还糟，<main>多于一个会破坏可访问性，<nav>套在次要链接里反而干扰屏幕阅读器；<article>用于可独立分发的内容（如博客、新闻、评论），<section>用于有标题的主题子块（如“关于我们”“服务流程”）；<main>必须唯一且不嵌套于<article>、<aside>、<nav>或<header>内；<nav>仅适用于主要导航路径，非所有链接集合；嵌套须遵循树状逻辑，避免层级混乱。
直接说结论：语义化不是加标签就完事，而是用对的标签表达对的结构关系——错用 <section> 比不用还糟，<main> 多于一个会破坏可访问性，<nav> 套在次要链接里反而干扰屏幕阅读器。
什么时候该用 <article> 而不是 <section>
关键看内容是否「可独立分发」：一篇博客正文、一条新闻、用户评论，都算独立内容单元，适合用 <article>；而「关于我们」「服务流程」「客户案例」这类有主题但不独立的区块，用 <section> 更准确。
-
<article>内部可以嵌套<header>、<footer>（比如带发布时间的<time>），甚至嵌套其他<article>（如评论嵌套回复） -
<section>必须有视觉或逻辑上的标题（<h2>–<h6>），否则它和<div>没本质区别 - 常见错误：把轮播图容器、表单区域、页脚链接组硬套
<section>——它们没主题，只是样式容器，该用<div>
<main> 的唯一性与隐藏陷阱
<main> 不是“主要内容区”的模糊概念，而是 WAI-ARIA 定义的「页面唯一主内容流」。浏览器和屏幕阅读器靠它跳过重复导航直达核心。
- 每个页面 DOM 中只能有一个
<main>，且不能嵌套在<article>、<aside>、<nav>或<header>里 - 如果用了
<main>，又在它外面放了正文段落（比如<p>直接挂在<body>下），那些段落会被视为「不属于主内容」，SEO 和可访问性都会打折 - SPA 应用中容易出错：路由切换时没销毁旧
<main>或重复插入新<main>，可用 DevTools 的 Accessibility 面板实时检查
<nav> 不等于「所有导航链接」
<nav> 是为「主要导航路径」设计的，比如主导航栏、面包屑、文章内目录（toc）。次要链接组——如页脚版权旁的「隐私政策」「联系我们」，不该塞进 <nav>。
立即学习“前端免费学习笔记（深入）”；
- 搜索引擎和屏幕阅读器会把
<nav>当作网站结构锚点，过多或错用会让它们误判站点层级 - 一个页面可以有多个
<nav>（比如顶部主导航 + 文章内目录），但每个都必须承载明确的导航意图 - 避免嵌套：不要在
<nav>里再包一层<nav>，也不要用<nav>包裹搜索框或登录入口——它们不是导航
嵌套逻辑比标签数量更重要
语义化结构是树状的，不是扁平堆砌。比如一个博客列表页，典型正确嵌套是：<main> → <article> × N → 每个 <article> 内含 <header>（含 <h2> 和 <time>）、<p> 正文、<footer>（含分类/标签）。
- 禁止反模式：
<section>套<article>套<section>套<article>——这会让辅助技术迷失层级 -
<aside>只能出现在<article>或<section>内部，才表示「与当前内容相关但可分离」；放在<main>顶层，就变成干扰主内容的噪音 - 最易被忽略的一点：语义标签本身不带默认样式，但某些浏览器对
<main>或<aside>有微弱的 outline 或 focus 样式，上线前务必用 DevTools 检查 tab 键导航流是否自然
