列出图像横幅的正确方法

Question

我想问一下使用'ul'的正确方法是什么？可以使用“ul”列出一些图像横幅吗？前任。我有 3 个带有标题的图像横幅，并且都向左浮动。我以前每次都会遇到这种情况，我想出的方法是第一个使用'ul'的标记。

可以使用下面的标记吗：

<section class="banners">
   <ul>
      <li>
         <figure>
             <a href="#">
                  <img src="" width="" height="" alt="" />
               </a>
         </figure>
         <a href="#">title here</a>
      </li>
      <li>
         <figure>
             <a href="#">
                <img src="" width="" height="" alt="" />
             </a>
         </figure>
         <a href="#">title here</a>
      </li>
      <li>
         <figure>
         <a href="#">
            <img src="" width="" height="" alt="" />
         </a>
         </figure>
         <a href="#">title here</a>
      </li>
     </ul>
    </section>

或者我应该使用：

   <section class="banners">
       <figure>
           <a href="#">
               <img src="" width="" height="" alt="" />
           </a>
           <figcaption>
               <a href="#">title here</a>
           </figcaption>
        </figure>
        <figure>
           <a href="#">
               <img src="" width="" height="" alt="" />
           </a>
               <figcaption>
                   <a href="#">title here</a>
               </figcaption>
         </figure>
         <figure>
           <a href="#">
               <img src="" width="" height="" alt="" />
           </a>
               <figcaption>
                   <a href="#">title here</a>
               </figcaption>
         </figure>
     </section>

它们都代表语义编码吗？

这是图片横幅的示例

Answer 1

由于 HTML5 规范如此反复无常，而且语义在实际中似乎并没有发挥主要作用，所以很难说。但是，根据您的图像，这看起来像是一个导航部分。因此，您可能希望使用<nav> 对其进行分区。

<ul> 规格：http://www.w3.org/TR/html5/grouping-content.html#the-ul-element
<figure> 规格：http://www.w3.org/TR/html5/grouping-content.html#the-figure-element

我认为这些帮助不大。它们都用于对内容进行分组。对于<ul>，顺序无关紧要。

根据我的阅读，在我看来<figure> 的目的是用于文档注释——描述相关图像等。规范特别指出这些可以移动到其他地方，如附录，但这似乎不适用于您的情况。

我认为<figure> 在这里不合适。相反，请使用<nav>。如果需要，您可以使用<ul> 进行样式设置——它没有提供太多语义含义（只是一个有点通用的分组内容元素）。