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

Question

У меня есть фрагмент страницы, который выглядит семантически следующим образом:

Заголовок 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>

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

Answer 1

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

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

Answer 2

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

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

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

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

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