部分與文章 HTML5

問題描述

我有一個由各種”sections” 喜歡的影片，新聞源等組成的頁面。我有點困惑如何用 HTML5 代表這些。目前我將它們作為 HTML5 <section>，但是在進一步的檢查中，它看起來更正確的標籤是<article> 。有沒有人可以為我這樣做？

這些東西都不是部落格帖子或”documents” 在真正的意義上，所以很難看到要應用哪個元素。

乾杯

編輯：我選擇使用 article 標籤，因為它似乎是不相關元素的容器標籤，我猜我的”sections” 是。然而，實際的標記名文章似乎是相當誤導性的，儘管他們認為 HTML5 已經開發出更多的 web 應用程式，我發現很多標籤要更多的是 blog-centric /檔案。

無論如何感謝您的答案，似乎是相當主觀的。

最佳解決方案

聽起來你應該在<article> 標籤和<section> 標籤中文章中的條目中包裝”sections”(您稱之為) 。

HTML5 spec 說 (部分)：

The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading. […]

Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site’s home page could be split into sections for an introduction, news items, and contact information.

Note: Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the element.

和 Article

The article element represents a self-contained composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

我認為你所說的”sections” 在 OP 中符合文章的定義，因為我可以看到它們是獨立可分發的或可重用的。

更新：latest editors draft for HTML 5.1 中的 article 的一些小的文字更改 (斜體更改)：

The article element represents a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

另外，關於 2013 年 January 中的 article 和 February 的公共 HTML 郵件列表的討論。

次佳解決方案

在 W3 wiki page about structuring HTML5 中，它說：

<section>: Used to either group different articles into different purposes or subjects, or to define the different sections of a single article.

然後顯示我清理的 an image：

它還描述瞭如何使用<article> 標籤 (來自上面的 W3 連結)：

<article> is related to <section>, but is distinctly different. Whereas <section> is for grouping distinct sections of content or functionality, <article> is for containing related individual standalone pieces of content, such as individual blog posts, videos, images or news items. Think of it this way – if you have a number of items of content, each of which would be suitable for reading on their own, and would make sense to syndicate as separate items in an RSS feed, then <article> is suitable for marking them up.

In our example, <section id="main"> contains blog entries. Each blog entry would be suitable for syndicating as an item in an RSS feed, and would make sense when read on its own, out of context, therefore <article> is perfect for them:

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

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

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

Simple huh? Be aware though that you can also nest sections inside articles, where it makes sense to do so. For example, if each one of these blog posts has a consistent structure of distinct sections, then you could put sections inside your articles as well. It could look something like this:

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

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

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

第三種解決方案

我將使用<article> 作為與頁面上其他塊完全無關的文字塊。另一方面，<section> 將是分隔開彼此相關的檔案的分隔符。

現在，我不知道你在你的影片，新聞源等方面有什麼，但這裡是一個例子 (沒有真正的對錯，只是我使用這些標籤的指南)：

<article>
    <h1>People</h1>
    <p>text about people</p>
    <section>
        <h1>fat people</h1>
        <p>text about fat people</p>
    </section>
    <section>
        <h1>skinny people</p>
        <p>text about skinny people</p>
    </section>
</article>
<article>
    <h1>Cars</h1>
    <p>text about cars</p>
    <section>
        <h1>Fast Cars</h1>
        <p>text about fast cars</p>
    </section>
</article>

正如你所看到的，這些部分仍然是相互關聯的，但是隻要它們在一個對其進行分組的塊中。文章 DONT 必須在內。它們可以在檔案的正文中，但是當整個檔案是一篇文章時，我會使用正文中的部分。

例如

<body>
    <h1>Cars</h1>
    <p>text about cars</p>
    <section>
        <h1>Fast Cars</h1>
        <p>text about fast cars</p>
    </section>
</body>

希望這是有道理的。

第四種方案

我喜歡堅持使用詞語的標準含義：article 將適用於文章。我將定義部落格文章，檔案和新聞文章為 articles 。另一方面，部分將參考佈局/ux 專案：側邊欄，頁首，頁尾將是部分。然而，這是我自己的個人解釋 – 正如你所指出的，這些元素的規範沒有明確定義。

支援這一點，w3c 將 article 元素定義為可以獨立自主的內容部分。部落格文章可以自己作為一個有價值和可消耗的內容專案。但是，標題不會。

Here 是一篇有趣的文章，關於一個人的瘋狂，試圖區分兩個新元素。文章的基本點，我也覺得是正確的，是嘗試使用你覺得最好的元素實際上代表它包含什麼元素。

What』s more problematic is that article and section are so very similar. All that separates them is the word 「self-contained」. Deciding which element to use would be easy if there were some hard and fast rules. Instead, it』s a matter of interpretation. You can have multiple articles within a section, you can have multiple sections within and article, you can nest sections within sections and articles within sections. It』s up to you to decide which element is the most semantically appropriate in any given situation.

Here 對於 SO 上同樣的問題是非常好的答案

參考文獻

• Section vs Article HTML5

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。