ul要素：HTML Living Standard各要素別メモ

概要

カテゴリー

• Flow content
• Palpable content（1個以上のli要素を含む場合に限る）

配置できる場所

• 上記カテゴリーの要素が置ける場所。

内容モデル

• 0個以上のli要素。0個以上のScript-supporting contentの混在も可。

• main要素の規定による制限
  • main要素を子孫に含んではならない。

属性

• グローバル属性

HTML構文におけるタグの省略

• 省略不可。

WAI-ARIA

• デフォルトroleは、list。デフォルトroleをrole属性値に指定することは、推奨されない。
• デフォルトrole以外では、group、listbox、menu、menubar、radiogroup、tablist、toolbar、tree、presentation、noneを指定可。

視覚系ブラウザのデフォルトとして期待されるCSS

  ul {
    display: block;
    unicode-bidi: isolate;
    margin-block: 1em;
    padding-inline-start: 40px;
    list-style-type: disc;
    counter-reset: list-item;
  }

  :is( dl,menu,ol,ul) ul {
    margin-block: 0;
  }

  :is( menu,ol,ul) ul {list-style-type: circle;}
  :is( menu,ol,ul) :is( menu,ol,ul) ul {list-style-type: square;}
  

意味・用法

順序を変更しても意味は変わらないだろうリストを表す。

私見・補足

順序が意味をもつ場合は、ol要素を用いる。

リストに見出し、キャプション又はラベルをつけたい場合は、下記のような方法がありうるだろう。

• 該当リストがそれ単独でセクションを構成するなら、Sectioning contentで囲んで、Heading contentで見出しをつける（「リスト例１」を参照）。

  
          <section>
          <h1>リストの見出し</h1>
          <ul>
            <li>リスト項目１</li>
            <li>リスト項目２</li>
          </ul>
          </section>
          

• 上記において、該当リストが特にナビゲーションリンクのリストなら、nav要素で囲んで、Heading contentで見出しをつけるのが適切（「リスト例２」を参照）。

  
          <nav>
          <h1>目次</h1>
          <ul>
            <li><a href="example1.html">記事１へのリンク</a></li>
            <li><a href="example2.html">記事２へのリンク</a></li>
          </ul>
          </nav>
          

• 該当リストがfigure要素の内容たりうるなら、figure要素で囲んで、figcaption要素でキャプションをつける（「リスト例３」を参照）。

  
          <figure>
          <figcaption>リストのキャプション</figcaption>
          <ul>
            <li>リスト項目１</li>
            <li>リスト項目２</li>
          </ul>
          </figure>
          

• 意味合いを考慮して、キャプションっぽいものがdt要素、該当リストがそれ全体でdd要素に該当すると確信できるなら、dl要素による構文もありうる（「リスト例４」を参照）。

  
          <dl>
          <dt>リストのキャプションっぽいもの</dt>
          <dd>
          <ul>
            <li>リスト項目１</li>
            <li>リスト項目２</li>
          </ul>
          </dd>
          </dl>
          

• キャプションっぽいものなら、該当リストの直前にp要素で添えてやる程度でいいかもしれない（「リスト例５」を参照）。どうしてもまとまりを作りたいなら、さらにdiv要素で囲んでおく（文書構造上は意味がないが）。

  
          <div title="このブロックはリストだよ">
          <p>リストのキャプションっぽいもの</p>
          <ul>
            <li>リスト項目１</li>
            <li>リスト項目２</li>
          </ul>
          </div>
          

• 上記の場合、div要素を使わずに、前後をhr要素で区切ってやるのもありかもしれない（「リスト例６」を参照）。

  
          <hr />
          <p>リストのキャプションっぽいもの</p>
          <ul>
            <li>リスト項目１</li>
            <li>リスト項目２</li>
          </ul>
          <hr />
          

• WAI-ARIAのaria-labelledby属性を使って、ラベルとする（「リスト例７」を参照）。これなら、しっかりと関連付けができる。

  
          <p id="midasi">リストのラベル</p>
          <ul aria-labelledby="midasi">
            <li>リスト項目１</li>
            <li>リスト項目２</li>
          </ul>
          

• 該当リストがdetails要素の内容たりうるなら、details要素で囲んで、summary要素でキャプションをつける（「リスト例８」を参照）。

  
          <details>
          <summary>リストのキャプション</summary>
          <ul>
            <li>リスト項目１</li>
            <li>リスト項目２</li>
          </ul>
          </details>
          

表示確認

ソース

  これまでに訪れた国・地域・都市の一覧
  <ul>
    <li>アメリカ合衆国
    <ul>
      <li>ニューヨーク州
      <ul>
        <li>ニューヨーク</li>
        <li>バッファロー</li>
      </ul></li>
      <li>カリフォルニア州
      <ul>
        <li>ロサンゼルス</li>
        <li>サンディエゴ</li>
      </ul></li>
    </ul></li>
    <li>日本国
    <ul>
      <li>北海道
      <ul>
        <li>札幌市</li>
        <li>函館市</li>
      </ul></li>
      <li>埼玉県
      <ul>
        <li>さいたま市</li>
        <li>川越市</li>
      </ul></li>
    </ul></li>
  </ul>
  

表示結果

これまでに訪れた国・地域・都市の一覧

• アメリカ合衆国
  • ニューヨーク州
    • ニューヨーク
    • バッファロー
  • カリフォルニア州
    • ロサンゼルス
    • サンディエゴ
• 日本国
  • 北海道
    • 札幌市
    • 函館市
  • 埼玉県
    • さいたま市
    • 川越市