我有一大堆的网页看起来这个语义：
heading A
Textual information related to heading A.
Blah blah blah blah blah.[image gallery related to heading 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>
哪个是语义上正确的方法呢？
解决方法
您不可能以“一个真正的方式”完全达成一致，以标记这一点，但我会选择方法2.我的推理是：
图形元素不能有多个figcaption子元素，因此方法1无效
>一个数字已经是一种类型，所以不需要包装它们：“图形元素代表一个内容单元，可以从文档的主要流程移开而不影响文档的含义。” (W3C HTML5 spec,figure element)>除非这两个数字本身是相关的，除了两者都与他们所在的部分相关，否则不需要将它们分组到更远的位置