HTML5 <figure> 在我的例子中的用法答案

【问题标题】：HTML5 <figure> usage in my caseHTML5 <figure> 在我的例子中的用法
【发布时间】：2012-12-11 22:48:30
【问题描述】：

这种情况我该怎么办：

        <figure>
            <a href="#" class="portfolio-item">
                <div class="picture"><img src="images/portfolio/recent-01.jpg" alt=""/><div class="image-overlay-link"></div></div>
                <figcaption class="item-description">
                    <h5>Mountain Landscapes</h5>
                    <span>Photography</span>
                </figcaption>
            </a>
        </figure>

我不能在“a”元素之外使用“figcaption”，但我想在文本区域和图像上都进行悬停。也许“文章”会更好？

【问题讨论】：

你这里有什么问题？可以包含 html5 中的块元素。
W3C 验证器说我不能在“a”中使用“figcaption”。
为什么不在figure 元素周围放置a 元素？

标签： html figure

【解决方案1】：

为什么不使用a外图，作为suggested by Alohchi？这是有效的：

<a href="#" class="portfolio-item">
    <figure>
        <div class="picture">
            <img src="images/portfolio/recent-01.jpg" alt=""/>
            <div class="image-overlay-link"></div>
        </div>
        <figcaption class="item-description">
            <h5>Mountain Landscapes</h5>
            <span>Photography</span>
        </figcaption>
    </figure>
</a>

【讨论】：

我同意这一点，尽管可能值得一提...因为一个图形可以包含多个元素或图像，例如社交媒体图标，这可能不是最有效的。话虽这么说，你只能有一个 figcaption 并且可能应该在 figure 元素的开头或结尾。再次，正确答案，但我想添加这个见解。
我同意你的解释，但不同意你的例子。社交媒体图标不应该出现在这种标记上，现在还有其他更好的选择。

【解决方案2】：

根据您的 CSS 外观，您可以将每个图像和标题包含在单独的锚标记中，如下所示：

<figure>
    <div class="picture">
        <a href="#" class="portfolio-item">
            <img src="images/portfolio/recent-01.jpg" alt=""/>
            <div class="image-overlay-link"></div>
        </a>
    </div>
    <figcaption class="item-description">
        <a href="#" class="portfolio-item">
            <h5>Mountain Landscapes</h5><span>Photography</span>
        </a>
    </figcaption>
</figure>

或者您可以将图片 div 容器类放在锚点或图像标签中，这样您就不需要包含 div。

如果你只想要一些悬停效果，你也可以只使用 CSS，并定位 .picture:hover 选择器并将锚标记保留在 figcaption 上。看你需要什么。

回答您的article 建议，这就是W3C calls syndicated content 的目的。相反，您可以尝试 section，它提供了一个元素来指定您将包含在大纲中或主题相似的文档片段——如果您要走这条路的话。

【讨论】：