时间戳

首页 > 解决方案 > Div vs Section：如何在 Nav 元素中对元素进行分组

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

问题描述

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

标签： htmlsemantic-markupsemantic-ui-react

解决方案

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

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

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

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

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

推荐阅读