У меня есть фрагмент страницы, которая выглядит семантически:
Заголовок 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>
Каков семантически правильный способ сделать это?