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

Question

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

标题 A

与标题 A 相关的文本信息。
哈哈哈哈哈哈哈哈哈。

[与标题 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的一个类型，所以不需要把它们包装起来：“图形元素代表一个内容单元……可以从文档的主流程中移开而不影响文件的意义。” (W3C HTML5 spec, figure element)
• 除非这两个图本身以某种方式相关，除非它们都与它们所在的部分相关，否则无需将它们进一步分组

Answer 2

在这种情况下，将<figure> 插入<aside> 没有多大意义。在<figure> 和<aside> 之间进行选择的经验法则是区分是否：

• 内容独立有意义，可以移动到页面的不同部分，甚至是单独的页面（例如附录），但传达重要信息。如果是，请选择<figure>。 // 示例包括：插图、图表、代码块、图形、音频/视频等（主要是图形内容），所有这些都伴随着文档的主题，并且通常作为一个单元引用。
• 内容对于理解它所在的section 不是必需的，可以完全牺牲或对该部分的主题没有贡献 .此外，内容仅在周围环境中才有意义。如果是，请选择<aside>。 // 示例包括：拉引号、补充上下文相关信息、印刷版式中的侧边栏、广告等（主要是文本内容）。我可以想象 Google AdSense。

考虑到这一点，我也会接受方法2：

• 方法一已正确excluded by @robertc。
• 方法 3a 被我排除在外（您的示例不符合上述<aside> 的要求，即没有理由将<figure>s 包装为<aside>）。
• 方法 3b – 只要<figure>s 没有额外的 (<h2>) 标题，就无需嵌套在另一个 <section> 中。
• 方法 4 也被我排除在外 - 与方法 3 相同的论点加上 <figure>s 不应放置在与相关文本和标题不同的部分中。

<figure> 是否应该在画廊中使用在 W3C Specification 中并不明显。理想情况下，一个页面还应该包含一些与主题相关的段落文本，然后应该从该文本引用<figure>s 并且只是“描述性”，而不是整个主要内容本身。 另一方面，这样的用法并没有违反规范，因为画廊项目通常是“独立的”（不受上下文约束）——尤其是在使用<figcaption> 丰富时所以他们的意思很清楚。我无法想象这种用法有更好的元素。