html - 语义 : should the image in an article list wrapped in figure?

标签 html semantic-markup

在典型的文章索引(如博客、新闻门户)中,例如:

enter image description here

它应该在 figure 中包含图像缩略图,还是让它单独存在就可以了?

The HTML5 spec defines figure as ,

The figure element represents a unit of content, optionally with a caption, that is self-contained, that is typically referenced as a single unit from the main flow of the document, and that can be moved away from the main flow of the document without affecting the document’s meaning.

但我仍然无法理解这是否意味着我们应该/不应该将图像缩略图放在 figure 中。

例如,即使没有图像也不会改变文章的意思,所以符合条件。但另一方面,缩略图并不是完全独立的。

In another question @unor 建议只有在图像本身应该有单独的标题时才使用 figure 。但在规范中我们看到标题是可选的。

有人可以帮我吗?

最佳答案

想到<figure>作为图表、标注图像、表格或代码块之类的东西,您可能会在新闻文章或教程中看到。

如果需要任何类型的标题,请使用 <figure>因为它有一个 figcaption支持这一点的元素。缺少标题意味着<figure>不允许,并且 <figure>不需要 figcaption .你可以

并非所有图像都属于 <figure> .例如,如果它没有 alt文本或其他文本描述(例如 longdesc),那么它可能不符合使用 <figure> 的条件因为它的缺失可能不会产生任何影响。

如果图像只是为了吸引眼球,也许是主要装饰的引导图像,那么您可以跳过使用 <figure> .您是否选择将其包装在 <p> 中或不(或其他)由您决定。

在没有看到更多上下文(图像、整页等)的情况下,由于您将其描述为带有缩略图 的索引并且它们的缺失不会损害其含义,我认为您应该忽略 <figure> .

这篇 2010 年的文章最近有一些讨论:http://html5doctor.com/the-figure-figcaption-elements/

关于html - 语义 : should the image in an article list wrapped in figure?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37843515/

相关文章:

html - 每个 CSS 布局中的 #container、#Wrapper 有用吗?

html - 使用 HTML5 和微数据标记博客文章的 "keywords"的正确方法?

html - 响应式设计的两个导航类?

javascript - pdfMake javascript pdf内容放错位置

html - overflow:auto 不起作用,不显示滚动条

html - 我有一个 Linux 盒子。如何查看我的 HTML 页面在 Internet Explorer 中呈现的效果?

html - 始终向右浮动侧边栏

css - 第三列 div 定位不正确

html - w3c html 验证错误 - 部分缺少标题。考虑使用 h2-h6 元素为所有部分添加标识标题

html - 在 HTML5 中语义显示 BC/BCE 时间