正确使用HTML5`figure`和`aside` [英] Correct usage of HTML5 `figure` and `aside`

问题描述

标题A

与标题A有关的文字信息。

等待标语等等。

我可以想出几种方法来标记它：

方法1：

 < section> 
< h1>标题A< / h1> 
 
< p>与标题A相关的文字信息。< br /> 
< p> Blah blah blah blah blah blah。< / p> 
 
< figure> 
< img /> 
< figcaption>图片1< / figcaption> 
< img /> 
< figcaption>图片2< / figcaption> 
< / figure> 
< / section> 
  

方法2：

 <节> 
< h1>标题A< / h1> 
 
< p>与标题A相关的文字信息。< br /> 
< p> Blah blah blah blah blah blah。< / p> 
 
< figure> 
< img /> 
< figcaption>图片1< / figcaption> 
< figure> 
< / figure> 
< img /> 
< figcaption>图片2< / figcaption> 
< / figure> 
< / section> 
  

方法3：

 <节> 
< h1>标题A< / h1> 
 
< p>与标题A相关的文字信息。< br /> 
< p> Blah等等等等等等。< / p> 
<预计> <！ - 方法3b：在此使用部分 - > 
< figure> 
< img /> 
< figcaption>图片1< / figcaption> 
< figure> 
< / figure> 
< img /> 
< figcaption>图片2< / figcaption> 
< / figure> 
< / aside> <！ - 方法3b：在此使用部分 - > 
< / section> 
  

方法4：

 <节> 
< h1>标题A< / h1> 
 
< p>与标题A相关的文字信息。< br /> 
< p> Blah等等等等等等。< / p> 
< / section> 
<预计> 
< figure> 
< img /> 
< figcaption>图片1< / figcaption> 
< figure> 
< / figure> 
< img /> 
< figcaption>图片2< / figcaption> 
< / figure> 
< / aside> 
  

这样做的语义是否正确？

解决方案

你不可能完全同意'真正的方法'来标记这个，但我会选择方法2.我的推理是： p>

• 一个数字元素不能有多个 figcaption 子元素，所以方法1无效


• 已经是，因此不需要包装它们：数字元素表示一个内容单元......可以从文档的主流中移出而不影响文档的含义。 （ W3C HTML5规范，图元素）


• 除非这两个数字本身有某种关系，否则两者都与他们所在的部分相关，不需要将它们进一步分组比他们已经

I have a chunk of a page that looks semantically this:

Heading A

Textual information related to heading A.
Blah blah blah blah blah.

[image gallery related to heading A]

I can think of a couple of ways to mark this up:

Method 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>

Method 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>

Method 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>

Method 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>

Which is the semantically correct way of doing it?

解决方案

It's unlikely that you're going to get complete agreement on a 'one true way' to mark this up, but I would choose method 2. My reasoning is:

• A figure element cannot have multiple figcaption children, so method 1 is invalid
• A figure is already a type of aside, so no need to wrap them: "The figure element represents a unit of content ... that can be moved away from the main flow of the document without affecting the document’s meaning." (W3C HTML5 spec, figure element)
• Unless the two figures are themselves related somehow, other than both being related to the section they're in, no need to group them further than they are already

这篇关于正确使用HTML5`figure`和`aside`的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！