HTML リスト

HTMLは順序リスト、無序列表、定義リストをサポートしています。

例

無序列表
この例では、無序列表を示しています。
順序リスト
この例では、順序リストを示しています。

（更多の例はこのページの下部にあります。。）

無序列表

無序列表はプロジェクトのリストで、リスト項目は太字の丸い点（典型的な小さな黒い丸）でマークされます。

無序列表は<ul>タグで始まり、各リストアイテムは<li>で始まります。

<ul>
<li>コーヒー</li>
<li>ミルク</li>
</ul>

ブラウザの表示例：

  • コーヒー
  • ミルク

リスト項目内部には、段落、改行、画像、リンク、その他のリストなどを使用できます。

順序リスト

同様に、順序付きリストも一つのプロジェクトリストであり、リスト項目は数字でマークされます。

順序付きリストは <ol> タグで始まります。各リスト項目は <li> タグで始まります。

<ol>
<li>コーヒー</li>
<li>ミルク</li>
</ol>

ブラウザの表示例：

  1. コーヒー
  2. ミルク

リスト項目内部には、段落、改行、画像、リンク、その他のリストなどを使用できます。

定義リスト

カスタムリストは単なるプロジェクトリストではなく、プロジェクトとその注釈の組み合わせです。

カスタムリストは <dl> タグで始まります。各カスタムリスト項目は <dt> で始まります。各カスタムリスト項目の定義は <dd> で始まります。

<dl>
<dt>コーヒー</dt>
<dd>ブラックホットドリンク</dd>
<dt>ミルク</dt>
<dd>ホワイトコールドドリンク</dd>
</dl>

ブラウザの表示例：

コーヒー
ブラックホットドリンク
ミルク
ホワイトコールドドリンク

定義リストのリスト項目内部には、段落、改行、画像、リンク、その他のリストなどを使用できます。

さらに多くの例

異なるタイプの無序列表
この例では、無序列表を示します。
異なるタイプの順序付きリスト
この例では、異なるタイプの順序付きリストを示します。
ネストリスト
この例では、リストのネスト方法を示します。
ネストリスト 2
この例では、より複雑なネストリストを示します。
定義リスト
この例では、定義リストを示します。

リストタグ

タグ 説明
<ol> 順序付きリストを定義します。
<ul> 無序列表を定義します。
<li> 定義のリスト項目を定義します。
<dl> 定義のリストを定義します。
<dt> 定義の項目を定義します。
<dd> 定義の説明を定義します。
<dir> 廃止されました。<ul>を使用してください。
<menu> 廃止されました。<ul>を使用してください。