13 分で読める時間：「HTML を知らないと困る」シリーズ第二弾

今回の「HTML を知らないと困る（You don't know HTML）」シリーズの第二回は、物をまとめること全般についてお話しします。MDN や W3Schools の入門ページを飛び越し、W3C の仕様書を開く前に偶然にも叔父さんのリタリンを飲んでしまった後に気づくような内容を掘り下げます。リストについて深く dive in しましょう。

なお、スタイルによる装飾方法についてはお話ししておりません。

これは導入編ではありません！

私はあなたが現実世界で HTML を書き上げる経験をお持ちであり、「リストの作り方を」と検索したのは初めてではないと考えています。私が扱うのは、コンテンツを集めるあらゆる方法です。つまり、以下の種類のリストについてお話しします。

• 順序指定されたリスト（Ordered）
• 順序未定のリスト（Unordered）
• 説明用リスト（Description）
• メニュー（Menu）
• コントロール用リスト（Control）

もし HTML にこれらの 5 つのリストの種類があることを知らなかったら、完璧です。つまりあなたは HTML を知らないということですね！

どうやって使い分けるべきか？

AI に要約を頼む必要はありません；結論を先に伝えさせていただきます。どの種類のリストを使うべきかは以下の基準で決まります：

• リスト内の項目が単一のコントロールフィールドのデータであり、そこからユーザー入力を受け取る場合：

  <select>

  +

  <option>

  の組み合わせ、または

  <input>

  +

  <datalist>

  の組み合わせを使用してください。
• 項目の順序が変わるとリストの意味が変わる場合：順序指定されたリスト（

  <ol>

  ）を使用してください。
• 項目がキーとバリューのペア、つまり鍵と値のペアである場合：説明用リスト（

  <dl>

  ）を使用してください。
• 項目がユーザーインターフェース上で動作を実行するコントロールである場合：メニュー（

  <menu>

  ）を使用してください。
• それ以外は順序未定のリスト（

  <ul>

  ）を使用してください。

コントロール用リスト：

<select>

と

<option>

または

<input>

と

<datalist>

の使い方

リストを想像する際、私たちは通常ユーザー操作用のフィールドを含まないと考えています。しかしこれは変です；なぜなら、ナビゲーションもリストを使って構築しており、その中にあるリンクはユーザーが…うむ…コントロールできるからです。私たちが持つリストへの偏見があります。

しかし、私がここにいるのはあなたの心にそれを前面に持ってくるためです：フォームを構築する際、時にはユーザーが操作するリスト自身を構築することもあります。

固定されたリストである場合は

<select>

と

<option>

を使用してください。「固定」というのは、ユーザーがそのリストに含まれる項目からしか選択できないことを意味します。もしそうであれば、select と option を使いましょう。

例えば、話すべき言語のリストを作りたいとしましょう：

<select name="languages">
 <option value="">言語を選択</option>
 <option value="en">英語</option>
 <option value="fr">フランス語</option>
 <option value="es">スペイン語</option>
 <option value="pt">ポルトガル語</option>
</select>

これはユーザーにちょうど一つの選択をさせます。

しかし、もしユーザーが多言語話者であれば、より多くの選択肢を選びたいかもしれません。

multiple

属性を使えば簡単です！リストの表示が変わります。これでオプションがすべて可視化され、シフトキーまたは Cmd + クリックで好きなものを選択できるようになります：

<select name="languages" multiple>
  <option value="">言語を選択</option>
  <option value="en">英語</option>
  <option value="fr">フランス語</option>
  <option value="es">スペイン語</option>
  <option value="pt">ポルトガル語</option>
  <option value="en">アイルランド語</option>
  <option value="cy">ウェールズ語</option>
</select>

実際に

<select>

要素と

<option>

を使う限り、

role="listbox"

を持つリスト要素に

aria-multiselectable

属性を指定する必要はありません。ネイティブのブラウザのセマンティクスがそれを自動的に実装してくれます。

関連するオプションを

<optgroup>

でまとめてください

言語を語族ごとにグループ化したい場合はどうすればよいでしょうか？

<optgroup>

を使えば、オプションのリストをグループ化できます：

<select name="languages">
  <optgroup label="ゲルマン語派">
    <option value="en">英語</option>
  </optgroup>
  <optgroup label="ロマン스語派">
   <option value="fr">フランス語</option>
   <option value="es">スペイン語</option>
   <option value="pt">ポルトガル語</option>
  </optgroup>
  <optgroup label="ケルト語派">
   <option value="en">アイルランド語</option>
   <option value="cy">ウェールズ語</option>
  </optgroup>
