リストの特徴
HTML では、箇条書きのことをリストと呼ぶ。
順不同の箇条書きや、順序付きの箇条書きを表現することが出来る。
リストでは、ul タグや ol タグを親要素として記述し、箇条書きの内容は子要素として li タグを記述する。
また、リストは「入れ子（リストの中に更にリストを作る用法）」にすることが出来る。
p タグや br タグを使用すれば、リストに似た見た目を表現することも可能だが、HTML では文章を構造化して扱うことになっているため、p タグや br タグの組み合わせは正しい HTML とは言えない。
順不同リストのHTML
「順不同リスト」の作成には、まず ul タグでリストの開始を記述し、それ以降は箇条書きの内容を li タグで記述して行く。
箇条書きが終われば、最後に ul の終了タグを記述する。
これで順不同リストは完成。
また、li タグの箇条書きは、それぞれ別の行に分けて書いても構わない。
HTML ソースが長くなって見づらいようであれば、行を分けた方が良い。
<ul>
<li>いちご</li><li>みかん</li><li>りんご</li>
</ul>順序付きリストのHTML
「順序付きリスト」も順不同リストと同じで、まず ol タグでリストの開始を記述して行く。
それ以降に、li タグで箇条書きを記述して行く。
この際に、順序の数字を意識する必要はない。
Web ブラウザが表示する時に、自動的に上から数字を付けてくれる。
<ol>
<li>月曜日</li><li>火曜日</li><li>水曜日</li>
</ol>リストタグのまとめ
順不同リストの作成→ulタグ
順序付きリストの作成→olタグ
リストを入れ子にするHTML
外側の ul タグと li タグを記述して、その li タグの終了タグを記述する前に、内側の ul タグと li タグを記述して行く。
この位置関係は少し複雑だが、リストの入れ子は Web ページ制作でよく使われるので、正しく理解することが求められる。
もし間違った記述をすると、画面のレイアウトが大きく崩れる原因となる。
また、下図では HTML ソースを見やすくするために、内側のリストの行頭に半角スペースを入れている。
このように、半角スペースやタブを使って外側と内側に段差を付けることを「インデント」と呼ぶ。
複雑な HTML ソースを見やすくするための有効な方法である。
<ul>
<li>朝食
<ul><li>パン</li><li>目玉焼き</li></ul>
</li>
<li>昼食
<ul><li>うどん</li></ul>
</li>
<li>夕食
<ul><li>ハンバーグ</li><li>野菜スープ</li></ul>
</li>
</ul>外側のタグと内側のタグの位置関係をよく確認することが重要。