应优先使用语义化标签而非div：article用于可独立分发的内容，section用于有标题的逻辑区块，main为唯一主要内容容器且内部标题自成体系，header和nav需满足特定内容条件，图片、时间、代码等须用对应语义标签补全。

<article> 不是“看起来像文章”的容器，而是“能独立分发、复用”的内容单元；<section> 也不是“视觉上分块”的盒子，而是有明确主题和标题的逻辑区块。用错一个，文档大纲就断一层。

怎么判断该用 <article> 还是 <section>

关键看这块内容能不能脱离当前页面被理解、抓取或重用：

• <article>：博客正文、新闻稿、微博卡片、商品详情页——单独保存为文件，RSS 订阅器能识别、屏幕阅读器会播报为“一篇独立文章”
• <section>：文章里的“安装步骤”“常见问题”“代码示例”——必须依附于父级上下文才有意义，没标题就别硬套
• <div>：纯布局包裹、CSS 定位需要、无语义需求（如 <div class="grid-item">）——别为了“看起来整齐”强行语义化

<header> 和 <nav> 的使用边界在哪

不是所有顶部区域都叫 <header>，也不是所有链接集合都能塞进 <nav>：

• <header> 可以出现在 <body>（页面级）或 <article> 内部（内容级），但必须含标志性内容：主标题、作者、发布日期、编辑按钮等
• <nav> 只用于主导航（首页/产品/关于/联系）、跳转到站内其他核心页面的链接组；页脚导航、相关文章链接、面包屑都不算 <nav>
• 错误示例：<nav><a href="#">点击查看更多评论</a></nav> ——这不是导航，是操作入口，用 <footer> 或普通 <p> 更合适

标题层级和 <main> 的强制约束

<main> 是页面唯一性标签，且它直接决定了标题嵌套的起点：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

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

• 每个 HTML 文档中只能有一个 <main>，不能嵌套，也不能出现在 <article> 或 <section> 内部
• <main> 内第一个标题应为 <h1>（哪怕页面已有 <h1> 在 <header> 中）——因为 <main> 定义的是“主要内容起始点”，其内部标题需自成体系
• 滥用 <h2> 做样式分隔线？立刻换成 <hr> 或 CSS border；用 <h3> 标注小图标旁文字？那是 <span> + ARIA，不是标题

容易被忽略的细节：图片、时间、代码的语义补全

语义化不止在结构标签，更藏在细节里：

• <img> 必须带 alt 属性：描述图像内容（非“图片”“logo”），纯装饰图写 alt=""，别留空或删掉
• 发布时间、更新时间统一用 <time datetime="2026-08-25">2026年8月25日</time>，而不是 <span> 或 <p>
• 代码片段必须用 <code> 包裹，行内变量用 <var>，键盘输入用 <kbd>；<pre> 只负责保留格式，不替代语义
• 引用他人内容，大段用 <blockquote> + cite 属性，行内用 <q> ——别再通篇 <p> 加引号了

最常出问题的地方，往往不是不会写 <article>，而是把 <section> 当 <div> 用，或者让 <nav> 承担了本该由 <button> 或 <a> 完成的交互职责。语义标签不解决样式，但一旦写错，后续所有 CSS 选择器、JS 查询、SEO 索引、屏幕阅读器播报都会跟着偏移——它不是“锦上添花”，是 DOM 结构的地基。