</select>

多くのオプションがあるが、何らかの理由でユーザーがそれらの一部を選択できるようにしたくない場合はどうでしょうか？

<optgroup>

に

disabled

属性を追加しましょう：

<select name="languages">
  <optgroup label="ゲルマン語派">
    <option value="en">英語</option>
  </optgroup>
  <optgroup label="ロマンس語派">
   <option value="fr">フランス語</option>
   <option value="es">スペイン語</option>
   <option value="pt">ポルトガル語</option>
  </optgroup>
  <optgroup label="ケルト語派" disabled>
   <option value="en">アイルランド語</option>
   <option value="cy">ウェールズ語</option>
  </optgroup>
</select>

グループ間に視覚的な区切りを望む場合でも、CSS で調整したくない場合は幸いにも

<hr>

が select 要素内の承認された項目です。これにより select が一見鋭くなり、また

size

属性を使って一度に表示する項目数を制御できます—特に長いリストに便利です。

ただし同時に

<optgroup>

を使う場合は注意が必要です；グループラベルが期待していたスペースの一部を占めるためです：

<select name="languages" size="4" multiple>
  <optgroup label="ゲルマン語派">
    <option value="en">英語</option>
  </optgroup>
  <hr />
  <optgroup label="ロマンス語派">
   <option value="fr">フランス語</option>
   <option value="es">スペイン語</option>
   <option value="pt">ポルトガル語</option>
  </optgroup>
  <hr />
  <optgroup label="ケルト語派">
   <option value="en">アイルランド語</option>
   <option value="cy">ウェールズ語</option>
  </optgroup>
  <hr />
  <optgroup label="アフラシアティック語族">
   <option value="he">ヘブライ語</option>
   <option value="ar">アラビア語</option>
  </optgroup>
</select>

もし提案リストであれば

<datalist>

を使用してください

ユーザーにオプションを提案するコントロールが必要だとしましょう。そこで datalist が登場します。

datalist

を使用するには二段階のプロセスが必要です；入力要素に datalist を使うよう指示する必要があります。

1. ID を与えた datalist を作成します。
2. その ID の値を対応する入力の

   list

   属性に設定します。

<datalist id="languages">
   <option>英語</option>
   <option>フランス語</option>
   <option>スペイン語</option>
   <option>ポルトガル語</option>
   <option>アイルランド語</option>
   <option>ウェールズ語</option>
   <option>ヘブライ語</option>
   <option>アラビア語</option>
</datalist>

<input name="language" list="languages">

<datalist>

の

<option>

に対して

value

属性を使うことに注意してください！

これは datalist の問題ではなく option の問題です；option デフォルト値はそのラップしたテキストです。

value

属性はそれを覆い、その際テキストはラベルのように機能します。select リストではユーザーはテキストしか見ないため、これは特に問題になりません。

しかし、datalist の

<option>

に

value

を設定すると、リスト内では「ラベル」が表示されますが、選択した時点では入力欄には値が表示されてしまいます。これが混乱を招きます。

この input で

w

をタイプして "Welsh"を選択するとその意図が分かります：

<datalist id="languages">
   <option value="en">英語</option>
   <option value="fr">フランス語</option>
   <option value="es">スペイン語</option>
   <option value="pt">ポルトガル語</option>
   <option value="en">アイルランド語</option>
   <option value="cy">ウェールズ語</option>
   <option value="he">ヘブライ語</option>
   <option value="ar">アラビア語</option>
</datalist>

<input name="language" list="languages">

したがって、datalist を使用する場合、値が挿入されるものであることを理解する必要があります—ラベルではありません。

任意の入力に対して datalist を使用できます

私たちが datalist をテキストオプション向けに有用だと考える傾向がありますが、そうある必要はありません。

カレンダーウィジェットを持っていて、年間の特定の範囲の週を優しく提案したいとしましょう。datalist でそれを実現できます：

<label for="camp-week">週を選択</label>
<input type="week" name="week" id="camp-week" min="2026-W2" max="2026-W51" list="preferred-weeks" />
<datalist id="preferred-weeks">
  <option>2026-W22</option>
  <option>2026-W23</option>
  <option>2026-W24</option>
  <option>2026-W25</option>
</datalist>

<datalist>

と

<input type="range">

は連携できます

<datalist>

は文字値に限らず、数字でも動作します。つまりそれを範囲入力と組み合わせることで、範囲上にラベル付きのストップ（刻印）を作成できます。

