Question

我正在建立一个具有良好HTML5语义结构的网站，并在我向图片添加图片库时出现了一个问题。注意：我的<figure>位于<article>。

设计图库的最佳方法是什么？（想想无障碍）

<section>
  <h1>Gallery title</h1>
  <figure role="img">
    <img src="../img/img1.jpg" alt="Img 1" title="image 1" />
    <img src="../img/img2.jpg" alt="Img 2" title="image 2" />
    <img src="../img/img3.jpg" alt="Img 3" title="image 3" />
    <img src="../img/img4.jpg" alt="Img 4" title="image 4" />
  </figure>
<section>

或者这个：

<figure role="img">
    <figcaption aria-labelled="#maintitle">Gallery title</figcaption>  
    <div>
        <img src="../img/img1.jpg" alt="Img 1" title="image 1" />
        <img src="../img/img2.jpg" alt="Img 2" title="image 2" />
        <img src="../img/img3.jpg" alt="Img 3" title="image 3" />
        <img src="../img/img4.jpg" alt="Img 4" title="image 4" />
    </div>
</figure>

哪种结构最好？你有其他建议吗？

Figcaption W3C：http://www.w3.org/TR/html5/grouping-content.html#the-figcaption-element figcaption HTML5Doctor：http://html5doctor.com/the-figure-figcaption-elements/

提前感谢所有

地理

更新父结构是：

<article>
    <h1 id="maintitle">Title</h1>
    <p>
        Lorem ipsum dolor sit amet...
    </p>

    <!-- GALLERY HERE-->

    <section>
        <!--other things, like a download area-->
    </section>
</article>

Answer 1

我认为原因可以归结为：我应该将section用于我的画廊吗？

没有一般答案，这总取决于您的实际内容。查看文档大纲（例如，使用HTML5 Outliner）。画廊的条目是否有意义？如果是，请使用section，否则请执行。

如果您使用article作为图库，则section会有以下大纲：

1. "Title" {article}
  1.1 "Gallery title" {section}
  1.2 untitled {section}

如果没有section，它将具有以下概述：

1. "Title" {article}
  1.1 untitled {section}

由于您可以为图库添加标题，因此section可能是合适的良好指标（如果您肯定想提供标题，则为should use a sectioning content element anyway）。如果图库原则上可以需要自己的footer（例如，用于提供作者数据或版权信息），那么another indicator section可能是合适的。

顺便说一句，img role似乎不适合figure，因为您的图库包含多张图片，对吗？但是，img角色仅用于一个图像（可能包含多个图像文件）。

部分或图形内的图像库标题？

1 个答案: