<aside> 侧边栏中的 <section> 和 <div> 之间的区别 [重复]

Posted 2023-03-03

【中文标题】<aside> 侧边栏中的 <section> 和 <div> 之间的区别 [重复]

【英文标题】：Difference between <section> and <div> in <aside> sidebar [duplicate]

【发布时间】：2017-01-07 01:12:30

【问题描述】：

我发现有两种方法可以标记侧边栏：

<aside id="sidebar">
    <section id="widget_1"></section>
    <section id="widget_2"></section>
    <section id="widget_3"></section>
</aside>

和

<aside id="sidebar">
     <div class="widget" id="widget_1"></div>
     <div class="widget" id="widget_2"></div>
     <div class="widget" id="widget_3"></div>
 </aside>

请告诉我这两种方法有什么区别以及必须使用哪一种？

【问题讨论】：

在上述帖子中，您的问题有一个非常可靠的答案：***.com/a/6941170/1089331 – 注意：这不是公认的答案。语义是区别，我个人使用<widget class="widget" id="widget_1">。您不需要需要在另一个上使用其中一个（在这种情况下）。

谢谢兄弟，是的，我已经阅读了那篇文章。它涵盖了所有可能的方面，但我只关心侧边栏

【参考方案1】：

您所做的最大功能差异是<section> 和<div> 之间的语义差异。 <div> 没有语义含义，将其用于样式、分隔、添加自己的类和 id 等等。另一方面，<section> 元素通常应该在其中包含标题，或者至少在文档大纲中获得一个条目。

在这种情况下，我建议从 <div> 开始，尤其是在 <aside> 元素内。

【参考方案2】：

部分通常指定相关的信息组 - 而 div 标签并没有真正指定任何内容，通常用作子元素:)

如果您想阅读更多内容，可以查看this answer，我认为它涵盖了它。

要回答您的问题，任何一个都可以 - 它更多的是一种风格选择，以及您希望如何组织您网站上的信息。

【讨论】：

所以要设计小部件，我们必须始终使用部分对吗？？

就我个人而言，我使用<div> 标签——因为小部件并不真正符合分组信息的条件。如果您的 css 指定 div.widget_1 或 section.widget_1 您将需要使用所使用的任何一个。否则，如果 css 看起来像 .widget_1\\css 这取决于你。