HTMLには3つのリストタイプがあり、それぞれセマンティックな意味を持っています。適切なものを使用することで、アクセシビリティ(スクリーンリーダーが「リスト、3項目」と表示)と構造を改善できます。
Unordered list — 順序が重要でない場合
html
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Cherries</li>
</>
デフォルトで箇条書きで表示されます。ナビゲーションメニュー、機能リスト、タグなど、順序が意味を持たない場合に使用します。
<ol type="1" start="1">
<li>Preheat the oven</li>
<li>Mix ingredients</li>
<li>Bake for 20 minutes</li>
</ol>
番号で表示されます。ステップ、ランキング、指示などに使用します。属性: type (1, a, A, i, I)、start(最初の番号)、reversed。
<dl>
<dt>HTML</dt>
<dd>The markup language for web pages.</dd>
<dt>CSS</dt>
<dd>The styling language for web pages.</dd>
</dl>
<dt>は用語、<dd>はその説明です。用語集、メタデータ、キー/値のペアに最適です。
<nav>
<ul>
<li><a href="/">Home</a>
<ul><li><a href="/sub">Sub-page</a></li></ul> <!-- nested submenu -->
</li>
</ul>
</nav>
ナビゲーションメニューは慣例として<nav>内の<ul>としてマークアップされます。
リストは単なる箇条書きではなく、スクリーンリーダーが読み上げる内容構造を提供し、CSSで自由にスタイルできます(デフォルトのマーカーはCSSで簡単に削除できます)。
<ul> vs <ol> vs <dl>を選択することで、意味を伝えます: 非順序的、順序付き、または用語-定義。