what element should a gallery be in HTML5?

Question

When I make an image gallery in HTML5 should it have any semntic tag like section or article, or is it simply a div?

Answer 1

It depends on the context of the image gallery.

If the gallery is related to the main content, it makes sense to have it as a section within the main content.

The article tag should be used when the content inside it makes sense on its own, e.g. individual blog posts. The content marked using the article tags also make a lot of sense when the content would need to be syndicated (e.g. RSS feed). To explain this last point, 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.

The div tag is for general purpose grouping of elements. It should be used if any other tag isn't more appropriate for the purpose, and grouping is required for styling or scripting purposes. According to 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.

To get back to your question, if the image gallery related to your content (e.g. an image gallery in a blog post), I would have article for the whole blog post, and have a section for the image gallery. Some might argue that, if the gallery doesn't have a heading, it shouldn't be a section and so should be marked as div. However, W3C gives a really nice way to think of sections on its website (sorry can't post more than 2 links with less than 10 rep points!):

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.

If you think about it, it makes a lot of sense to list the gallery in the article's outline (for, say, a blog post). If the article has a specific intro text, even that could be listed in the article's outline. Think of the outline conceptually as a kind of table of content for the article, listing its various sections.

Like I said before, it really depends on the context.

Edit:

Regarding the images of the gallery themselves, it makes sense to have them inside figure, as suggested by Romin. To answer your remark:

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

What W3C really recommends is:

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.

In other words, the question to ask is whether the image gallery could be moved from the primary content (i.e. the blog post content or text), without affecting the flow of the document. An image gallery, per se, could actually be moved away from the primary content of the document, to say a sidebar, and the change of it's position/order wouldn't have an impact on how the content is interpreted. If its position does does have an impact, then figure isn't appropriate in that specific case.

To sum up, if the content (image gallery) is important for the document, but its position in the flow of content isn't (i.e. it could be moved around without much impact), use figure. If its position is important, use other tags. And if its not important, use aside instead.

Answer 2

You can use a section if it makes sense, or aside if it makes sense. otherwise use div.

Gallery doesn't have a semantic tag, like audio or video, so you might want to use div.

That is until Web Components are released :)