Question

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

标题A

与标题A有关的文字信息。
  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无效
figure已经是aside的一种类型，所以不需要包装它们：“图元素代表一个内容单元......可以远离主要流程文件不影响文件的含义。“ （W3C HTML5 spec, figure element）
除非这两个数字本身有关系，除了两者都与他们所在的部分有关外，不需要将它们分组，而不是已经

Answer 2

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

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

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

方法1 已正确excluded by @robertc。
方法3a 被我排除（您的示例不符合上述<aside>的要求，即没有理由用<figure>包裹<aside> {1}}）。
方法3b - 只要<section>没有其他<h2>）标题，就不需要在另一个<figure>中嵌套。
方法4 也被我排除 - 与方法3相同的参数加上<figure> s不应放在与相关文本和标题不同的部分中。

在W3C Specification中，<figure>应该在画廊中使用是不明显的。理想情况下，页面还应包含与主题相关的一些段落文本，然后<figure>应该从该文本中引用并且仅仅是“描述性”，而不是整个主要内容本身。 另一方面，这样的用法与规范没有任何相反之处，因为库项目通常是“自包含的”（不受上下文约束） - 特别是在使用{{1所以他们的意思很清楚。我无法想象这种用法的更好元素。

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

方法1：

方法2：

方法3：

方法4：

2 个答案: