表示サンプル： このページの修正箇所は次のように表示されます。
HTML 及び XHTML
これは、次の達成基準に関連する実装方法である：
番号やビュレットの形式を指定するtype属性について、支援技術のサポートが一致していない。
この実装方法の目的は、リスト要素を役割に合わせて適切に利用し、関連する項目のリストを生成することである。ol要素は順序のあるリストに、ul要素は順序のないリストに利用する。定義リスト（dl要素）は、用語とその定義をまとめるのに利用する。このようなマークアップを用いることで、リストを読みやすくできるとはいえ、すべてのリストをリスト要素でマークアップする必要はない。たとえば、文章に含まれるカンマ区切りのリストを、リスト要素でマークアップする必要はない。
リストの関係を示すためではなく、見た目をリストのようにしたいためにマークアップを用いることで、利用者が情報を利用しにくくなる恐れがある。リストのような見た目にする例としては、リスト項目の最初にアスタリスクを付け、br要素を用いて各リスト項目を分けるといったことが挙げられる。
支援技術の中には、利用者をリストからリストへ、またはリスト項目からリスト項目へと誘導する機能を備えているものがある。スタイルシートを利用すれば、リストという役割の整合性を保ったまま、表現を変更することができる。
この事例では、プロセスの連続するステップを示すために順序リスト（ol要素）を利用している。
コード例：
<ol>
<li>卵と牛乳をボールの中で混ぜる。</li>
<li>塩とコショウを加える。</li>
</ol>この事例では、お店で購入する品目を順不同リスト（ul要素）で示している。
コード例:
<ul>
<li>牛乳</li>
<li>卵</li>
<li>バター</li>
</ul>この事例では、用語とそれを明確にする定義をまとめるのに定義リスト（dl要素）を利用している。
コード例
<dl>
<dt>点滅</dt>
<dd>1秒当たり0.5回から3回、ついたり消えたりすること
</dd>
</dl> この事例では、定義リストを用いて、対になる関連するアイテムをマークアップしている。対になっているアイテムは、それ自体が論理的に関連したリストである。定義リスト要素のCSSスタイルはブラウザによるサポートが十分ではないため、スタイル目的のためだけにspan要素がマークアップに含められているが、これは必須ではない。
<dl>
<dt><span>名前：</span></dt><dd><span>John Doe</span></dd>
<dt><span>電話番号：</span></dt><dd><span>01-2345678</span></dd>
<dt><span>FAX：</span></dt><dd><span>02-3456789</span></dd>
<dt><span>Eメール：</span></dt><dd><span>johndoe@someemail.com</span></dd>
</dl>
以下のCSSスタイルは、対になっているアイテムそれぞれをテーブルのようなレイアウトにして一行に並べるために用いることが可能である。
dt, dd{float: left;margin: 0;padding: 0;}
dt{clear:both;font-weight: bold}
dt span{display: inline-block; width: 70px;}
dd span{display: inline-block; margin-right: 5px;}
この事例のサンプルとして、定義リストを用いた連絡先情報のサンプルがある。
この事例では、リンクが ul 要素と li 要素を用いてグループ化されている。
コード例：
<a name="categories" id="categories"></a><h2>製品カテゴリ</h2>
<ul class="navigation">
<li><a href="kitchen.html">キッチン</a></li>
<li><a href="bedbath.html">ベッド& Bath</a></li>
<li><a href="dining.html">ダイニング</a></li>
<li><a href="lighting.html">照明</a></li>
<li><a href="storage.html">収納</a><li>
</ul> リスト要素のスタイルを指定するのにCSSを使用することが可能で、この実装方法はさまざまなビジュアルデザインで用いることができる。
このCSSでは、リストのビュレットとインデントする左側の余白を削除して、各リスト要素を水平に並べている。
コード例：
ul.navigation {
list-style: none;
padding: 0;
}
ul.navigation li {
display: inline;
}このスタイルは、リストのビュレットと左側の余白を削除し、リスト項目を横並びのブロックにして表示する。
コード例：
ul.navigation {
list-style: none;
padding: 0;
}
ul.navigation li {
display: block;
float: left;
}
この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
リストの視覚表現（ビュレットがあるかどうかに関わらず）を含んだコンテンツが、順不同リストとしてマークアップされている。
番号の付いたリストの視覚表現を含んだコンテンツが、順序リストとしてマークアップされている。
用語とその定義をリストという形式で表現する場合、そのコンテンツが定義リストとしてマークアップされている。
上記全てを満たしている。
注意： この実装方法が「達成基準を満たすことのできる実装方法」の一つである場合、このチェックポイントや判定基準を満たしていなければ、それはこの実装方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の実装方法によってその達成基準が満たされていることもありうる。
日本語訳における注記：
この文書の正式版は、W3Cサイトで公開されている英語の文書であり、この日本語訳には誤訳が含まれていることもありえます。なお、文中にある「日本語訳における注記」は、W3Cの原文にはないものであり、日本語訳監修者が追記したものです。