我應該使用<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>？

回答

相關問題