このアプローチで注意すべき唯一の点は、すべてのブラウザが同じ動作を保証されないことです。Chrome とその仲間では、プログラム的にシンプルな CSS でこれらのストップを表示できます。Firefox では…少し複雑になります。しかし基本的なアイデアは datalist を表示できるということです：

<div class="rangeField">
<label for="tips">チップの割合</label>
<input type="range" name="tips" id="tips" min="0" max="50" step="1" list="recommended-tips" />
<datalist id="recommended-tips">
  <option value="10" label="10%"></option>
  <option value="18" label="18%"></option>
  <option value="30" label="30%"></option>
  <option value="45" label="45%"></option>
</datalist>
<style>
.rangeField {
 /* 両者のコンテナ */
  width: 50ch; 
}
/*入力とdatalistの幅も同様*/
#recommended-tips,
#tips {
  width: 100%;
  margin: 0;
  padding: 0;
}
 #recommended-tips {
  position: relative;
  display: block;
  writing-mode: vertical-lr;
 }
</style>
</div>

Chrome とその仲間でも動作するプログラム的スタイルには、

attr()

関数を使い、パーセントに変換し、いくつかの計算を行います。

@supports (x: attr(x type(percentage))) {
 /* attr()にタイプを設定できるブラウザ向け：
 1. labelから値を取得（attr()）
 2. type()関数で値をパーセントとして宣言
 3. absolute にする
 4. 入力の最大値は50ではなく100です。left を left x 2 に近い値に設定し、文字幅に基づいて引き算
 */
/*datalistを表示し、配置のルーツとする
縦書きモードを追加*/
 #recommended-tips option{
  --percent: attr(label type(<percentage>));
  position: absolute;
  left: calc((var(--percent) * 1.9) - .1ch);
 }
}

Firefox でこれを動作させるには、異なるそしてより面倒な方向に進む必要があります。これらを個別のルールセットとして手動で設定する必要があります。また、疑似要素をターゲットにし、計算も変になります。必ずしも画面で良好に表示されるとは限りません：

@supports not (x: attr(x type(percentage))) {
/*
  Firefoxでは値が ::before で表示される
  また、option の高さを明示的に設定しないと大きすぎるため、::before を position absolute に設定
  また、百分率で長さを設定しないでください；これは大きく外れます
  その代わり、コンテナに設定されている単位の ch を使用します
*/

  #recommended-tips option {    
    height: 1ch;
    margin:0;
    padding:0;
  }
  #recommended-tips option::before {
    position: absolute;
    top: .5ex;
  } 
  
  #recommended-tips option[value="10"]::before {
   left: calc(5ch + 2ex)
  }

  #recommended-tips option[value="18"]::before {
   left: calc(9ch + 2.5ex );
  }

  #recommended-tips option[value="30"]::before {
   left: calc(15ch + 4ex);
  }

  #recommended-tips option[value="45"]::before {
   left: calc(22.5ch + 6.5ex);
  }
}

順序指定されたリスト

<ol>

の使い方

特定の順序で読み取る必要がある項目の集合については、常に順序指定されたリストを使用すべきです。可視的なプレゼンテーションがこの選択を左右させるべきではありません。項目に番号をつけるかどうかという問題ではなく、その順序が重要かという問題です。

以下の種類の集合は順序指定されたリストになるべきです：

• アルゴリズム
• イベントの系列
• 漸増的な連続体を持つ項目
• レシピ（イベントの系列であり、かつアルゴリズムでもある）
• alphabetical リスト（連続体沿いに文字を並べたもの）

これらを順序指定されたリストにするのは、項目の順序を変更するとリストの意味が変わるためです。

<ol>
  <li>オーブンに 350 度で予熱し、9x5 の型を塗ります。</li>
  <li>大きなボウルに小麦粉、重曹、塩を混ぜ、打ったブナシロップ、バター、卵、マッシュしたバナナを加える</li>
  <li>オーブンが予熱されたら、生地を型に入れます</li>
  <li>60 分間焼くか、中心に突き刺したつまようじが出ても清潔な状態になるまで焼きます。</li>
  <li>ワイヤーラックで冷まします</li>
</ol>

もし何かをアルファベット順と言った場合、異なる順序であると提案するのは奇妙です！

