该用<article>而非<section>当内容可独立复用，如博客单篇、新闻条目；<section>仅用于主题分组且需标题；<nav>专指主要导航；<main>唯一且不可嵌套于其他语义标签内；<aside>表附属关联内容，与视觉位置无关。

什么时候该用 <article> 而不是 <section>

关键区别不在视觉，而在内容是否「可独立复用」。<article> 表示一段完整、自包含、能脱离当前页面被单独分发或聚合的内容（比如 RSS 订阅里的单条博客、新闻客户端里的一则消息）；<section> 只是主题性分组，比如「产品特性」「用户评价」这类有标题但不独立存在的区块。

常见错误：把首页的「关于我们」「服务介绍」几个模块全套 <article> —— 它们依赖上下文存在，没有独立语义价值，应改用 <section>。

• <article> 内部可嵌套 <header> / <footer>（如作者、发布时间）
• <section> 必须带 <h1>–<h6> 标题，否则语义失效
• 多个 <article> 套在同一个 <main> 里很自然；多个 <section> 套在 <article> 里也合理（如文章分章节）

<nav> 不是所有链接集合都适用

<nav> 的语义重点是「主要导航」—— 用户靠它快速跳转到站点不同区域。侧边栏的「相关文章」、页脚的「友情链接」、评论区的「回复按钮」都不算。

容易踩的坑：给轮播图下方的「上一张/下一张」按钮加 <nav>，或者把搜索结果页的分页控件整个包进 <nav>。这些属于功能控件，不是导航结构。

立即学习“前端免费学习笔记（深入）”；

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

• 真正该用 <nav> 的：主导航栏、面包屑、站内目录树、多级侧边菜单
• 辅助性链接组建议用 <div role="navigation"> 或直接保持语义中立（如普通 <ul>）
• 一个页面可以有多个 <nav>，但每个都得承担明确的导航职责

<main> 的唯一性与嵌套陷阱

<main> 在整个文档中只能出现一次，且不能是 <article>、<aside>、<header>、<footer>、<nav> 的子元素 —— 它代表的是页面最核心、不可替代的内容主体。

典型误用：在某个 <article> 内部再放一个 <main>，或者把页头广告位和正文一起塞进 <main>。

• <main> 应直接位于 <body> 下，或紧贴在 <header> 后
• 它里面可以包含多个 <article>（如列表页），也可以只有一段 <p>（如单页说明）
• 如果页面是纯工具类（如计算器），<main> 就包裹那个交互区域，而不是空着不用

<aside> 和视觉位置无关

<aside> 的语义是「与主内容关联但非必需」，不是「放在右边的盒子」。它可以出现在 DOM 任意位置，甚至放在 <article> 开头（比如术语解释框），只要逻辑上它是附属的。

很多人按 CSS 布局反推语义：看到浮动在右侧就套 <aside>，结果把主菜单栏也标成 <aside> —— 这直接破坏了导航可访问性。

• 适合 <aside> 的：作者简介、参考资料链接、广告、侧边注释、相关推荐
• 不适合的：主导航、页脚版权栏、文章标题栏
• 如果某块内容移除后，主内容逻辑断裂（比如去掉「章节概要」导致正文看不懂），那它就不该是 <aside>

语义化最难的部分不是记住标签名，而是持续判断「这段内容对用户理解整页信息是否必要」。一旦开始按这个标准去审视每个容器，<div> 就会自然退场。