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

Question

我有一个页面块,在语义上看起来像这样:

标题A.

与标题A.
Blah blah blah blah blah blah blah 相关的文字信息.

[与标题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是无效的
• A figure已经是一种类型aside,所以不需要包装它们:"数字元素代表一个内容单元......可以远离文档的主流而不影响文档的含义." (W3C HTML5规范,图元素)
• 除非这两个数字本身是相关的,除了两个数字与它们所在的部分相关之外,不需要将它们分组比它们已经进一步分组

Answer 2

插入<figure>到<aside>不会使在这种情况下多大意义.根据经验,之间进行选择的规则<figure>,并<aside>是区分是否:

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

考虑到这一点,我也会接受方法2:

• 方法1已被@robertc正确排除.
• 方法3a被我排除(你的例子不符合上述要求<aside>,即没有理由用<figure>s 包装<aside>).
• 方法3b - <section>只要没有s的additional(<h2>)标题,就不需要在另一个中嵌套<figure>.
• 方法4也被我排除 - 与方法3相同的参数加上<figure>s不应该放在与相关文本和标题不同的部分中.

<figure>在W3C规范中,应该在画廊中使用的内容并不明显.理想情况下,页面还应包含一些与主题相关的段落文本,然后<figure>s应该从该文本中引用并且仅仅是"描述性",而不是整个主要内容本身.另一方面,这样的用法与规范没有任何相反的情况,因为图库项目通常是"自包含的"(不受上下文约束) - 特别是当丰富时<figcaption>,它们的含义是清楚的.我无法想象这种用法的更好元素.