リストは、思っているよりも一般的です。プログラミングの授業を受講したことがあるなら、最初のプロジェクトは、 ToDo リストも作成できますリストです多肢選択式テストは通常、番号付きの問題リストです。 ネストされたリストです
HTML では、リストをマークアップする方法がいくつかあります。順序リスト（<ol>）、順序なしリスト（<ul>）、説明リスト（<dl>）があります。
リスト項目（<li>）が順序付きリストと順序なしリスト内にネストされています。説明リストには、説明文（<dt>）と説明があります
詳細 <dd>. ここではすべてについて説明します。
HTML フォームでは、<option> 要素のリストが <select> 内の <datalist>、<select>、<optgroup> のコンテンツを構成します。これらについては、HTML フォームで説明します。
メニューや順序なしリストでは、リスト項目は通常、箇条書きで表示します。順序付きリストでは、通常、 アライメントできます。箇条書きや番号付けの順序は、HTML または CSS で制御または反転できます。 または両方を選択できます
デフォルトでは、順序付きリスト項目と順序なしリスト項目には、先頭に数字や箇条書きが付きます。ただし、リストがリストのように見えたくない場合でも、 ナビゲーション バー、箇条書きではなくチェックボックス付きの To-Do リスト、正誤問題など、アイテムのリストが必要です。 解答してください。これらすべての箇条書き項目（箇条書きなし）については、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> の start の値をオーバーライドします。
value は、順序付きリスト内のリストアイテムの番号です。後続のリスト項目については、
値が設定されます（そのアイテムに value 属性も設定されている場合を除く）。値は順序どおりである必要はありません。正しくないと
もっともな理由があるはずです
<ol> の reversed とリストアイテムの value 属性を組み合わせると、ブラウザはその <li> を
その前の <li> をカウントアップし、その後の <li> をカウントダウンします。2 つ目のリスト項目に value 属性がある場合は、
2 番目のリスト項目でカウンタがリセットされ、後続の値が 1 ずつ減少します。
これらはすべて CSS カウンタでも制御可能
::marker 疑似要素用に生成されたコンテンツを提供する。
数値が単なるプレゼンテーションの場合は、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 つあるので、<li> が 3 つあることになります。それぞれに、画像、ブロック引用、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. 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 にはネストされたリストがありませんが、このサイトではネストされています。このシリーズの第 1 章では 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> に直接ネストされることはありません。
この最後の例では、<ul> に role="list" が含まれていることにお気づきでしょうか。両方のロールが暗黙的に
<ul>、<ol> が list になり、CSS でのリスト表示（display: grid または list-style-type: none の設定を含む）が削除されました。
によって、VoiceOver（iOS および MacOS のスクリーン リーダー）で Safari の暗黙的なセマンティクスが削除される可能性があります。これはバグではなく機能です。
一般に、セマンティック要素を使用する場合、ロール属性は不要なため、追加しないでください。通常は
リストであることをユーザーが本当に知る必要がある場合（リストに含まれるアイテムの数を把握できる方がよい場合など）を除き、ユーザーがリストに 1 つのアイテムを追加するような場合です。
説明文のリスト
説明リストは、以下を含む説明リスト（<dl>）要素です。
一連の（0 個以上）の説明語（<dt>）と
説明の詳細（<dd>）。これら 3 つの要素の元の名前
「定義リスト」でしたが“定義用語”です「定義の定義」などがあります。
現時点における名称の変更
順序付きリストと順序なしリストと同様に、ネストできます。順序付きリストや順序なしリストとは異なり、Key-Value ペアで構成されます。
<ul> や <ol> と同様に、<dl> が親コンテナです。<dt> 要素と <dd> 要素は <dl> の子要素です。
機械のリストを、機械の経歴と志望を含めて作成できます。<dl> で示される生徒の説明リスト。
は用語のグループ（この例では「terms」）を生徒の名前。<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> が関連付けられています。既存のダッシュボードを
隣接する兄弟組み合わせ子または :has() リレーショナル
セレクタ: CSS を使用してこれらの要素の可変数をターゲットにします。必要に応じて、
<dl> の子として <div>、および 1 つ以上の <dt> 要素または <dd> 要素（または両方）の親が許可されます。<dl> は実際には、
他にも数人の子がある場合、<div>、<template>、または <script> をネストできます。どの説明リスト要素にも、要素固有の属性はありません。
リンクとリストについて理解したところで、この 2 つを組み合わせてナビゲーションを作成してみましょう。
理解度をチェックする
リストに関する知識をテストします。
リストアイテム内に <h2> を含めることは有効ですか？
リストの種類を定義する 3 つの要素を選択してください。
<il><ol><ul><dl>