<h3>材料（アルファベット順）</h3>
<ol>
  <li>重曹（1 茶匙）</li>
  <li>バナナ（2 つ）（マッシュ）</li>
  <li>ブナシロップ（¾カップ）</li>
  <li>バター（½カップ）</li>
  <li>卵（2 個）</li>
  <li>小麦粉（2 カップ）</li>
  <li>塩（¼茶匙）</li>
</ol>

適切な場所での順序指定されたリストと順序未定のリストのネスト

よく構造化された順序指定されたリストの良い点は、レンダリングされた結果を見なくても理解できることです。ブラウザなしでもこれを読めば、必要なことが分かりましょう：

<ol>
  <li>準備：
    <ul>
      <li>オーブンに 350 度で予熱</li>
      <li>9x5 の型を軽く塗る</li>
      <li>すべての材料を集める</li>
    </ul>
  </li>
  <li>混ぜ合わせ：
    <ol>
      <li>ボウル1を準備する：大きなボウルに小麦粉、重曹、塩を混ぜる
      </li>
      <li>ボウル2を準備する：
         <ol>
            <li>ブナシロップとバターを打つ</li>
            <li>卵とマッシュしたバナナを加える</li>
         </ol>
      </li>
      <li>ボウル2をボウル1に混ぜ合わせる</li>
    </ol>
 </li>
  <li>注ぐ：生地を塗った型に入れる</li>
  <li>焼成：
    <ul>
      <li>60 分間焼く…</li>
      <li>または中心に突き刺したつまようじが出ても清潔な状態になるまで</li>
    </ul>
  </li>
  <li>冷やす：
    <ol>
      <li>型内で10分間冷ます</li>
      <li>ワイヤーラックに置いて完全に冷ます</li>
    </ol>
  </li>
</ol>

考慮すべき属性

私が順序指定されたリストは任意の事前に定められた順序を持つものについて強く強調している理由があります。それは

<ol>

に專門のために 2 つの属性があるためです：

• reversed

  は番号付けの順序を上昇から降順に反転させます。しかしこれはリストの順序を変えません。「最多から最少」のようなものを示す際に便利です；例えば、材料と数量：

<h3>材料（最多から最少）</h3>
<ol reversed>
  <li>卵 (2 個)</li>
  <li>小麦粉 (2 カップ)</li>
  <li>バナナ (2 つ) (マッシュ)</li>
  <li>ブナシロップ（¾カップ）</li>
  <li>バター（½カップ）</li>
  <li>重曹 (1 茶匙)</li>
  <li>塩 (¼茶匙)</li>
</ol>

• start

  は開始点を設定します。もしバネータードが一つの巨大なリストの代わりに順序指定されたリストの系列であれば、

  start

  属性がリストで番号付けを開始する場所を指示することで連続性を確立するのに役立つツールです：

<h2>1: 準備</h2>
    <ul>
      <li>オーブンに 350 度で予熱</li>
      <li>9x5 の型を軽く塗る</li>
      <li>すべての材料を集める</li>
    </ul>
<h2>混ぜ合わせ</h2>
<ol start=2>
  <li>ボウル1を準備する：大きなボウルに小麦粉、重曹、塩を混ぜる
  </li>
  <li>ボウル2を準備する：
    <ol>
      <li>ブナシロップとバターを打つ
      </li>
      <li>卵とマッシュしたバナナを加える
      </li>
   </ol>
  </li>
  <li>ボウル2をボウル1に混ぜ合わせる
  </li>
</ol>
<h2>注ぐ</h2>
<ol start=5>
 <li>生地を塗った型に入れる</li>
</li>
</ol>
<h2>6: 焼成</h2>
<ul>
  <li>60 分間焼く…
  </li>
  <li>または中心に突き刺したつまようじが出ても清潔な状態になるまで
  </li>
</ul>
<h2>冷やす</h2>
<ol start=7>
  <li>型内で10分間冷ます
  </li>
  <li>ワイヤーラックに置いて完全に冷ます
  </li>
</ol>

説明用リスト

<dl>

、

<dt>

、および

<dd>

の使い方

私は説明用リストを「忘れられたリスト」と呼ぶことを好みます；なぜなら…まあ、それは事実だからです。私たちはほとんど時間を費やして順序指定されたリストまたは順序未定のリストに全てを適合しようと努力し、説明用リストは常に隅っこで待機しています。

かつて定義リストと呼ばれた時代

HTML4 ではこれは「定義リスト」と呼ばれており、目的はもう少し狭く、定義の提供のみを対象としていました。

定義リストには

<dt>

（定義用語）と

<dd>

（…定義の定義）が含まれていました。

したがって、旧来の典型的な使用例は以下のようになります；定義されている用語を

