リストは、皆さんが思っているよりも一般的です。プログラミングのクラスを受講したことがある場合、最初のプロジェクトは買い物リストや 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> には、type、reversed、start の 3 つの要素固有の属性があります。
列挙型の 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> 属性は 1 つだけです。整数型の value です。value は、<li> が順序付きリスト内にネストされている場合にのみ <li> で使用できます。順序なしリストやメニューでは意味がありません。競合がある場合は、<ol> の開始値をオーバーライドします。
value は、順序付きリスト内のリスト項目の番号です。後続のリスト項目では、その項目にも value 属性が設定されていない限り、設定された値から番号付けを続けます。値は順序どおりである必要はありませんが、順序どおりでない場合は、正当な理由が必要です。
<ol> の reversed をリストアイテムの value 属性と組み合わせると、ブラウザは <li> を指定された値に設定し、その前の <li> をカウントアップし、その後の <li> をカウントダウンします。2 番目のリストアイテムに value 属性がある場合、カウンタはその 2 番目のリストアイテムでリセットされ、以降の値は 1 ずつ減少します。
これらはすべて CSS カウンタで制御することもできます。::marker 擬似要素の生成コンテンツを提供します。数字が単なる表示用である場合は、CSS を使用します。番号付けが意味論的に重要である場合や、意味がある場合は、これらの属性を使用します。
ここまで、テキストノードのみを含むリスト項目を見てきました。リスト項目にはすべてのフロー コンテンツを含めることができます。つまり、見出しなど、<body> の直接の子としてネストできる body 内のすべての要素を含めることができ、コンテンツをセクションに分割できます。
MLW には順序なしリストがいくつかあります。[instructors] セクションの教師はリストです。[reviews] セクションの生徒のマシンもリストです。インストラクター <ul> には、教師ごとに 1 つずつ、2 つの <li> があります。各 <li> 内には、画像と段落があります。
<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> があります。それぞれに、画像、引用ブロック、2 つの改行を含む 3 行の段落が含まれています。
<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.</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 ですが、CSS でリストの表示を削除すると（display: grid または list-style-type: none の設定を含む）、VoiceOver（iOS と MacOS のスクリーン リーダー）が Safari で暗黙的なセマンティクスを削除する可能性があります。これはバグではなく機能です。一般的に、セマンティック要素を使用する場合は、ロール属性を追加する必要がないため、追加しないでください。また、ユーザーがリスト内のアイテムの数を知ることでメリットを得られる場合など、ユーザーがリストであることを本当に知る必要がある場合を除き、リストに番号を追加する必要もありません。
説明リスト
説明リストは、一連の（0 個以上の）説明用語（<dt>）とその説明の詳細（<dd>）を含む説明リスト（<dl>）要素です。これらの 3 つの要素の元の名前は、「定義リスト」、「定義用語」、「定義定義」でした。生活水準の名前が変更された。
順序付きリストや順序なしリストと同様に、ネストできます。順序付きリストや順序なしリストとは異なり、Key-Value ペアで構成されます。<ul> や <ol> と同様に、<dl> は親コンテナです。<dt> 要素と <dd> 要素は <dl> の子です。
マシンとその職歴と願望のリストを作成できます。<dl> で示される生徒の説明リストは、<dt> 要素で指定された用語のグループと、<dd> 要素で指定された各用語の説明を囲みます。この場合、「用語」は生徒の名前、「説明」は各生徒のキャリア目標です。
この説明リストは、実際には MLW ページの一部ではありません。説明リストは用語と定義だけを対象とするものではないため、要素の名前がより一般的なものになりました。
用語とその定義や説明のリスト、または Key-Value ペアの同様のリストを作成する場合、説明リスト要素は適切なセマンティクスを提供します。<dt> の暗黙的なロールは term で、listitem は別の許可されたロールです。<dd> の暗黙的なロールは definition であり、他のロールは許可されません。<ul> や <ol> とは異なり、<dl> には暗黙的な ARIA ロールはありません。<dl> は必ずしもリストではないため、これは理にかなっています。ただし、list ロールと group ロールは受け入れます。
通常、説明リストには同じ数の <dt> 要素と <dd> 要素が含まれます。ただし、説明リストは必ずしも用語と説明のペアを一致させる必要はありません。1 つの用語に複数の説明を付けたり、1 つの説明に複数の用語を付けたりすることもできます。たとえば、1 つの用語に複数の定義がある辞書などです。
各 <dt> には少なくとも 1 つの <dd> が関連付けられ、各 <dd> には少なくとも 1 つの <dt> が関連付けられます。隣接兄弟結合子または :has() 関係セレクタを使用して、これらの要素の可変数を CSS でターゲットにすることは可能ですが、必要に応じて、<div> を <dl> の子として含めることができ、1 つ以上の <dt> 要素または <dd> 要素（またはその両方）の親にすることができます。実際には、<dl> には他の子をいくつか含めることができます。<div>、<template>、<script> をネストすることは許可されています。説明リストの要素には、要素固有の属性はありません。
リンクとリストについて理解できたので、この 2 つを組み合わせてナビゲーションを作成しましょう。
理解度を確認する
リストに関する知識をテストします。
リストアイテム内に <h2> を含めることは有効ですか？
リストのタイプを定義する 3 つの要素を選択します。
<il><ol><dl><ul>