别让 div 淹没了语义：HTML section 标签的正确打开方式

深夜改需求，对着满屏的 div 结构发呆。这种场景前端老手都懂。很多时候，我们习惯把页面当积木搭，只要样式对了就算完事。但回过头看代码，除了你自己，没人知道哪个部分是导航，哪块是核心内容。这时候，<section> 标签的价值就出来了。

很多人误以为 <section> 只是个带样式的容器，跟 div 没区别。其实不然。它是文档中具有独立主题的内容区块。 想象一下你在写书，标题是路标，而 <section> 就是具体的“章”或“节”。没有标题的 section，就像是没有目录的书页，对屏幕阅读器和搜索引擎来说，识别起来非常吃力。

这就引出了第一条铁律：除非你有非常充分的理由，否则不要在 section 内不使用标题元素。 哪怕是一个简单的 <h2>，也能帮助浏览器和用户理解接下来的内容属于什么范畴。如果一个区块只是为了设置背景色或布局对齐，老老实实用 div，别为了所谓的“语义化”去硬套 section。

经常有人纠结，那 <article> 和它咋分？这是面试和项目复盘中的高频痛点。简单拆解一下：如果这块内容单独拿出来也能成文，且独立于页面其他部分存在，那就用 article。 比如一篇博客文章、一条新闻资讯、一张完整的商品卡片。而 <section> 更多用于对同一主题下的内容进行分组。

举个实战例子：一个“常见问题解答”页面。整个 FAQ 区域是一个大的 <section>，标题叫“常见问题”。下面每一条问答，并不是 section，因为它们不能脱离这个列表单独存在，所以通常还是用 div 配合列表标签。反过来，一篇文章的正文里分成了“前言”、“核心观点”、“总结”三部分，每一部分都可以是一个 <section>，因为它们各自承载了文章的特定篇章逻辑。

另一个容易踩坑的地方是嵌套。虽然标准允许 section 内部再放 section，但不要搞得太深。当嵌套层级超过两层，说明你的信息架构可能太复杂了。 这时候应该考虑是不是该拆分页面，或者用 details / summary 组件来处理展开收起的逻辑，而不是堆砌层层包裹的语义标签。

从可访问性角度看，规范的 section 能让视障用户通过快捷键快速在不同板块间跳转。机器读取你的代码时，清晰的章节划分意味着更精准的索引权重分配。这不是玄学，是实打实的 SEO 友好度提升。爬虫在分析页面结构时，会优先关注 section 内的文本相关性，这比无差别的全局 div 抓取要高效得多。

下次新建文件前，花半分钟思考结构。少写一行没意义的 div，多一个有语义的 section，长期来看，维护成本会降低不少。代码不仅是写给机器跑的，也是写给人看的。保持结构清晰，是对自己劳动成果的最大尊重，也是对后续接手同事的基本负责。