Question

我在这里阅读<aside>标记：http://www.w3schools.com/tags/tag_aside.asp，但无法理解此标记的真实动机。

此标记中的内容与外部内容有何区别？

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

Answer 1

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

如果您使用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的分区元素，唯一的选择是使用显式标题（这是我们在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写了关于猫的文章。

用户代理可以使用此信息执行所有类型的操作。搜索引擎可以降低该内容的相关性（如果或哪些服务是一个不同的问题，可能是关于SO的偏离主题），浏览器可以将这些显示为侧边栏，提取器可以忽略它们，屏幕阅读器可以在阅读主要内容时跳过它们内容等。

<aside>标记用法混淆</aside>

1 个答案: