列出图像横幅的正确方法

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