有人懷疑如何在HTML5中創建語義上正確的（博客）帖子結構的帖子列表？

我對HTML5非常陌生，我需要實現一個文章容器（例如，我需要爲WordPress文章創建經典結構，其中用戶在一系列文章之下看到一系列文章），但是我對此有些懷疑新的HTML5組件的語義使用。有人懷疑如何在HTML5中創建語義上正確的（博客）帖子結構的帖子列表？

要做到這一點，我認爲是這樣的：

<section> 
    <h1>My Posts:</h1> 
    <article> 
     <header> 
      <time datetime="2010-11-10" pubdate>10/11/2010</time> 
      <h2>FIRST POST TITLE</h2> 
     </header> 
     <p> 
      POSTS CONTENT 
     </p> 

     <footer> 
      <address><a href="mailto:[email protected]">MY NAME</a></address> 
     </footer> 
    </article> 

    <article> 
     <header> 
      <time datetime="2010-11-01" pubdate>01/11/2010</time> 
      <h1>SECOND POST TITLE</h1> 
     </header> 
     <p> 
      POSTS CONTENT 
     </p> 

     <footer> 
      <address><a href="mailto:[email protected]">MY NAME</a></address> 
     </footer> 
    </article> 
</section>

所以我以下列方式已經推論：

所有顯示帖子被包含在外部<section>元素（因爲繼HTML5規範a <section>表示文檔的通用部分，在這種情況下是顯示帖子的區域），<sections>的標題爲<h1>。
每篇文章都由一個特定的<article>元素表示（應該在語義上是正確的）。
每篇文章元素都表示一個特定帖子，並且包含一個<header>元素，其中包含發佈日期和帖子標題。我使用了一個<header>元素來包含這些信息，因爲此元素用於表示「一組介紹或導航幫助」。
然後，我有一個經典的<p>包含文章的文本內容（但我也可以把它包裝成一個div還是更願意使用新<section>如果文本很長，詳細？）
最後我已經把電子郵件聯繫到一個<footer>元素，因爲它是有關容器的信息（<article>元素）。

這是我的問題的有效結構？它在HTML5中的語義是否正確？

來源

2014-01-29 AndreaNobili

這對我來說看起來很不錯。 header s和footer s已更改一段時間以允許它們用於section s和article s。

但是，p元素應該用於單個段落。很有可能，您的文章將不止一個段落，而且WordPress通常會根據換行符爲您生成這些段落。如果您需要將所有文章內容封裝到一個元素中，那麼div就足夠了。如果你的文章很長並且有幾個部分，你可以用這些來代替。

address元素首先讓我失望，因爲沒有多少人使用它，但其目的是描述文檔作者（或文檔的一部分）的聯繫地址，因此您的使用是絕對正確的。

對於您可以考慮執行的hCard標準格式的電子郵件獎勵積分：http://microformats.org/wiki/hcard

基本上，除了使用段落元素來包裝整個文章，這是絕對精品！你已經在你的決定背後展示了很多想法，這在目前很少見。

來源

2014-01-29 11:52:34

你的標記是好的。

（請注意，您使用的h2第一article和第二個h1。雖然這兩種方式都可以，爲什麼不堅持一個變型？）

是它更好地利用一個新的部分，如果文字很長且詳細？

請勿在section中包含全文！但是當您使用article,you are "encouraged" to use explicit section elements中的小標題對標題及其內容進行分組時。

來源

2014-01-30 12:56:47 unor

有人懷疑如何在HTML5中創建語義上正確的（博客）帖子結構的帖子列表？

回答

相關問題