html - 列出图片横幅的正确方法

我想问一下“ul”的正确用法是什么？使用“ul”列出一些图片横幅可以吗？我有三个带标题的图片横幅，都是左漂的。我每次都遇到这种情况，我想到的方法是第一个使用“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>

它们都代表语义编码吗？
这是图像横幅的示例

最佳答案

由于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>进行样式设置——它没有提供太多语义意义（只是一个有点通用的分组内容元素）。

关于html - 列出图片横幅的正确方法，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/15103733/