从容!早间攻克 HTML 语义标签差异题，面试稳拿高分

技术教程gslnedu2025-05-13 20:42:421A⁺A^-

亲爱的前端伙伴们，迎着清晨的微风翻开这篇文章，就像开启一场轻松的知识漫游。面试时那些让人紧张的 HTML 语义标签问题，其实没那么可怕。今天咱们不紧不慢，泡杯热茶，一起拆解这道高频考题，让知识随着晨光悄悄 “爬” 进脑袋～

面试题：<article>、<section>和<div>这三个标签有什么区别，实际开发中该怎么选择？

不少人在面试时，面对这道题容易陷入 “好像知道，但又说不清楚” 的尴尬。别担心，咱们把它们比作生活中的 “收纳小能手”，一下子就能理解它们的不同之处。

<div>：万能收纳盒

<!-- div就像家里的万能收纳箱，没有特定含义，单纯用来划分区域 -->
<div class="container">
<div class="header">
<h1>我的网站</h1>
</div>
<div class="content">
<p>这里是页面的主要内容</p>
</div>
<div class="footer">
<p>版权信息</p>
</div>
</div>

<div>标签就像一个没有标签的收纳盒，它没有任何语义，只是单纯用来划分页面区域。在早期的网页开发中，<div>被大量使用来搭建页面结构。但它的缺点也很明显，如果过度使用，会让代码结构变得混乱，就像把所有东西都一股脑塞进一个大箱子，找起来特别费劲。对于搜索引擎和屏幕阅读器来说，也很难理解这些区域的具体含义。

<section>：主题分类盒

<!-- section用于划分具有相似主题的内容区域 -->
<section>
<h2>热门文章</h2>
<article>
<h3>前端面试技巧分享</h3>
<p>今天和大家聊聊前端面试的那些事儿...</p>
</article>
<article>
<h3>CSS布局新趋势</h3>
<p>快来看看最新的CSS布局方法...</p>
</article>
</section>

<section>标签就像是按主题分类的收纳盒，它用来划分具有相似主题的内容区域。比如一个博客页面，你可以把不同类别的文章用<section>分开，每个<section>都有自己的标题，让内容结构更加清晰。但要注意，<section>里的内容应该是有一定关联的，不能随便把不相关的内容放进去。

<article>：独立内容盒

<!-- article用于包含独立、完整的内容，可单独拿出来发布 -->
<article>
<h3>JavaScript的奇妙世界</h3>
<p>JavaScript作为前端开发的核心语言，有着许多有趣的特性...</p>
<p>今天我们就来探索一下它的奥秘...</p>
</article>

<article>标签就像装着独立故事的收纳盒，它里面的内容必须是独立、完整的，并且可以单独拿出来发布。比如一篇博客文章、一则新闻报道，都适合用<article>来包裹。它比<section>的独立性更强，是一个可以自给自足的 “小单元”。

面试回答范本

“面试官您好！<div>就像家里的万能收纳箱，没有特定含义，就是用来划分区域，以前用得很多，但现在如果过度使用，代码会变得乱糟糟的。<section>像是按主题分类的收纳盒，用来把相关的内容放在一起，让页面结构更清晰。<article>则是装着独立故事的收纳盒，里面的内容必须是完整独立的，比如一篇文章或者一个帖子。在实际开发中，我会根据内容的性质来选择，如果只是单纯划分区域就用<div>；如果是有主题的内容集合就用<section>；要是独立的内容，像博客文章，就用<article>。这样能让代码语义更明确，也方便后续维护和搜索引擎理解。”