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

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

Заголовок А

Текстовая информация, относящаяся к заголовку 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>

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


html semantics semantic-markup
person Eric    schedule 26.09.2010    source источник

Ответы (2)


arrow_upward
24
arrow_downward

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

  • Элемент figure не может иметь несколько дочерних элементов figcaption, поэтому метод 1 недействителен.
  • figure уже является типом aside, поэтому их не нужно оборачивать: «Элемент figure представляет собой единицу содержимого… которую можно убрать из основного потока документа, не затрагивая смысла документа». (спецификация W3C HTML5, элемент фигуры)
  • Если только две фигуры сами по себе не связаны каким-то образом, кроме того, что обе связаны с разделом, в котором они находятся, нет необходимости группировать их дальше, чем они уже есть.
person robertc    schedule 26.09.2010
comment
который можно удалить из основного потока документа. Означает ли это, что элементы рисунка не обязательно должны находиться в разделе, к которому они привязаны? - person Eric; 26.09.2010
comment
@Eric Я думаю, что если они не находятся в разделе, к которому они принадлежат, тогда не было бы необходимости рассматривать их «вдали от основного потока», это может прояснить вещи, которые нужно прочитать о модели контента HTML5: whatwg.org/specs/web-apps/current-work/ многостраничный/ - person robertc; 26.09.2010
comment
То, что <figure/> уже является типом <aside/>, (уже) неверно. В рекомендациях даже поясняется, что если <figure/> лишь косвенно относится к основному содержанию, <figure/> следует заключать в <aside/>. w3.org/TR/html5/single-page. html#the-figure-element w3 .org/TR/html51/single-page.html#the-figure-element - person Christian Hujer; 12.01.2017

arrow_upward
8
arrow_downward

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

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

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

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

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

person Adam    schedule 01.08.2011