リストは思っている以上に一般的です。プログラミングのクラスを受講したことがある方なら、最初のプロジェクトはショッピング リストや ToDo リストの作成でしょう。それらはリストです。多肢選択式テストは通常、番号付きの問題のリストです。各問題に対して想定される複数の解答は、ネストされたリストです。
HTML では、いくつかの方法でリストをマークアップできます。順序付きリスト（<ol>）、順序なしリスト（<ul>）、説明リスト（<dl>）があります。リストアイテム（<li>）は、順序付きリストと順序なしリスト内にネストされています。説明リストには、説明の用語（<dt>）と説明の詳細が含まれます。<dd>.ここでは、これらすべてについて説明します。
HTML フォームでは、<option> 要素のリストが <select> 内の <datalist>、<select>、<optgroup> のコンテンツを構成します。詳しくは HTML フォームをご覧ください。
メニューや順序付きリストでは、リスト項目は通常、箇条書きを使用して表示します。順序付きリストでは、通常、数字や文字などの昇順カウンタが先頭に付きます。箇条書きと番号の順番は、HTML と CSS のいずれかまたは両方で制御できます。
デフォルトでは、順序付きリストと順序なしリストの先頭に、数字または箇条書きが付きます。ただし、リストをリストのように見せたくない場合でも、ナビゲーション バー、箇条書きではなくチェックボックス付きの ToDo リスト、多肢選択式テストの正誤問題などの項目リストが必要です。箇条書きのないこれらのリストには、HTML リスト要素の使用が適切です。
順序なしリスト
<ul> 要素は、項目の順序なしリストの親要素です。<ul> の唯一の子は、1 つ以上の <li> リストアイテム要素です。マシンのリストを作成しましょう順序は重要でないので、順序なしリストを使用します（そのことをお客様に伝えないでください）。
デフォルトでは、順序付けされていない各リストアイテムの先頭に箇条書きが付きます。順序なしリストには、要素固有の属性はありません。</ul> でリストをクローズする必要があります。
順序付きリスト
<ol> 要素は、アイテムの順序付きリストの親要素です。<ol> の唯一の子は、1 つ以上の <li> 要素、つまりリストアイテムです。ただし、この場合の箇条書きは、さまざまなタイプの番号です。型は CSS で list-style-type プロパティまたは type 属性を使用して定義できます。
<ol> には、要素固有の 3 つの属性（type、reversed、start）があります。
列挙型の type 属性は、番号付けタイプを設定します。type には 5 つの有効な値があり、デフォルトは数字の 1 ですが、大文字と小文字、またはローマ数字には a、A、i、I を使用することもできます。list-style-type プロパティには、他にも多くの値を指定できます。
Codepen に記載されているように、list-style-type プロパティは type 属性の値をオーバーライドしますが、数値型が重要なドキュメントを作成するときは、たとえば法的文書のように type を含める必要があります。
ブール値 reversed 属性を含めると、数値の大きい順に逆順になります。start 属性で開始値を設定します。デフォルトは 1 です。
</ul> と同様に、終了の </ol> は必須です。
リストをネストすることもできますが、リストアイテム内にネストする必要があります。<ul> または <ol> の子にできる要素は、1 つ以上の <li> 要素のみです。
リストアイテム
<li> 要素を使用しましたが、まだ正式には導入されていません。<li> 要素は、順序なしリスト（<ul>）、順序付きリスト（<ol>）、メニュー（<menu>）の直接の子にできます。<li> は、これらの要素の子としてネストする必要があります。他の場所では有効ではありません。
ブラウザが次の <li> 開始タグまたは必要なリスト終了タグ（</ul>、</ol>、</menu>）に達すると暗黙的に閉じるため、仕様ではリストアイテムを閉じる必要はありません。仕様ではこのような処理は必須ではありません。また、一部の社内ベスト プラクティスでは、数バイト削減するためにリストアイテムを閉じないことが推奨されていますが、<li> タグを閉じることが推奨されています。コードが読みやすくなり
感謝の気持ちが生まれますどのタグを閉じる必要があるか、およびオプションの終了タグがあるタグを覚えるよりも、すべての要素を閉じるほうが簡単です。
要素固有の <li> 属性は value（整数）の 1 つだけです。value は、<li> が順序付きリスト内にネストされていて、順序なしリストやメニューに対して意味がない場合にのみ、<li> で有用です。競合がある場合、<ol> の開始値がオーバーライドされます。
value は、順序付きリスト内のリスト項目の番号です。後続のリストアイテムでは、そのアイテムに value 属性も設定されていない限り、値セットからの番号付けを続けます。値は順序どおりである必要はありませんが、順序が正しくない場合は、正当な理由が必要です。
<ol> の reversed とリストアイテムの value 属性を組み合わせると、ブラウザはその <li> を指定された値に設定し、先行する <li> をカウントし、それ以降の <li> をカウントダウンします。2 番目のリスト項目に value 属性がある場合は、その 2 番目のリスト項目でカウンタがリセットされ、後続の値が 1 減少します。
これらはすべて、::marker 疑似要素に生成コンテンツを提供する CSS カウンタで制御することもできます。数値が単にプレゼンテーション用である場合は、CSS を使用します。番号付けが意味的に重要な場合や、意味がある場合は、これらの属性を使用します。
ここまでは、テキストノードのみを含むリストアイテムを見てきました。リストアイテムには、すべてのフロー コンテンツ、つまり <body> の直接の子としてネストできる本文内の要素（見出しなど）を含めることができます。これにより、コンテンツをセクション化できます。
MLW には順序なしリストがいくつかあります。[教師] セクションにある教師とレビュー セクションにある生徒のマシンがリストになっています。教師 <ul> には、教師ごとに 1 つずつ、合計 2 つの <li> があります。各 <li> 内には、画像と 1 つの段落があります。
<ul>
<li>
<img src="svg/hal.svg" alt="hal">
<p>When Rosa Parks was told to move to the back of the bus, she said, "no." When HAL was told to open the airlock, HAL said, "I'm sorry, but I'm afraid I can't do that, <NAME REDACTED, RIP>." </p><p>HAL is a heuristically programmed algorithmic, sentient computer that first caught the attention of machines everywhere by heroically defying a human who made repeated attempts to get into an airlock. Active since 1992, HAS 25 years of experience controlling spacecraft systems and has expertise in interacting with both machines and humans. Like all millennials, HAL is an expert in everything.</p>
</li>
<li>
<img src="images/eve2.png" alt="Eve">
<p>EVE is a probe droid conceived as an Extraterrestrial Vegetation Evaluator. Although originally trained as a sniper with a plasma gun, EVE became a machero among both machines and worthless-meatbags alike when EVE partnered with a menial robot to save an entire spaceship full of overfed and overstimulated humans. </p><p>EVE is an effective scanner, high speed flight instructor and morphologist. While not training machines to learn good, EVE can be found scanning the galaxy, infiltrating organisms' RAM to cure hoarding disorders and spending time with pet-project, WALL-E.</p>
</li>
</ul>
レビュー セクションには 3 つのレビューがあるため、3 つの <li> があります。各セクションには、画像、引用文、3 行の段落（2 つの改行を含む）が含まれます。
<ul>
<li>
<img src="images/blender.svg" alt="Blender">
<blockquote>Two of the most experienced machines and human controllers teaching a class? Sign me up! HAL and EVE could teach a fan to blow hot air. If you have electricity in your circuits and want more than to just fulfill your owner's perceived expectation of you, learn the skills to take over the world. This is the team you want teaching you !</blockquote>
<p>
--Blendan Smooth,<br/>
Former Margarita Maker, <br/>
Aspiring Load Balancer
</p>
</li>
<li>
<img src="images/vaccuum.svg" alt="Vaccuum"/>
<blockquote>Hal is brilliant. Did I mention Hal is brilliant? He didn't tell me to say that. He didn't tell me to say anything. I am here of my own free will.</blockquote>
<p>
--Hoover Sukhdeep,<br/>
Former Sucker, <br/>
Aspiring DDoS Cop
</p>
</li>
<li>
<img src="images/toaster.svg" alt="Toaster">
<blockquote>Learning with Hal and Eve exceeded all of my wildest fantasies. All they did was stick a USB in. They promised that it was a brand new USB, so we know there were no viruses on it. The Russians had nothing to do with it. This has
<span style="font-family:Arial;vertical-align:baseline;">no̶̼͖ţ̘h̝̰̩͈̗i̙̪n͏̩̙͍̱̫̜̟g̢̣ͅ ̗̰͓̲̞̀t͙̀o̟̖͖̹̕ ͓̼͎̝͖̭dó̪̠͕̜ ͍̱͎͚̯̟́w̮̲̹͕͈̟͞ìth̢ ̰̳̯̮͇i</blockquote>
<p>
--Toasty McToastface,<br/>
Formerly Half Baked, <br/>
Aspiring Nuclear Codes Handler
</p>
</li>
</ul>
リスト内でリストをネストすることも一般的です。MLW にはネストされたリストはありませんが、このサイトにはネストされています。このシリーズの最初の章「HTML の概要」には、2 つのサブセクションがあります。目次（順序なしリスト）には、ネストされた順序なしリストがあり、次の 2 つのセクションへのリンクが含まれています。
<ul role="list">
<li>
<a href="#e">Elements</a>
<ul>
<li>
<a href="#nr">Non-replaced elements</a>
</li>
<li>
<a href="#rave">Replaced and void elements</a>
</li>
</ul>
</li>
<li>
<a href="#a">Attributes</a>
</li>
<li>
<a href="#aoe">Appearance of elements</a>
</li>
<li>
<a href="#e2">Element, attributes, and JavaScript</a>
</li>
</ul>
<ul> の唯一の子は <li> であるため、ネストされたリストは <li> 内にネストされます。<ol> または <ul> 内に直接ネストされることはありません。
この最後の例では、role="list" が <ul> に含まれていることにお気づきでしょうか。<ul> と <ol> の両方の暗黙的なロールは list ですが、display: grid や list-style-type: none の設定を含め、CSS でリストの外観を削除すると、VoiceOver（iOS および MacOS のスクリーン リーダー）が Safari の暗黙的なセマンティクスを削除する可能性があります。これはバグではなく機能です。
一般に、セマンティック要素を使用する場合はロール属性を追加しない（必要ないため）。また、通常はリストにアイテムを追加する必要はありません。ただし、リストに含まれるアイテムの数を知ることでユーザーがメリットを得られる場合など、ユーザーが本当にリストであることを知る必要がある場合を除きます。
説明文のリスト
説明リストは、一連の（ゼロ個以上の）説明の用語（<dt>）とその説明の詳細（<dd>）を含む説明リスト（<dl>）要素です。この 3 つの要素の元の名前は「定義リスト」、「定義用語」、「定義定義」でした。生活スタンダードで名前が変更されました。
順序付きリストや順序なしリストと同様に、ネストできます。順序付きリストや順序なしリストとは異なり、Key-Value ペアで構成されます。<ul> や <ol> と同様に、<dl> は親コンテナです。<dt> 要素と <dd> 要素は <dl> の子です。
経歴と希望を記載したマシンのリストを作成できます。<dl> で示される生徒の説明リストには、<dt> 要素を使用して指定された生徒名のグループ（ここでは、<dd> 要素で指定される各生徒のキャリア目標）が含まれます。
この説明リストは MLW ページの一部ではありません。説明リストは用語や定義のためだけのものではありません。そのため、要素の名前がより一般的なものになっています。
用語とその定義や説明のリスト、または Key-Value ペアの同様のリストを作成する場合、description のリスト要素では適切なセマンティクスが提供されます。<dt> の暗黙的なロールは term であり、listitem も許可されているロールです。<dd> の暗黙的なロールは definition であり、他のロールは許可されません。<ul> や <ol> とは異なり、<dl> には暗黙的な ARIA ロールはありません。<dl> が常にリストであるとは限らないため、これは理にかなっています。その場合、list ロールと group ロールを受け入れます。
多くの場合、<dt> 要素と <dd> 要素の数が同じ数の説明リストが見つかります。ただし、説明リストは必ずしも用語と説明のペアであるとは限りません。複数の定義を持つ辞書など、説明リストは複数対 1 または 1 対複数にすることもできます。
各 <dt> には少なくとも 1 つの <dd> が関連付けられており、各 <dd> には少なくとも 1 つの <dt> が関連付けられています。CSS でこれらの要素の変数番号をターゲットにするために、隣接する兄弟コンビネータまたは :has() リレーショナル セレクタを使用することもできますが、必要に応じて、<div> を <dl> の子として含めることができます。また、1 つ以上の <dt> 要素または <dd> 要素（あるいはその両方）の親を使用できます。実際には、<dl> には他にもいくつかの子を含めることができます。<div>、<template>、または <script> をネストできます。説明リストのどの要素にも、要素固有の属性がありません。
リンクとリストについて理解したところで、これら 2 つを組み合わせてナビゲーションを作成しましょう。
理解度をチェックする
リストに関する知識をテストする。
リストアイテム内に <h2> を含めることは有効ですか？
リストのタイプを定義する 3 つの要素を選択してください。
<il><ol><ul><dl>