2

「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>

どちらもセマンティックコーディングを表していますか?

イメージバナーのサンプルです ここに画像の説明を入力

4

1 に答える 1

2

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 -フィギュア要素

これらはあまり役に立たないと思います。どちらもコンテンツのグループ化に使用されます。の順序は関係ありません<ul>。

私が読んだことから、の目的は<figure>ドキュメントの注釈 (関連する画像などを説明すること) であるように思われます。仕様では、これらを付録のように別の場所に移動できると具体的に述べていますが、そうではないようですあなたの状況に適用する。

<figure>ここでは適切ではないと思います。代わりに、を使用して<nav>ください。必要に応じて for のスタイリングを使用できます。<ul>意味的な意味はほとんどありません (やや一般的なグループ化コンテンツ要素です)。

于 2013-02-27T03:47:52.793 に答える