如何语义改善这个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浏览器。