Правильное использование HTML5 `figure` и` aside`
У меня есть кусок страницы, который выглядит семантически это:
Заголовок А
Текстовая информация, связанная с заголовком А.
Бла-бла-бла-бла-бла.
[галерея изображений, связанных с заголовком 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>
Какой семантически правильный способ сделать это?