HTML5中的图库应该是什么元素?

当我在 HTML5中创建一个图像库时,它应该有任何semntic标签,如部分或文章,还是只是一个div?

解决方法

这取决于图库的上下文.

如果图库与主要内容相关,则将其作为主要内容中的一个部分是有意义的.

文章内部的内容本身有意义时,应该使用文章标签,例如:个人博客文章.使用文章标签标记内容也是一个
内容需要联合时(例如RSS提要)很有意义.为了解释这最后一点,W3C explains

When used specifically with content to be redistributed in syndication,the article element is similar in purpose to the entry element in Atom.

div标签用于通用的元素分组.如果任何其他标记不适合此目的,则应使用它,并且为样式或脚本目的需要分组.根据W3C’s recommendation

Authors are strongly encouraged to view the div element as an element of last resort,for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors.

要回到您的问题,如果图片库与您的内容相关(例如博客文章中的图片库),我会为整个博客文章撰写文章,并为图片添加一个部分.有些人可能会争辩说,如果画廊没有标题,它不应该是一个部分,所以应该标记为div.但是,W3C提供了一个非常好的方式来思考其网站上的部分(抱歉,不能发布超过2个链接,少于10个重复点!):

A general rule is that the section element is appropriate only if the element’s contents would be listed explicitly in the document’s outline.

如果你仔细想想,在文章的大纲中列出画廊是很有意义的(例如,博客文章).如果文章有特定的介绍文本,甚至可以在文章的大纲中列出.将概念概念视为文章的一种内容表,列出其各个部分.

就像我之前说的那样,它实际上取决于上下文.

编辑:

关于画廊本身的图像,按照Romin的建议将它们放在图中是有意义的.回答你的评论

thanx but I don’t think is right here because they say that it “can be moved away from the main flow of the document without affecting the document’s meaning.” So it is meant for images inside text,and if I remove images from gallery that will affect it’s meaning

W3C真正推荐的是:

The element (figure) can thus be used to annotate illustrations,diagrams,photos,code listings,etc,that are referred to from the main content of the document,but that Could,without affecting the flow of the document,be moved away from that primary content,e.g. to the side of the page,to dedicated pages,or to an appendix.

换句话说,要问的问题是图像库是否可以从主要内容(即博客文章内容或文本)移动,而不影响文档的流程.图像库本身实际上可以远离文档的主要内容,例如侧边栏,并且其位置/顺序的更改不会影响内容的解释方式.如果它的位置确实产生了影响,那么这个特定情况下的数字是不合适的.

总而言之,如果内容(图片库)对于文档很重要,但是它在内容流中的位置不是(即它可以在没有太大影响的情况下移动),请使用数字.如果其位置很重要,请使用其他标签.如果它不重要,请改用它.

相关文章

HTML5和CSS3实现3D展示商品信息的代码
利用HTML5中的Canvas绘制笑脸的代码
Html5剪切板功能的实现
如何通过HTML5触摸事件实现移动端简易进度条
Html5移动端获奖无缝滚动动画实现
关于HTML5和CSS3实现机器猫的代码