<dfn>

で囲むことは真のセマンティクスの正確さを意味することに注意してください：

<dl>
  <dt><dfn>throw</dfn></dt>
  <dt><dfn>yeet</dfn></dt>
  <dd>動詞。高速で捨てる</dd>
  <dt><dfn>no cap</dfn></dt>
  <dd>間投詞。本物性と真実性を表現し、時には驚きを表します。</dd>
  <dt><dfn>bet</dfn></dt>
  <dd>間投詞。同意と肯定を表現します。</dd>
</dl>

HTML5 はセマンティック的にもその他にもより良くなりました

HTML5 が登場し、これが説明用リストであると判断しました；したがってこれは非常に狭い定義リストの使用法だけでなく、用語と値のセットを持どのたびに使用できます。

さらに、HTML5 では仕様で用語と定義を束ねることを許可しないとイライラする realization がありました。つまり、現在は

<div>

を非セマンティックなラッパーとして、用語と定義を束ねるのに許可されています：

<dl>
 <div class="dl-item">
   <dt>Chrome</dt>
   <dt>Opera</dt>
   <dt>Brave</dt>
   <dt>Edge</dt>
   <dd>Blink ベースのブラウザ</dd>
 </div>
 <div class="dl-item">
   <dt>Firefox</dt>
   <dt>Tor</dt>
   <dt>Librewolf</dt>
   <dd>Gecko ベースのブラウザ</dd>
 </div>
</dl>

メタデータ表示に

<dl>

を使用してください

説明用リストを任意の種類のメタデータを表示するために使用するべきです。事実とラベルの系列であれば、それは説明用リストです！

ユーザープロフィールは

<dl>

に所属します；そして、インデントされた性質が気に入らない場合は、数行の CSS で修正できます：

<dl>
 <dt>名前（初）</dt>
 <dd>Frank</dd>
  
 <dt>名前（姓）</dt>
 <dd>Taylor</dd>
  
 <dt>年齢</dt>
 <dd>44</dt>
  
 <dt>職業</dt>
 <dd>ライター</dd>
  
 <dt>ハンドル</dt>
 <dd>Paceaux</dd>
</dl>

<style>
dl {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 10em;
}

dt, dd {
  flex-grow: 1;
  flex-basis: 40%;
}
</style>

JSON の表示またはデバッグに

<dl>

を使用してください

個人的には、説明用リストの最も良い応用例の一つはデバッグだと考えます。シングルページアプリケーションで JSON チャンクのデバッグを行いたい場合、私は

<dl>

で行います。私は通常、シングルページアプリに

debug.vue

テンプレートを含めて JSON オブジェクトを表示し、もちろんそれは

<dl>

を使用します。しかし、あなたの（最も）嫌いなオブジェクトを説明用リストでレンダリングする小さなユーティリティを作成するのはそんなに多くのコードではありません：

class DebugJson {
	constructor(json, containerSelector) {
		this.json = json;
		this.containerSelector = containerSelector;
	}
	
	get containerEl () {
		return document.querySelector(this.containerSelector)
	}
	
	static createDt(text) {
		const dtEl = document.createElement('dt');
		dtEl.innerHTML = `<var>${text}</var>`;
		
		return dtEl;
	}
	
	static createDd(value) {
		const ddEl = document.createElement('dd');

		if (typeof value === 'object' && !Array.isArray(value)) {
			ddEl.append(DebugJson.createDl(value))
		} else {
			ddEl.innerHTML = `<code>${value.toString()}</code>`;
		}
		return ddEl;
	}
	
	static createDl(obj) {
		const dl = document.createElement('dl');
		
		Object.entries(obj).forEach(([key,value]) => {
			const dtEl = DebugJson.createDt(key);
			const ddEl = DebugJson.createDd(value);
			dl.append(dtEl);
			dl.append(ddEl);
		});
		
		return dl;
	}
	
	render(json = this.json) {
		this.containerEl.append(DebugJson.createDl(json));		
	}
}

const debugJson = new DebugJson({foo: 'bar', arr: ['a', 'b'], car: 1}, '.container')
debugJson.render();

説明用リストをより多く使用するべきです、みんな。

アプリケーションメニューの作成

<menu>

これはウェブのコンテンツレンダリング側よりもインタラクティブな側面のためのものです。

menu

はコマンドのリストに專門であり、

<ul>

を使わないことの別の理由として存在します。

テキストを編集するためのコントロールを持つリッチテキストエディタがあった場合、それはメニューに含まれるべきです：

