Image 列出图片横幅的正确方法

我想问一下，使用“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>

它们都代表语义编码吗

这是图像横幅的示例

---

由于HTML5规范变化无常，而且语义在实际中似乎没有起到主要作用，所以很难说。但是，根据您的图像，这似乎是一个导航部分。因此，您可能希望使用

对其进行分段

规范：

规格：

我认为这些没有多大帮助。它们都用于对内容进行分组。对于

，顺序并不重要

从我所读到的来看，

的目的似乎是为了文档的注释——描述相关的图像等。规范特别指出，这些图像可以移到其他地方，如附录，但这似乎不适用于您的情况

---

我认为

在这里不合适。相反，请使用

。如果需要，您可以使用

进行样式设置——它不提供太多语义含义（只是一个有点通用的分组内容元素）。

感谢您的回答，它确实很有帮助。把图片横幅放进去可以吗？我读过一篇文章，说一组图片应该被包装在一个盒子里，它还包括一组图片吗？@krativenuts我认为这很好：