正确使用HTML5“figure”和“aside”

我有一大堆的网页看起来这个语义：

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>

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

哪个是语义上正确的方法呢？

解决方法

您不可能以“一个真正的方式”完全达成一致，以标记这一点，但我会选择方法2.我的推理是：

图形元素不能有多个figcaption子元素，因此方法1无效
>一个数字已经是一种类型，所以不需要包装它们：“图形元素代表一个内容单元，可以从文档的主要流程移开而不影响文档的含义。” (W3C HTML5 spec,figure element)>除非这两个数字本身是相关的，除了两者都与他们所在的部分相关，否则不需要将它们分组到更远的位置

原文链接：https://www.f2er.com/html5/169131.html

正确使用HTML5“figure”和“aside”

解决方法

猜你在找的HTML5相关文章