<menu>
  <li><button onclick="strong()">太字</button></li>
  <li><button onclick="emphasize()">強調</button></li>
  <li><button onclick="strike()">削除線</button></li>
</menu>

HTML の仕様は、これはツールバーを意味していると述べています。インタラクティブなウェブページを作成する際には、すべての場所にツールのボタンがあるかを見てください；それらはおそらくメニューに含まれるべきです。

したがって、ビデオのための軽量のコントロールセットを作成する場合、それもメニューに含まれるべきです：

<div class="player player--video">
  <video source="whatever.mp4" id="vid-123"></video>
  <menu>
    <li><button commandfor="vid-123" command="--play">再生</button></li>
    <li><button commandfor="vid-123" command="--mute">ミュート</button></li>
    <li><button commandfor="vid-123" command="--fullscreen">全画面</button></li>
  </menu> 
</div>

menu

を使用すると、順序未定のリストに

aria-role="menu"

を追加する必要がありません。

リスト項目がナビゲーションでリストアイテムのように見えてはいけない場合は、メニューでも同じことが当てはまります；スタイルシートの上部にこのようなものを持っていると良いでしょう：

nav li,
menu li {
    list-style-type: none;
    text-indent: 0;
    margin: 0;
}

<nav>

!=

<menu>

やや混乱を招くのは、nav 要素は単に menu 要素のリンク形式だけではありません。それらは異なるセマンティクスと許可されるコンテンツを持っています。

• nav

  要素は区切要素です；ユーザーには「ここからどこかに行くについての物事があります」と伝えます。nav 要素では段落や見出し（

  <p>

  、

  <h1-6>

  ）などのあらゆる種類のものが許可され、リスト（

  <ul>

  、

  <ol>

  、

  <menu>

  ）も同様に許可されます。

• menu

  要素はリスト要素です；ユーザーには「ここから実行できる物事のリストがあります」と伝えます。menu 要素ではリスト項目（

  <li>

  ）のみが許可されます。

両要素の差はセマンティクスだけだと思い込んで誘惑されますが、そうではありません。一つはリストをほとんど常にラップする区切要素であり、他方ではリスト項目のみをラップするリスト要素です。Menu と nav は互いに排他的な選択肢ではありません；メニューは nav に入れることができますが、nav を menu に入れることは決してできません。

順序未定のリスト

<ul>

の使い方

私たちは定義されたセマンティクスを持つ 4 つのリストと見かけ上の（nav）があります；しかし、今やっと雑用引き出しである順序未定のリストに到達しました。「物事をどこかに置く必要があるなら、ここに置いてもいいや」というリストです。あなたの他のあらゆるリストニーズの受け皿です。

HTML がセマンティクスについてそれほど気にしていなかった古き良きの時代には、順序指定されたリストと順序未定のリストの唯一の違いは視覚的側面でした：番号をもらうのか、丸印をもらうのか？

しかし、私たちは今はその時代には生きているのではなく；アクセシビリティやスクリーンリーダー、検索エンジン最適化について関心を持っています。したがって、私達は視覚的側面を無視し、意味に焦点を当てます；それはリスト項目に追加される小さな自動生成文字についてではありません；それは項目の順序が重要かどうかについてです。

したがって、バンドメンバーのリストは順序未定のリストになるべきです：

<h3>ビートルズ</h3>
<ul>
  <li>ジョン・レノン</li>
  <li>ポール・マッカートニー</li>
  <li>リンゴ・スター</li>
  <li>ジョージ・ハリソン</li>
</ul>

バンドのリストについても同様です：

<ul>
  <li>ビートルズ</li>
  <li>ローリングストーンズ</li>
  <li>ヴァン・ヘイレン</li>
  <li>フー・ファイターズ</li>
</ul>

リストについては今分かっていますか？

まあ…より多くのことを知るべきです；私たちは 5 つの異なる種類のリストについて話しました：

• コントロールリスト
• 順序指定されたリスト
• 説明用リスト
• メニュー
• 順序未定のリスト

そして、リストで行えるいくつかクールなことを学びました：

• データリストは単なる自動補完/自動提案だけでなく、あらゆる入力で使用できます。
• 順序指定されたリストは真に反転可能ではなく、そうでも可能です。
• 説明用リストはすべてのキー・バリューペアのニーズ向けです。
• メニューはすべてのコントロールニーズ向けです。

少なくとも、HTML のリストについて何が知らなくて、何が分かっているかということは言えるでしょう。