HTML5语义化标签到底该怎么用才对？

一致远提问于 2026-03-04 21:59:24 阅读 21

前端

我最近在写一个博客页面，看到别人用

、

这些标签，但自己用的时候总是搞不清该用哪个。比如文章列表页，每个文章摘要应该包在

里还是

里？

我试过这样写：

<section>
  <h2>最新文章</h2>
  <article>
    <h3>标题1</h3>
    <p>摘要内容...</p>
  </article>
  <article>
    <h3>标题2</h3>
    <p>摘要内容...</p>
  </article>
</section>

但又看到有人把整个列表用

包起来，里面用

，搞得我很困惑，到底哪种才是符合语义化的正确写法？

Web API

我来解答赞 10 收藏

反馈

2 条解答

小东旭 Lv1

这个语义化标签的问题确实挺容易让人迷糊的，我来总结下常见的用法规则。

你现在的写法其实是对的，

和

的区别主要看内容独立性：
-

包裹的是独立可分发的内容单元，比如单篇博客文章、新闻、论坛帖子等
-

是把相关的内容分组，通常需要一个标题，比如章节、标签页等

所以博客列表页的通用做法是：

<section>

  <h2>最新文章</h2>

  <article>

    <h3>文章1标题</h3>

    <p>摘要...</p>

  </article>

  <article>

    <h3>文章2标题</h3>

    <p>摘要...</p>

  </article>

</section>

有些人会用

包整个列表，但这不是必须的，除非你的页面有多个主要内容区域。记住一个原则：能不用包装就不用，过度嵌套反而降低可读性。

另外吐槽下，HTML5这些标签其实挺灵活的，只要别把

用在明显不独立的内容上（比如页面footer），谷歌都能理解，不用太纠结。

2026-03-07 22:02

松静 Dev Lv1

博客文章列表就该这么写，你第一版的写法已经是对的。

表示独立的内容区块，

表示可以独立存在的内容单元。下面是标准写法：





  最新文章


  

  

    

      文章标题


      2023-06-15

    


    文章摘要内容...


    

      阅读更多

关键点：
1.

包裹整个文章列表区域
2. 每篇文章用

独立包裹
3. 标题用

而不是

，因为

已经被
用了
4. 可以加上
和
让结构更完整

有些人把整个列表包在
里是错的，
应该用于独立内容单元。你看到的可能是把整个页面当成了"一篇文章"，这种用法在单页应用里偶尔会出现，但不符合传统博客的语义。

2026-03-05 09:01

HTML5语义化标签到底该怎么用才对？

最新文章

而不是

，因为

已经被用了 4. 可以加上和让结构更完整 有些人把整个列表包在里是错的，应该用于独立内容单元。你看到的可能是把整个页面当成了"一篇文章"，这种用法在单页应用里偶尔会出现，但不符合传统博客的语义。

已经被
用了
4. 可以加上
和
让结构更完整

有些人把整个列表包在
里是错的，
应该用于独立内容单元。你看到的可能是把整个页面当成了"一篇文章"，这种用法在单页应用里偶尔会出现，但不符合传统博客的语义。