HTMLリストの使い方完全ガイド｜ul・ol・dlタグの違いと書き方を実例つきで解説

HTMLには、用途に応じて使い分ける3種類のリスト要素が用意されています。

• 順序なしリスト（最もよく使われる）
• 順序付きリスト
• 記述リスト（定義リスト）

順序なしリスト（ul要素）

順序なしリストは <ul> 要素で定義し、リストの各項目は <li> 要素で記述します。

<ul>
  <li>りんご</li>
  <li>バナナ</li>
  <li>オレンジ</li>
</ul>

表示結果：

• りんご
• バナナ
• オレンジ

デフォルトでは「・」（黒丸）のビュレットマークが付きますが、CSSを使えばマークの種類や位置を自由にカスタマイズできます。

順序付きリスト（ol要素）

順序付きリストは <ol> 要素で定義し、こちらも各項目は <li> 要素で記述します。

<ol>
  <li>りんご</li>
  <li>バナナ</li>
  <li>オレンジ</li>
</ol>

表示結果：

1. りんご
2. バナナ
3. オレンジ

デフォルトでは先頭から1、2、3と番号が振られますが、start属性やreversed属性、type属性を使えば開始番号や番号の種類（数字・ローマ数字・アルファベットなど）を変更できます。もちろん、CSSによるデザインのカスタマイズも可能です。

記述リスト（dl要素）

記述リストは、順序付き・順序なしリストとは仕組みが大きく異なり、「用語」と「その説明」をセットで表現するためのリストです。構成要素は次の3つです。

• <dl>：記述リスト全体を定義する親要素
• <dt>：説明対象となる用語（名前）を定義する子要素
• <dd>：直前の用語（<dt>）に対する説明・定義・値を記述する子要素

以下は具体的な使用例です。

<dl>
  <dt>アフリカゾウ</dt>
  <dd>現存する世界最大の陸上動物。</dd>
  <dt>キリン</dt>
  <dd>地球上で最も背の高い動物。</dd>
  <dt>シロナガスクジラ</dt>
  <dd>知られている限り史上最大の動物。</dd>
</dl>

表示結果：

アフリカゾウ

現存する世界最大の陸上動物。

キリン

地球上で最も背の高い動物。

シロナガスクジラ

知られている限り史上最大の動物。

記述リストは現代のHTMLでは使用頻度が低めです。よく見られるのは用語集（グロッサリー）の作成やメタデータの表示といった用途ですが、同じ見た目は他の要素とCSSの組み合わせでも実現できます。ただし、「用語と説明」という意味的な構造を正しくマークアップしたい場合には、記述リストが最適な選択肢となります。