< aside& gt;标签使用混乱 [英] <aside> tag usage confusion

问题描述

我在这里了解了< aside> 标记: http://www.w3schools.com/tags/tag_aside.asp ，但无法了解此标签的真正动机.

I read about <aside> tag here: http://www.w3schools.com/tags/tag_aside.asp, but unable to understand the real motive of this tag.

此标签中的内容与外面的内容有什么区别?

What is the difference between a content in this tag and the one outside?

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

I mean if content is related but different than content surrounding this tag, then div can be used. What is special about this tag in comparison to other old container tags? Is it helpful in SEO?

推荐答案

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

In HTML5, everything in body is part of a section. Every section can have a header and a footer. Everything not in header/footer can be considered the main content of that section. The aside element can be used for "content that is considered separate from the main content of the page".

如果您要使用 div 而不是 aside ，则其内容不能与该 article :

If you’d use div instead of aside, its content couldn’t be separated from the other, "real" main content of that 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中所要做的):

If you wouldn’t use HTML5’s sectioning elements for that content, the only alternative would be to use explicit headings (this is what we would have to do in 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 之前的内容的一部分.

Problem: the last p would be in scope of the h2 (which starts a new implicit section). But this p isn’t about the cat litter box advertisement, it’s part of the content from before the 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>

现在很明显，该文章的主要内容是什么:

Now it’s clear which is the main content of that article:

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

Cute cat
I like cats.
Next time, I get a dog.

并且 aside 与父节有切线关系:两者都是关于猫的，并且您只张贴了此猫砂盆广告，因为您在该文章.

And the aside is tangentially related to the parent section: both are about cats, and you only posted this cat litter box advertisement because you a writing about cats in that article.

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

User agents could do all kind of stuff with this information. Search engines could lower the relevance of that content (if or which services do that is a different question and probably off-topic on SO), browsers could display these as sidebars, extractors could ignore them, screen readers could skip them when reading the main content, etc.

这篇关于< aside& gt;标签使用混乱的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！