Правильное использование HTML5 `figure` и` в сторону`

У меня есть фрагмент страницы, которая выглядит семантически:

Заголовок A

Текстовая информация, связанная с заголовком A.
Бла-бла-бла-бла-бла.

[галерея изображений, связанная с заголовком A]

Я могу придумать пару способов отметить это:

Способ 1:

<section>
    <h1>Heading A</h1>

    <p>Textual information related to heading A.<br />
    <p>Blah blah blah blah blah.</p>

    <figure>
        <img />
        <figcaption>Image 1</figcaption>
        <img />
        <figcaption>Image 2</figcaption>
    </figure>
</section>

Способ 2:

<section>
    <h1>Heading A</h1>

    <p>Textual information related to heading A.<br />
    <p>Blah blah blah blah blah.</p>

    <figure>
        <img />
        <figcaption>Image 1</figcaption>
    <figure>
    </figure>
        <img />
        <figcaption>Image 2</figcaption>
    </figure>
</section>

Способ 3:

<section>
    <h1>Heading A</h1>

    <p>Textual information related to heading A.<br />
    <p>Blah blah blah blah blah.</p>
    <aside>  <!--Method 3b: use section here-->
        <figure>
            <img />
            <figcaption>Image 1</figcaption>
        <figure>
        </figure>
            <img />
            <figcaption>Image 2</figcaption>
        </figure>
    </aside>  <!--Method 3b: use section here-->
</section>

Способ 4:

<section>
    <h1>Heading A</h1>

    <p>Textual information related to heading A.<br />
    <p>Blah blah blah blah blah.</p>
</section>
<aside>
    <figure>
        <img />
        <figcaption>Image 1</figcaption>
    <figure>
    </figure>
        <img />
        <figcaption>Image 2</figcaption>
    </figure>
</aside>

Каков семантически правильный способ сделать это?

Ответы

Ответ 1

Невероятно, что вы получите полное согласие по "одному истинному пути", чтобы отметить это, но я бы выбрал метод 2. Мое рассуждение:

  • Элемент figure не может содержать несколько дочерних элементов figcaption, поэтому метод 1 недействителен
  • A figure уже является типом aside, поэтому нет необходимости их обертывать: "Элемент рисунка представляет собой единицу контента..., который может быть удален от основного потока документа, не затрагивая документов смысл". (спецификация W3C HTML5, элемент фигуры)
  • Если эти две цифры не связаны каким-либо образом, кроме обоих, связанных с разделом, в котором они находятся, нет необходимости группировать их дальше, чем они уже были

Ответ 2

Вставка <figure> в <aside> не имеет большого смысла в этом случае. Эмпирическое правило для выбора между <figure> и <aside> заключается в том, чтобы различать:

  • Содержание имеет смысл само по себе и может быть перемещено на другую часть страницы или даже на отдельную страницу (например, приложение), но передает важную информацию. Если да, выберите <figure>.//Примеры: иллюстрации, диаграммы, блоки кода, графики, аудио/видео и т.д. (В основном графический контент), все из которых сопровождаются основной темой документа и часто упоминаются как единое целое.
  • Содержание не обязательно для понимания section, в котором оно размещено, может быть полностью пожертвовано или не способствует основной темой этого раздела. Кроме того, контент имеет смысл только в окружающем контексте. Если да, выберите <aside>.//Примеры: pull quotes, дополнительная информация, связанная с контекстом, боковые панели, как в печатной типографии, объявления и т.д. (В основном текстовое содержимое). Я вполне могу представить Google AdSense.

Имея это в виду, я бы принял метод Метод 2:

  • Метод 1 был правильно исключен @robertc.
  • Метод 3a исключается мной (ваш пример не соответствует требованиям для <aside>, указанным выше, то есть нет причин для переноса <figure> с помощью <aside>).
  • Метод 3b - нет необходимости в вложенности в другой <section>, если нет дополнительного заголовка <h2> для <figure> s.
  • Метод 4 также исключается мной - тот же аргумент, что и для метода 3, плюс, что <figure> не следует размещать в другом разделе, кроме соответствующего текста и заголовка.

Колебание <figure> должно использоваться в галереях, не очевидно из Спецификация W3C. В идеале, страница должна также содержать текст абзаца, относящийся к основной теме, затем <figure> следует отнести к этому тексту и быть "изобразительным", а не всем основным содержанием. С другой стороны, такое использование никоим образом не противоречит спецификации, поскольку элементы галереи обычно являются "самодостаточными" (не связанными с контекстом), в частности, когда они обогащены <figcaption>, поэтому их смысл ясен. Я не могу представить лучшего элемента для этого использования.