リスト
Webページの驚くほど多くの部分が実はリストです。ナビゲーションメニュー、検索結果、商品グリッド、レシピの材料、パスワードをリセットする手順。コンテンツが関連アイテムのセットである場合はいつでも、HTMLにはそのことを示す要素があり、それを使うことはブラウザと支援ソフトウェアを使用している人が、それらのアイテムが一緒に属していることを知ることを意味します。
順序なしリスト
アイテムの順序が重要でない場合、**順序なしリスト**を使用します。買い物リストを考えてください。牛乳、パン、卵。どちらを最初に書いても構いません。これらはグループ化された多くのものです。
2つのタグで構築します。<ul>タグはリスト全体をラップし、各アイテムは独自の<li>タグ（「リストアイテム」）の内側に入ります。
<ul>
<li>牛乳</li>
<li>パン</li>
<li>卵</li>
</ul>ブラウザはそれぞれのアイテムを独自の行に表示し、その前に箇条書き記号を付けます。あなた自身が箇条書きや改行を追加したのではなく、ブラウザがそれをします。これはあなたがそれがリストであることをそれに伝えたからです。
<ul>を使用し、各アイテムを独自の<li>でラップします。ブラウザは箇条書き記号と改行をあなたのために追加しますので、あなたはそれらを手で入力することはありません。それを信頼するのに時間がかかりました。私はドットを自分で追加したいと思い続けていました。 順序付きリストとその属性
時々、順序は重要です。レシピのステップ、レース内の位置、次々と従う指示。そのためには**順序付きリスト**を使用します。これはアイテムに番号を付けます。
それはまったく順序なしリストのように機能しますが、コンテナは<ul>の代わりに<ol>です。
<ol>
<li>オーブンを180℃に予熱する</li>
<li>小麦粉と砂糖を混ぜる</li>
<li>缶に注ぎ、25分焼く</li>
</ol>これでブラウザはアイテムの前に箇条書き記号の代わりに1、2、3を配置します。後で中央に新しいステップを追加する場合、番号は自分自身を再度番号付けします。数字を入力することはありません。これが<ol>を使用する意味です。
<ol>に到達し、ブラウザはアイテムに番号を付けます。ステップを追加または削除すると、番号は自分自身を修正しますので、1.または2.を手で入力することはありません。前と同じ<li>アイテムで、異なるコンテナのみ。 説明リスト
各アイテムが本当にペアである場合のための3番目の種類のリストがあります。単語とその意味、ラベルとその値。用語集は最も明確な例であり、各用語の後にそれが意味することが続きます。
これは**説明リスト**であり、3つのタグを使用します。<dl>は全体をラップし、<dt>は各用語を保持し、<dd>はそれに伴う説明を保持します。
<dl>
<dt>HTML</dt>
<dd>ページの構造を説明する言語。</dd>
<dt>CSS</dt>
<dd>ページの見た目を説明する言語。</dd>
</dl>ブラウザはそれぞれの説明をその用語の下でインデントして表示するため、ペアリングは一目瞭然です。「dt」を定義する言葉として、「dd」を定義として考えてください。
<dl>、各用語に<dt>、その後に続く説明に<dd>を使用します。用語集はあなたの頭に保つべき画像です。単語の後に定義、単語の後に定義。 リストのネスト
リストは他のリストの内側に入ることができます。メニューには「飲料」があり、その下にホットオプションとコールドオプションがあり、それぞれが独自の選択肢を持つ場合があります。1つのリストを別のリストの内側に置くことを**ネスト**と呼びます。
正しく理解する重要なこと。内側のリストはアイテムの間に浮かぶのではなく、<li>の内側に入ります。全体の<ul>（または<ol>）をそれが属するリストアイテムの内側に配置します。
<ul>
<li>飲料
<ul>
<li>コーヒー</li>
<li>紅茶</li>
</ul>
</li>
<li>スナック</li>
</ul>「コーヒー」と「紅茶」は「飲料」の一部なので、彼らの小さなリストは「飲料」アイテムの内側に住んでいます。ブラウザは内側のリストを少し多くインデントするため、それはそれの上のアイテムに属することがわかります。
<li>の内側にドロップし、アイテム間で緩くなりません。ブラウザはそれをインデントするため、それはアイテムの上の一部であることがわかります。その内側の<li>ルールはここで覚えるべき1つのことです。