HTMLのリスト要素の基本 — ul・ol・dlの違いと正しい使い方

2026年3月13日

HTMLには3種類のリスト要素があります。

「なんとなく箇条書き」で使い分けていると、SEOやアクセシビリティに悪影響が出ることも。

実は違いをよくわかってなかった。

それぞれの意味と正しい使い方を解説します。

1. ul — 順序のないリスト（Unordered List）

順番に意味がない項目を並べるときに使います。

並び順が変わっても意味が変わらないリストが対象です。

向いている場面

サイトのナビゲーションメニュー
機能・特徴の一覧
タグやカテゴリの列挙

基本の書き方

HTML

<ul>
  <li>りんご</li>
  <li>みかん</li>
  <li>ぶどう</li>
</ul>

HTML

ネスト（入れ子）の例

HTML

<ul>
  <li>果物
    <ul>
      <li>りんご</li>
      <li>みかん</li>
    </ul>
  </li>
  <li>野菜
    <ul>
      <li>にんじん</li>
      <li>ほうれん草</li>
    </ul>
  </li>
</ul>

HTML

⚠️ ulのやってはいけないパターン

① <li>を経由せず<ul>を直接ネストする

以下のように、ulを重ねたいとき、liを挟まずにulを続けることはやってはいけません。

HTML

<!-- NG -->
<ul>
  <ul>
    <li>りんご</li>
  </ul>
</ul>

<!-- OK -->
<ul>
  <li>果物
    <ul>
      <li>りんご</li>
    </ul>
  </li>
</ul>

HTML

② インデント・スタイル目的だけで使う

字下げしたいだけならCSSのpaddingで対応してください。

スクリーンリーダーが「リストが〇個あります」と余分に読み上げてしまいます。

③ <li>の中にブロック要素を乱用する

<div>や<p>を<li>の中に過剰に詰め込むのは避けましょう。

テキストとインライン要素のみにとどめるのが基本です。

2. ol — 順序のあるリスト（Ordered List）

順番に意味がある項目を並べるときに使います。

「1→2→3」の流れが大切なコンテンツが対象です。

向いている場面

手順・インストールガイド
ランキング
レシピの調理手順

基本の書き方

HTML

<ol>
  <li>材料を用意する</li>
  <li>フライパンを熱する</li>
  <li>食材を炒める</li>
  <li>味付けして完成</li>
</ol>

HTML

属性で番号をカスタマイズできます

HTML

<!-- 5番から開始 -->
<ol start="5">
  <li>第5位：東京</li>
  <li>第6位：大阪</li>
</ol>

<!-- 逆順（3, 2, 1...） -->
<ol reversed>
  <li>金賞</li>
  <li>銀賞</li>
  <li>銅賞</li>
</ol>

<!-- アルファベット（A, B, C...） -->
<ol type="A">
  <li>選択肢A</li>
  <li>選択肢B</li>
</ol>

HTML

⚠️ olのやってはいけないパターン

① 順番に意味がないのにolを使う

「番号付きのほうが見やすい」という見た目の理由だけでolを選ばないでください。

順番が意味を持たないなら<ul>が正解です。

② CSSで番号を消してolを使う

HTML

<!-- NG：順番に意味がないのにolを使っている -->
<ol style="list-style: none;">
  <li>りんご</li>
  <li>みかん</li>
</ol>

<!-- OK -->
<ul style="list-style: none;">
  <li>りんご</li>
  <li>みかん</li>
</ul>

HTML

③ value属性で番号を手動操作する

<li value="3">のように番号を飛ばすと、実際の順序と表示番号がずれて混乱のもとになります。

変則的な番号が必要なら、テキストで番号を書くか構成を見直しましょう。

3. dl — 説明リスト（Description List）

用語と説明のペアを表すときに使います。

辞書のように「言葉：意味」という関係性があるコンテンツが対象です。

向いている場面

用語集・FAQ
商品仕様（項目名：値）
プロフィール情報

<dt>（用語）と<dd>（説明）をセットで使います。

基本の書き方

HTML

<dl>
  <dt>HTML</dt>
  <dd>Webページの構造を定義するマークアップ言語。</dd>

  <dt>CSS</dt>
  <dd>Webページのスタイルを指定する言語。</dd>

  <dt>JavaScript</dt>
  <dd>Webページに動的な機能を追加するプログラミング言語。</dd>
</dl>

HTML

1つの用語に複数の説明、複数の用語に1つの説明も可能です

HTML

<!-- 1つのdtに複数のdd -->
<dl>
  <dt>Python</dt>
  <dd>汎用プログラミング言語。</dd>
  <dd>AI・データサイエンス分野で広く使われる。</dd>
</dl>

<!-- 複数のdtに1つのdd -->
<dl>
  <dt>UI</dt>
  <dt>ユーザーインターフェース</dt>
  <dd>人がコンピュータと対話するための画面・操作部分。</dd>
</dl>

HTML

⚠️ dlのやってはいけないパターン

① dtとddを逆に書く

HTML

<!-- NG -->
<dl>
  <dd>Webページの構造を定義するマークアップ言語。</dd>
  <dt>HTML</dt>
</dl>

HTML

必ずdt（用語）→dd（説明）の順で書いてください。

② テーブルの代わりに使う

「2列に並べたい」だけの理由でdlを使うのはNGです。行と列の関係があるデータは<table>を使いましょう。

③ dlの直接の子にdt・dd以外を入れる

HTML

<!-- NG -->
<dl>
  <p>このリストについて...</p>
  <dt>HTML</dt>
  <dd>マークアップ言語。</dd>
</dl>

<!-- OK：divでのグループ化は仕様上許可されている -->
<dl>
  <div>
    <dt>HTML</dt>
    <dd>マークアップ言語。</dd>
  </div>
</dl>

HTML

まとめ

要素	名前	使う場面	子要素
`<ul>`	順序なしリスト	順番に意味がない列挙	`<li>`
`<ol>`	順序ありリスト	手順・ランキングなど順序が重要な列挙	`<li>`
`<dl>`	説明リスト	用語と説明のペア、FAQ、仕様表	`<dt>` / `<dd>`