如何語義改善這個HTML片段

Question

考慮下面的一塊標記：

<a href="/description/item1"> 
    <img src="item1.jpg"> 
    <footer> 
     <section> 
      <h2 class="title">Bar Foo</h2> 
      <h3 class="subtitle">The end of the world</h3> 
     </section> 
     <section class="details"> 
      <h4 class="name">Painted by Someone</h4> 
      <h5 class="id">123243552345</h5> 
     </section> 
    </footer> 
</a> 

DEMO

反正，我一直與語義的困難。我認爲上面的代碼中並沒有使用像段/頁腳正確的元素（請糾正我，如果我錯了！）所以，我可以把它改寫爲：再次

<a href="/description/item1"> 
    <img src="item1.jpg"> 

    <header> 
      <h2 class="title">Bar Foo</h2> 
      <h3 class="subtitle">The end of the world</h3> 
    </header> 
    <footer> 
      <h4 class="name">Painted by Someone</h4> 
      <h5 class="id">123243552345</h5> 
    </footer> 
</a> 

不過呢，應該不是錨（或包裹）一篇文章，在這裏是正確的頁腳，它只是關於圖像的內容？有人可以用這段代碼來幫助我，並指導我完成這個過程，使它在語義上正確/更好嗎？任何意見或文件，將不勝感激！

Answer 1

正如豐富布拉德肖建議，我會使用figure和figcaption標記您的問題：

<a href="/description/item1"> 
    <figure> 
     <img src="http://p1.pichost.me/i/34/1573266.jpg" /> 
     <figcaption> 
      <h2 class="title">Bar Foo</h2> 
      <h3 class="subtitle">The end of the world</h3> 
      <h4 class="name">Painted by Someone</h4> 
      <h5 class="id">123243552345</h5> 
     </figcaption> 
    </figure> 
</a> 

圖

標籤指定自包含的內容，如插圖， 圖表，照片，代碼清單等

W hile的元素內容與主流相關，其位置與主流是獨立的，如果去掉則應該不影響文檔的流向。

figcaption

標籤定義爲一個元件的標題。

元素可以作爲 元素的第一個或最後一個子元素放置。

>但請注意，這些都是HTML 5標記，因此僅支持HTML 5瀏覽器。