html - 正确使用 HTML5 `figure` 和 `aside`

Question

我有一大块页面在语义上看起来是这样的:

Heading A

Textual information related to heading A.
Blah blah blah blah blah.

[image gallery related to heading A]

我可以想到几种方法来标记它:

方法一:

<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>

方法二:

<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>

方法三:

<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>

方法四:

<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>

从语义上讲，哪种方法是正确的？

Answer 1

您不太可能就标记它的“唯一正确方法”达成完全一致，但我会选择方法 2。我的理由是:

• figure 元素不能有多个 figcaption 子元素，所以方法 1 无效
• figure 已经是 aside 的一种类型，因此无需将它们包装起来:“figure 元素表示一个内容单元......可以移走在不影响文档含义的情况下从文档的主要流程中取出。” ( W3C HTML5 spec, figure element )
• 除非这两个数字本身以某种方式相关，除了都与它们所在的部分相关，否则无需将它们进一步分组