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

Question

我正在制作一个 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>

Answer 1

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

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

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

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

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