代码之家  ›  专栏  ›  技术社区  ›  Eric

html5的正确用法“figure”和“aside”`

  •  21
  • Eric  · 技术社区  · 14 年前

    我有一个页面的一大块,从语义上看是这样的:

    航向A

    与标题A相关的文本信息。
    废话废话。

    [与标题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>
    

    哪种方法在语义上是正确的?

    2 回复  |  直到 8 年前
        1
  •  23
  •   robertc    14 年前

        2
  •  6
  •   Community CDub    8 年前

    <figure> <aside> < <

    < W3C Specification < <figcaption>

    推荐文章