HTML5 `figure` 和 `aside` 的正确用法

Question

我有一个页面的一大块，从语义上看是这样的：

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

哪种方法在语义上是正确的？

Answer 1

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

• 一个 figure 元素不能有多个 Figcaption 子元素，因此方法 1 无效
• figure 已经是 aside 的类型，因此无需包装它们：“figure 元素代表一个单元内容……可以从文档的主要流程中移出，而不会影响文档的含义。” （W3C HTML5 规范，figure 元素）
• 除非这两个数字本身以某种方式相关，除了两者都与它们所在的部分相关之外，无需将它们进一步分组

Answer 2

在这种情况下，将

插入到

中没有多大意义。在

和

之间进行选择的经验法则是区分：

• 内容本身有意义 可以移动到页面的不同部分，甚至移动到单独的页面（例如附录），但传达重要信息。如果是这样，请选择
  

  。 // 示例有：插图、图表、代码块、图表、音频/视频等（主要是图形内容），所有这些都伴随着文档的主要主题，并且通常作为单个单元引用。

• 内容并不是理解 >它所在的部分可能会被完全牺牲，或者不会对该部分的主题做出贡献。此外，内容只有在周围的上下文中才有意义。如果是这样，请选择
  
  。 // 示例包括：引述、补充上下文相关信息、印刷版式中的侧边栏、广告等（主要是文本内容）。我可以很好地想象 Google AdSense。

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

• 方法1已经正确被@robertc排除。
• 方法3a被我排除了（您的示例不满足上述
  
  的要求，即没有理由将<; figure> 与

  ）。
• 方法 3b – 只要
  
  没有额外的 (

  ) 标题，就无需嵌套在另一个

  中代码><图>。

• 方法 4 也被我排除在外 - 与方法 3 相同的论点加上
  

  不应放置在与相关文本不同的部分中，并且标题是。

从 W3C 规范。理想情况下，页面还应该包含一些与主要主题相关的段落文本，然后

应该从该文本中引用，并且仅是“描述性”的，而不是整个主要内容本身。 另一方面，这样的用法并不以任何方式违反规范，因为图库项目通常是“独立的”（不与上下文绑定）——特别是在使用 进行丰富时

所以它们的含义很清楚。我无法想象有更好的元素适合这种用途。