Тег HTML5 для группы уменьшенных изображений

#html #semantics

#HTML #семантика

Вопрос:

Мне любопытно, какой тег имел бы наибольший смысл для инкапсуляции группы уменьшенных изображений? Имеет ли смысл использовать <figure> тег (читая спецификацию html5, неясно)? Или придерживаться <div> , или он считается собственным <section> ?

Обычно я бы, вероятно, использовал div для его разделения, но, пытаясь использовать семантическую структуру html5, я надеялся, что, возможно, найдется тег, который лучше подходит для такого рода контента.

Мысли? Предложения? Приветствуются все. Спасибо!

1. Зависит от вашего макета. Является ли это разделом вашего макета (неотъемлемой частью), или это скорее подраздел (скорее вспомогательная часть, позволяющая придать ему красивый вид). Также у вас есть другой контент в нем, кроме эскизов?

2. Согласен с комментарием Петаха — нам нужно больше контекста, чтобы иметь возможность говорить о том, какие теги имеют наибольший смысл семантически.

3. @Petah — он содержит только большие пальцы. Я бы рассматривал это скорее как подраздел, чем как отдельный основной раздел.

Ответ №1:

С семантической точки зрения, использование <figure> , вероятно, лучше всего подходит. Если вы проверите спецификацию HTML5, вы увидите, что вполне допустимо включать серию изображений в одно <figure> объявление.

Пример:

 <figure>
 <img src="castle1423.jpeg" title="Etching. Anonymous, ca. 1423."
      alt="The castle has one tower, and a tall wall around it.">
 <img src="castle1858.jpeg" title="Oil-based paint on canvas. Maria Towle, 1858."
      alt="The castle now has two towers and two walls.">
 <img src="castle1999.jpeg" title="Film photograph. Peter Jankle, 1999."
      alt="The castle lies in ruins, the original tower all that remains in one piece.">
 <figcaption>The castle through the ages: 1423, 1858, and 1999 respectively.</figcaption>
</figure>

Также есть аналогичный пример, показанный на HTML5Doctor.com где несколько изображений (которые с таким же успехом могут быть уменьшенными) перечислены как дочерние для одного <figure> элемента.

1. Что, если большие пальцы выложены в виде списка, <ul> изображений, вместо прямых дочерних элементов, как в вашем примере?

2. Помещение их в список не имеет значения. Если они связаны с основным контентом, рисунок был бы уместен. Если изображения можно было бы удалить и они не оказали никакого влияния на содержимое, то семантически они на самом деле не связаны с основным содержимым и, вероятно, не должны быть на рисунке.