我应该使用<section>标签里面<aside>？

有这样的标记：我应该使用<section>标签里面<aside>？

<aside> 
    <div class="widget"> 
     <h2>Latest news</h2> 
     <ul>...</ul> 
     <a>more news</a> 
    </div> 
    <div class="widget"> 
     <h2>Choose site theme</h2> 
     <input type="select" /> 
    </div> 
    <div class="widget"> 
     <h2>Newsletter subscription</h2> 
     <form>...</form> 
    </div> 
    <div class="widget"> 
     <h2>Related articles</h2> 
     <ul>...</ul> 
    </div> 
</aside>

哪个标签是比较合适的位置：<div>或<section>？
是否应该只在<article>标签内部使用部分，从不在<aside>内？

来源

2013-10-04 Sfisioza

HTML 5规范并不禁止您在aside元素中使用section元素。 aside元素允许在其中包含流内容，并且包含section元素。

但是，即使div元素现在在HTML5中应该是“最后手段”的分段元素，但在此上下文中使用section违背了元素的意图。从我们看到的规范：

注意：section元素不是一个通用的容器元素。当仅仅为了样式或为了方便脚本而需要元素时，鼓励作者改为使用div元素。一般规则是，只有元素的内容将在文档的大纲中明确列出时，section元素才是合适的。

现在，一个小“部分”一边是绝对不会在整个文档的轮廓属于东西，所以短期回答你的问题是使用div。另外，因为你的旁边看起来像里面有四个“物品”，所以你可以考虑一个ul，其中有四个li，然后按照规则aside ul li进行设计。

来源

2013-10-04 07:35:55

“‘节’一边是绝对不会在属于什么整个文件的大纲“。为什么不？ '

“绝对不属于大纲”：因为使用了标题（'h2'），所以即使没有使用'section'元素，大纲中也会列出“小”节。我认为这非常重要：最新消息，新闻订阅等*应该是大纲条目。 – unor

我想这一切都取决于“搁置”内容的真实性。我会使用旁边的小块内容来真正注释内容，而不是文档整体结构的一部分。我不认为把某些顶层构造提升到旁边有什么问题，但对我来说这似乎很奇怪。＃恕我直言 –

是的，您可以在那里使用section。

当您使用标题时，you have "implicit" sections anyway。通过使用section，您可以使其明确，即encouraged（请参见最后一个报价）。

这些片段语义上等同（它们具有相同的outline）：

<!-- using headings + div elements --> 
<aside class="example-1"> 
    <h1>Heading for this aside</h1> 
    <div> 
    <h2>Latest news</h2> 
    <p>…</p> 
    </div> 
    <div> 
    <h2>Choose site theme</h2> 
    <p>…</p> 
    </div> 
</aside> 

<!-- using headings only --> 
<aside class="example-2"> 
    <h1>Heading for this aside</h1> 
    <h2>Latest news</h2> 
    <p>…</p> 
    <h2>Choose site theme</h2> 
    <p>…</p> 
</aside> 

<!-- using section elements --> 
<aside class="example-3"> 
    <h1>Heading for this aside</h1> 
    <section> 
    <h2>Latest news</h2> 
    <p>…</p> 
    </section> 
    <section> 
    <h2>Choose site theme</h2> 
    <p>…</p> 
    </section> 
</aside>

注意：如果你不提供的aside标题，文档大纲将是不同的，当section用来。这不是一件坏事;无论如何，我想这个轮廓是你通常想要的。你可以玩gnnedders'online outliner。

当然还可以有其它切片元件代替section的aside内（例如nav为该aside，或article的相关帖子的列表导航等）。

注意：就你而言，你可能会考虑使用几个aside元素来代替。这一般不能被回答，它取决于内容，但一个经验法则可能是：如果所有这些部分都以某种方式相关（如果你能找到一个标题描述的话），在里面使用一个aside和几个sections /标题所有这些部分）。如果不是，请使用几个aside。

所以，你的例子可能看起来像：

<aside class="widget"> 
    <h2>Latest news</h2> 
    <ul>…</ul> 
    <a>more news</a> 
</aside> 

<aside class="widget"> 
    <h2>Choose site theme</h2> 
    <input type="select" /> 
</aside> 

<aside class="widget"> 
    <h2>Newsletter subscription</h2> 
    <form>…</form> 
</aside> 

<aside class="widget"> 
    <h2>Related articles</h2> 
    <ul>…</ul> 
</aside>

（并使用一个容器div这些，如果你需要一个。）的

来源

2013-10-05 23:57:16 unor

我应该使用<section>标签里面<aside>？

回答

相关问题