<aside>标签使用混乱[重复]

Question

这个问题已经在这里有了答案：

• 为什么要使用HTML5语义标记而不是div？ [重复] 3个答案

我在这里阅读了有关<aside>标签的信息： http : //www.w3schools.com/tags/tag_aside.asp ，但无法理解此标签的真正动机。

此标记中的内容与外部标记之间的区别是什么？

我的意思是，如果内容相关但与该标签周围的内容不同，则可以使用div 。 与其他旧容器标签相比，此标签有何特别之处？ 对SEO有帮助吗？

Answer 1

在HTML5中， body所有内容都是section的一部分 。 每个部分都可以有一个header和footer 。 header / footer 没有的所有内容都可以视为该部分的主要内容。 aside元素可用于“被认为与页面主要内容分开的内容”。

如果您使用div代替aside ，则其内容不能与该article的其他“真实”主要内容分开：

<article>
  <h1>Cute cat</h1>
  <p>I like cats.</p>
  <div class="aside">
    <!-- and now for something completely different -->
  </div>
  <p>Next time, I get a dog.</p>
</article>

如果您不为该内容使用HTML5的sectioning元素，则唯一的选择是使用显式标题（这是我们在HTML 4.01中所要做的）：

<article>
  <h1>Cute cat</h1>
  <p>I like cats.</p>
  <div class="aside">
    <h2>Good cat litter boxes</h2>
    <!-- and now for something completely different -->
  </div>
  <p>Next time, I get a dog.</p>
</article>

问题：最后一个p将在h2范围内（它将开始一个新的隐式部分）。 但这p是不是猫砂盒广告，这是从之前的部分内容div 。

解：

<article>
  <h1>Cute cat</h1>
  <p>I like cats.</p>
  <aside>
    <h2>Good cat litter boxes</h2>
    <!-- and now for something completely different -->
  </aside>
  <p>Next time, I get a dog.</p>
</article>

现在很清楚该article的主要内容是：

可爱的猫
我喜欢猫。
下次，我有一只狗。

而且， aside与父节有切线关系：两者都与猫有关，并且您只张贴了此猫砂盆广告，因为您在article写了关于猫的article 。

用户代理可以使用此信息进行各种操作。 搜索引擎可能会降低该内容的相关性（如果或哪个服务提供的是不同的问题，可能在SO上是不合时宜的），浏览器可能会将其显示为侧边栏，提取器可能会忽略它们，屏幕阅读器可能会在阅读主要内容时跳过它们内容等