HTMLのリストul・ol・dlの使い分け｜入れ子とアクセシビリティ

順番に意味がなければul、手順や順位ならol、用語と説明の組み合わせならdlを使います。見た目ではなく内容の関係で選ぶと、スクリーンリーダーや検索エンジンにも構造が伝わります。

情報確認日：2026年7月27日

結論：まず押さえるポイント

HTMLのリストul・ol・dlの使い分けの基本

ulとolの各項目はliで表します。dlでは名前をdt、説明をddにします。ナビゲーションやカードの並びでも、項目同士が同種の集合ならリストが適切な場合があります。

最小の実装例

HTML

<h2>申し込み手順</h2>
<ol class="steps">
  <li>プランを選ぶ</li>
  <li>必要事項を入力する</li>
  <li>内容を確認して送信する</li>
</ol>

<h2>用語</h2>
<dl class="terms">
  <dt>HTML</dt>
  <dd>文書の構造を表す言語です。</dd>
</dl>

CSS

.steps {
  padding-inline-start: 1.5rem;
}

.steps li + li {
  margin-block-start: 0.75rem;
}

.terms dt {
  font-weight: 700;
}

CSSでマーカーや余白を変えても、HTMLは内容の意味に合わせます。番号が参照や手順に必要なら、CSSだけで擬似的な番号を付けずolを使います。

実務で使うときの考え方

入れ子のリスト

<ul>
  <li>飲み物
    <ul>
      <li>コーヒー</li>
      <li>紅茶</li>
    </ul>
  </li>
</ul>

子のulは親liの内側に置きます。ulの直下へ別のulを置く構造は避けます。

start・value属性

olの番号を途中から始めるならstart、個別項目の番号を変えるならliのvalueを使えます。見た目だけの都合で番号を飛ばすと読み手が混乱します。

アクセシビリティの注意

CSSでlist-style: noneを指定すると、ブラウザと支援技術の組み合わせによってリストとしての読み上げが変わる場合があります。ナビゲーションではnav要素やaria-labelも併用し、実際の支援技術で確認します。マーカーだけで重要度を伝えず、文言にも意味を含めます。

よくある失敗と直し方

余白のためにulを使う

段落やレイアウトの余白はCSSで指定し、関係のない内容をリストにしません。

olを番号付き見出しの装飾に使う

独立した章なら見出し構造を使い、順序が意味を持つ項目だけolにします。

dlで2列レイアウトを作る

名前と説明の関係がないデータ表はtable、一般レイアウトはdivなど適切な要素を使います。

WordPressで使う場合

WordPressのブロックエディターでは「リスト」ブロックからulとolを選べます。見た目を変えるためにHTML編集で構造を壊さず、テーマCSSのクラスまたはブロックスタイルを使います。

よくある質問

まとめ

HTMLリストは見た目ではなく、項目間の関係でul・ol・dlを選びます。直下要素と入れ子を正しく保ち、CSSで装飾しても支援技術へ意味が伝わるか確認してください。

関連する基礎記事

• HTMLフォームの作り方
• CSSの書き方と読み込み方法
• レスポンシブWebデザインのCSS入門

参照した公式資料

• MDN Web Docs: ul要素（順不同リスト）
• MDN Web Docs: ol要素（順序付きリスト）
• MDN Web Docs: dl要素（説明リスト）