Div vs Section：如何在 Nav 元素中对元素进行分组

Posted 2023-04-13

【中文标题】Div vs Section：如何在 Nav 元素中对元素进行分组

【英文标题】：Div vs Section: How to group elements within a Nav element

【发布时间】：2021-07-12 22:18:16

【问题描述】：

我正在制作一个 Web 组件，一个导航栏（或导航栏）。 里面有 4 个部分，标志、菜单、切换器等。

问题是，我应该为每个部分使用<div> 还是<section>？ 还是有更合适的元素类型？

插图是这样的：

<nav class="foo-navbar">
   <div class="logo"> props.logo </div>
   <div class="menus"> props.children </div>
   <div class="toggler"> props.toggler </div>
   <div class="extra"> props.extra </div>
</nav>

【参考方案1】：

这是一个很好的问题，与语义 html 相关。根据MDN，当没有其他标签真正相关或合适时，我们应该使用节标签。如果意图是一个实际的部分，那么它还应该包括一个部分标题。

HTML <section> 元素表示文档的通用独立部分，它没有更具体的语义元素来表示它。部分应始终有一个标题，只有极少数例外。

在该页面的下方，MDN 有这样的说法：

如果您只将元素用作样式包装器，请使用<div>。一个经验法则是<section> 应该在逻辑上出现在文档的大纲中。

因此，在您的情况下，因为 (a) 您没有每个导航块的标题，并且 (b) 您只是按风格对它们进行分组（如果您以大纲格式显示页面），我建议保留 div 标签。