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

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

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

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

21
задан Stanislav Kralin 13 June 2017 в 10:46
поделиться