¿Qué elemento debe ser una galería en HTML5?

Question

Cuando hago una galería de imágenes en HTML5, ¿debe tener alguna etiqueta semántica como section o article, o simplemente es div?

Answer 1

Puede usar section si tiene sentido, o aside si tiene sentido. de lo contrario use div.

Galería no tiene una etiqueta semántica, como audio o video, así que puede que quiera usar div.

Eso es hasta que son liberados Web Components :) se recomienda

Answer 2

Si está utilizando HTML5, a continuación, utilizando semánticas Etiquetas y debe ser el camino a seguir en lugar de utilizar div.

De hecho, una galería incluso se puede asignar bastante bien a las etiquetas Semánticas. Por ej. una sección podría contener la lista de artículos, que son las imágenes individuales. Un aside podría proporcionar más información sobre la imagen particular, etc.

Un buen artículo que muestra cómo utilizar el figure y figcaption está aquí: http://html5doctor.com/the-figure-figcaption-elements/

Answer 3

Depende del contexto de la galería de imágenes.

Si la galería está relacionada con el contenido principal, tiene sentido tenerlo como section dentro del contenido principal.

La etiqueta article se debe utilizar cuando el contenido que contiene tenga sentido por sí mismo, p. publicaciones de blog individuales. El contenido marcado con las etiquetas article también hace que tenga mucho sentido cuando el contenido deba ser sindicado (por ejemplo, fuente RSS). Para explicar este último punto, W3C explains:

Cuando utiliza específicamente con el contenido objeto de redistribución en la sindicación, el elemento artículo es igual propósito que el elemento de entrada de Atom.

La etiqueta div es para la agrupación de elementos de propósito general. Se debe usar si cualquier otra etiqueta no es más apropiada para el propósito, y se requiere la agrupación para el estilo o la creación de guiones. De acuerdo con W3C's recommendation:

Se recomienda encarecidamente a los autores que vean el elemento div como un elemento de último recurso, cuando ningún otro elemento es adecuado. El uso de elementos más apropiados en lugar del elemento div conduce a una mejor accesibilidad para los lectores y facilita el mantenimiento de los autores.

Para volver a su pregunta, si la galería de imágenes relacionado con su contenido (por ejemplo, una galería de imágenes en un blog), tendría article para toda la entrada del blog, y tienen un section para la galería de imágenes . Algunos podrían argumentar que, si la galería no tiene un encabezado, no debería ser un section, por lo que debería marcarse como div. Sin embargo, W3C ofrece una forma muy agradable de pensar en las secciones de su sitio web (¡lo siento, no puedo publicar más de 2 enlaces con menos de 10 puntos de repetición!):

Una regla general es que el elemento de sección es apropiado solo si el contenido del elemento se enumera explícitamente en el contorno del documento.

Si lo piensas bien, tiene mucho sentido incluir la galería en el perfil del artículo (por ejemplo, en una publicación de blog). Si el artículo tiene un texto de introducción específico, incluso eso podría enumerarse en el esquema del artículo. Piense en el esquema conceptualmente como un tipo de tabla de contenido para el artículo, enumerando sus diversas secciones.

Como dije antes, realmente depende del contexto.

Editar:

En cuanto a las imágenes de la galería de sí mismos, tiene sentido tenerlos dentro figure, según lo sugerido por Román. Para responder a su observación:

Gracias, pero no creo que es aquí porque dicen que "se puede mover fuera de la corriente principal del documento sin afectar el significado del documento." Así se entiende para las imágenes dentro del texto, y si quito imágenes de la galería que afectará su significado

Lo W3C recomienda realmente es:

El elemento (figure) por lo tanto se puede utilizar para anotar ilustraciones, diagramas, fotos, listados de códigos, etc., a los que se hace referencia desde el contenido principal del documento, pero que podrían, sin afectar el flujo del documento, alejarse de ese contenido principal, por ejemplo al costado de la página, a páginas dedicadas, o a un apéndice.

En otras palabras, la pregunta es si la galería de imágenes se pudo mover del contenido principal (es decir, el contenido de los blogs de correos o de texto), sin afectar el flujo del documento. Una galería de imágenes, per se, en realidad podría alejarse del contenido principal del documento, por decir una barra lateral, y el cambio de su posición/orden no tendría un impacto sobre cómo se interpreta el contenido. Si su posición no tiene un impacto, entonces figure no es apropiado en ese caso específico.

En resumen, si el contenido (galería de imágenes) es importante para el documento, pero su posición en el flujo de contenido no es (es decir, podría moverse sin mucho impacto), use figure. Si su posición es importante, use otras etiquetas. Y si no es importante, use aside en su lugar.