Div vs Section：如何在 Nav 元素中对元素进行分组
Div vs Section: How to group elements within a Nav element
我正在制作一个 web 组件，一个导航栏（或 navbar）。
里面有4个部分，logo，菜单，toggler，& extra.
问题是，我应该为每个部分使用 <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>
这是一个很好的问题，并且与语义相关 HTML。根据 MDN，当没有其他标签真正相关或合适时，我们应该使用 section 标签。如果意图是一个实际部分，那么它还应该包括一个部分 header.
The HTML <section> element represents a generic standalone section of a document, which doesn't have a more specific semantic element to represent it. Sections should always have a heading, with very few exceptions.
在该页面的下方，MDN 是这样说的：
If you are only using the element as a styling wrapper, use a <div>. A rule of thumb is that a <section> should logically appear in the outline of a document.
因此，在您的情况下，因为 (a) 您没有每个导航块的 header，并且 (b) 您只是按样式对它们进行分组（导航部分不会在大纲中，如果您以大纲格式显示页面），我建议保留 div 标签。
我正在制作一个 web 组件，一个导航栏（或 navbar）。 里面有4个部分，logo，菜单，toggler，& extra.
问题是，我应该为每个部分使用 <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>
这是一个很好的问题，并且与语义相关 HTML。根据 MDN，当没有其他标签真正相关或合适时，我们应该使用 section 标签。如果意图是一个实际部分，那么它还应该包括一个部分 header.
The HTML
<section>element represents a generic standalone section of a document, which doesn't have a more specific semantic element to represent it. Sections should always have a heading, with very few exceptions.
在该页面的下方，MDN 是这样说的：
If you are only using the element as a styling wrapper, use a
<div>. A rule of thumb is that a<section>should logically appear in the outline of a document.
因此，在您的情况下，因为 (a) 您没有每个导航块的 header，并且 (b) 您只是按样式对它们进行分组（导航部分不会在大纲中，如果您以大纲格式显示页面），我建议保留 div 标签。