HTMLでは箇条書きリスト項目を作ることができます。例えば、果物の種類では、りんご、、バナナ、イチゴなどたくさんの種類をリストアップすることができますよね。リスト項目を一つのグループにしてまとめ、それぞれの項目を記述していきます。

番号なしリスト

<ul>タグの中に、<li>タグを記述していきます。それぞれ開始タグ、終了タグで囲います。先頭にリストマーク(大きいドット)が付くのが特徴です。

<h1>果物の種類</h1>
<ul>
<li>りんご</li>
<li>バナナ</li>
<li>いちご</li>
</ul>

リストの階層

リストの階層をさらに深く設定することも可能です。りんごの種類をさらにリスト化してみましょう。

<h1>果物の種類</h1>
<ul>
<li>りんご
<!---- りんごの種類をさらにリスト化する ---->
        <ul>
        <li>ジョナゴールド</li>
        <li>つがる</li>
        </ul>
</li>
<li>バナナ</li>
<li>いちご</li>
</ul>

● リストの注意点

「ul,olタグ」の中に入れることができるのは「liタグ」のみですが、「liタグ」の中には、様々なタグを含めることができます。

番号付きリスト

<ol>タグの中に、<li>タグを記述していきます。それぞれ開始タグ、終了タグで囲います。先頭に「番号」が付くのが特徴です。

<h1>人気のメニューベスト3</h1>
<ol>
<li>唐揚げ</li>
<li>麻婆豆腐</li>
<li>ラーメン</li>
</ol>

順番に意味があるリスト

番号付きリストは、主に順番に意味があるリストに使われます。「ランキング」や「料理の手順」なども該当します。あなたのベスト3はどんなものですか？好きな食べ物やアーチストなどを教えてくださいね！

定義リスト

ある「用語」とその「説明」をセットにして記述する際に使用します。例えば、「きりんさん」→「首が長いです」などという意味合いで、用語と説明をペアとして表すことができます。dl タグの中に入れることができるのは「dt」「dd」のみです。それ以外のタグは入れることが出来ません。

人気の動物

きりんさん

首が長い動物です。

ゾウさん

鼻が長い動物です。

<h1>人気の動物</h1>
<dl>
<dt>きりんさん</dt>
<dd>首が長い動物です。</dd>
<dt>ゾウさん</dt>
<dd>鼻が長い動物です。</dd>
</dl>

● 様々な要素で使われる定義型リスト

用語の定義に限らず、例えば更新情報の「日付」と「更新内容」、Q&A の「質問」と「答え」といった表現にも使用することができます。例えば、Q「送料はかかりますか？」に対し、A「全国無料でお届けします。」といったQ&A形式もセット記述が適用されます。

テキストだけに限らず、画像に対する説明とのペアも定義型リストが該当します。そのレイアウトは様々ですので、CSSを使ってうまく配置していきます。

価格・日付・カテゴリーなどが商品画像とペアになっていたり、下記のようなレイアウトもよく見かけるパターンです。<ul>リストタグは、ナビゲーションにも用いられ、非常に多くのウェブサイトで利用されてる重要タグです。