画廊在HTML5中应该包含哪些元素?
如果有意义,则可以使用section
;如果有意义,则可以使用aside
。 否则使用div
。
画廊没有语义标签,例如audio
或video
,因此您可能需要 想要使用div
。
这是直到Web Components
被释放:)
如果使用的是HTML5,然后使用语义标签建议,应该前进的方向,而不是使用div
的。
事实上,一个画廊甚至可以很好地映射到语义标签。对于例如一个部分可以包含文章列表,即单个图像。 aside
可以提供有关特定图像的更多信息等。
一个很好的文章,显示如何使用figure
和figcaption
是在这里:http://html5doctor.com/the-figure-figcaption-elements/
这取决于图像库的情况下。
如果图库与主要内容相关,则在主要内容中将其作为section
是有意义的。
article
标记应该在其内部的内容有意义时使用,例如,个人博客帖子。使用article
标签标记的内容在内容需要联合(例如RSS提要)时也会产生很大的意义。要解释这个最后一点,W3C explains:
当专门用于联合内容重新分配的内容时,该文章元素的用途与Atom中的entry元素相似。
div
标记用于元素的通用分组。如果任何其他标签不适合用于该目的,则应该使用它,并且为了样式或脚本目的需要分组。根据W3C's recommendation:
强烈建议作者将div元素作为最后手段的元素来查看,因为当没有其他元素适合时。使用更合适的元素而不是div元素可以为读者提供更好的可访问性,并使作者更易于维护。
要回到你的问题,如果图像库与您的内容(例如在博客中的图片库),我会article
整个博客文章,并有section
的图片库。有人可能会争辩说,如果画廊没有标题,它不应该是section
,所以应该标记为div
。然而,W3C提供了一个非常好的方式来思考其网站上的各个部分(对不起,不能发布超过2个链接,重复数少于10个!):
一般规则是,section元素只有在元素的内容将在文档的大纲中明确列出时才适用。
如果你仔细想一想,在文章的大纲(例如博客文章)中列出图库是非常有意义的。如果文章具有特定的简介文本,即使这可能会列在文章的大纲中。在概念上将概要视为文章的一种内容表格,列出其各个部分。
就像我之前说过的,它真的取决于上下文。
编辑:
关于画廊本身的图像,是有意义的有他们内部figure
,通过Romin的建议。要回答你的评论:
thanx,但我不认为是在这里,因为他们说它“可以从文档的主流中移走而不影响文档的含义。”因此,它是为里面的文字图片,如果我从库中删除图像,会影响它的意思
真的建议什么W3C是:
元素(
figure
)因此可用于标注插图,图表,照片,代码清单等,这些内容是从文档的主要内容引用的,但是可以在不影响文档流程的情况下将其从主要内容移开,例如到页面一侧,专用页面或附录。
换句话说,要问的问题是,是否该图片库可以从主内容(即博客文章的内容或文字)移动,而不影响文档的流动。本质上,图像画廊实际上可以远离文档的主要内容,说出一个侧栏,而其位置/顺序的改变不会影响内容的解释方式。如果其立场确实有影响,那么figure
在该特定情况下不适用。总之,如果内容(图片库)对于文档很重要,但是它在内容流中的位置不是(即它可以在没有太大影响的情况下移动),则使用figure
。如果其位置很重要,请使用其他标签。如果它不重要,请改用aside
。
thanx,但我不认为'
我同意。我只是试图突出不同的语义选项。 – Romin