本文介绍了正确使用HTML5`figure`和`aside`的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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



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

  • 已经是,因此不需要包装它们:数字元素表示一个内容单元......可以从文档的主流中移出而不影响文档的含义。 ()

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


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

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`的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

10-24 18:34