HTML语义化标签article、section、aside、nav到底该怎么选？真实使用场景对比

在HTML5中，语义化标签的目的是让文档结构更清晰，便于浏览器、搜索引擎和辅助技术理解页面内容。article、section、aside和nav是最常用也最容易混淆的一组，下面通过真实场景说明各自该怎么用。

article：独立完整的内容单元

当一个内容块在脱离页面上下文后依然有意义，比如一篇新闻、一则用户评论、一个商品卡片，就应该用<article>包裹。它内部可以嵌套section或甚至另一个article。

<article>
  <h2>如何学习前端</h2>
  <p>这是一篇独立文章，可以单独分发。</p>
  <section>
    <h3>第一步</h3>
    <p>了解HTML语义化。</p>
  </section>
</article>

section：按主题划分的内容区块

section用于对页面或article内部做逻辑分块，通常带有标题。如果一块内容只是单纯为了样式布局，不建议用section，用div即可。

<section>
  <h2>课程介绍</h2>
  <p>本板块介绍课程内容。</p>
</section>

aside：附属或侧边内容

aside表示和主内容弱相关的内容，如侧边栏、广告、参考资料。它可以放在article外作为全站侧栏，也可放在article内作为文内注释。

<aside>
  <h3>相关推荐</h3>
  <ul>
    <li>CSS布局技巧</li>
    <li>JS基础</li>
  </ul>
</aside>

nav：导航链接集合

nav专门用于放置主要导航，如顶部菜单、面包屑、分页。不是所有链接组都要用nav，比如页脚的一堆友情链接一般用普通列表即可。

<nav>
  <ul>
    <li><a href="https://ipipp.com/home">首页</a></li>
    <li><a href="https://ipipp.com/about">关于</a></li>
  </ul>
</nav>

对比总结

实际开发中，应先想清楚内容的语义角色，再选标签。避免用section代替div做纯样式容器，也别把全部内容塞进article。合理使用这四个标签，页面结构会清晰很多。

HTML语义化articlesection_aside_nav修改时间：2026-07-28 20:45:47