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

无论如何，我总是遇到语义困难。我认为上面的代码片段没有使用像section / footer这样的元素正确（如果我错了请纠正我！）所以我可以把它重写为：

<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

根据Rich Bradshaw的建议，我会使用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>

<强>图

标签指定自包含的内容，如插图，   图表，照片，代码清单等

虽然元素的内容与主流有关，   它的位置与主流无关，如果移除它应该   不影响文件的流程。

<强> figcaption

标签定义元素的标题。

元素可以作为第一个或最后一个孩子   元素。

＆GT;但要注意，这些是HTML 5标签，因此只支持HTML 5浏览器。

如何在语义上改进这个html片段

1 个答案: