2009-11-24 37 views
12

試圖讓我的頭在HTML5中的新的語義元素。<section>或<article>,其中包含在其中

請問<section>屬於<article>嗎?或者相反嗎?它甚至重要嗎?

我正在尋找重構wordpress博客。

+0

嘗試佈局的鏈接似乎不起作用。 – Chris

+0

@Abizern,你可以上傳一個圖像到StackOverflow,而不是連接到一個站外?您的問題目前的圖像已損壞。 – Justin

+0

當時我發佈了這個問題,沒有選擇這樣做。 – Abizern

回答

13

HTML5 spec

section元素表示一個通用的文檔或應用程序段。在這種情況下,一個部分是內容的主題分組,通常包含一個標題和一個可能的頁腳。

article的元件表示文檔,頁面或站點的獨立部分。這可以是論壇帖子,雜誌或報紙文章,博客文章,用戶提交的評論或任何其他獨立內容項目。

所以我會說sectionarticle元素可以包含其他元素,如果適當的話。我認爲你的圖很有意義,除了嵌套的部分元素:

section元素不是一個通用的容器元素。當爲了樣式目的或爲了方便腳本而需要元素時,鼓勵作者改爲使用div元素。一般規則是,只有元素的內容將在文檔的大綱中明確列出時,section元素纔是合適的。

也許使用外部的一個<div>

+0

這聽起來正確。我也找到了這個例子。謝謝。 – Abizern

4

W3 wiki page about structuring HTML5,它說:

<section>:用於爲不同的目的兩組不同的物品或 科目,或定義一個單篇文章的不同部分。

,然後顯示an image我清理:

enter image description here

同樣重要的是要知道如何使用<article>標籤(從上面的相同W3鏈接):

<article><section>有關,但明顯不同。 鑑於<section>用於分組內容的不同部分或 功能,<article>用於包含相關個人 獨立的內容,如個人博客文章,視頻, 圖像或新聞項目。可以這樣想 - 如果您有多個 內容項目,其中每個項目都適合閱讀他們的 自己的內容,並且對於聯合供稿作爲RSS 供稿中的單獨項目有意義,則<article>適用於標記起來。

在我們的示例中,<section id="main">包含博客條目。每個博客 條目將是適用於RSS提要辛迪加作爲一個項目,並在自己的閱讀時 將使意義,斷章取義,因此 <article>非常適合他們:

<section id="main"> 
    <article> 
     <!-- first blog post --> 
    </article> 

    <article> 
     <!-- second blog post --> 
    </article> 

    <article> 
     <!-- third blog post --> 
    </article> 
</section> 

簡單吧?請注意,您也可以在 文章中嵌套部分,這樣做有意義。例如,如果 中的每一個博客文章都有不同部分的一致結構,那麼您可以將文章部分放入文章中。它可能看起來 是這樣的:

<article> 
    <section id="introduction"> 
    </section> 

    <section id="content"> 
    </section> 

    <section id="summary"> 
    </section> 
</article> 
1

IMOO,它應該是簡單的,簡單到什麼正常的人會想當然。如果一個簡單的標籤名稱讓人困惑,那就是失敗。對我來說:

  • <article>是一篇文章。人們分享文章。當你說什麼是一篇文章時,我預計它應該有一個標題,也可能是一個小總結,所以我可以決定閱讀或不閱讀。如果有趣的話,我會把它分享給我的朋友。它是獨立的。

  • A <section>是章節。它是的一部分的相關事情。基本上,您將需要其他部分來獲取整個圖像。

爲什麼你把<section><body>裏面?哦,因爲它是身體的一部分;我的網站的一部分。我將把我的文章放入這部分。

爲什麼你把<section>放在<section>裏面?因爲它的一部分部分。