質問: HTMLについて質問です。 ときどき、ウェブサイトの最新記事一覧を「ul」で組むべきか「dl」で組むべきかという議題が発生しますよね。後者はごくごく少数派な印象ですが.... しかしそこでいつも疑問なのが、何故「ol」だけは検討対象に含まれないのでしょう? 例えば、トップページに最新記事5件の一覧があったとして、それは明らかに上から下へ新しい「順番」の序列ですよね。 現に、下記URLのようにolでマークアップされている方も存在します。 https://gray-code.com/html_css/markup-to-date-and-time/amp 「数字を消しているならolの意味がない」と主張されている方もいますが、そのような制約は仕様に記述がありません。 ※個人的に、最新記事一覧では「ul」か「ol」かで迷うところです。結局「ol」を採用しているケースを1度も見たことがないため、何だかんだでいつも「ul」を採用してしまっています。 アドヴァイスをいただければ幸いです。
回答: `ul`要素 `ul`要素の ul は Unordered List の略で、**順不同リスト**とも言われています。この名前の通り、この要素は**項目の順序が重要ではなく、もしも順序を変更しても意味が変化することのないリストに使用**します。 `ol`要素 `ol`要素の ol は Ordered List の略で、**順序付きリスト**とも言われています。この名前の通り、**項目の順序が重要で、もしも順序が変更されてしまった場合文書としての意味が変化してしまうリストに使用**します。 `dl`要素 `dl`要素の dl は Description List の略で、**説明リスト**とも言われています。この名前の通り、**項目とそれに対する説明を列挙したい場合に使用**します。 最新記事の一覧にはどのリスト要素を使うべきか 結論としては、**`ol`要素を使うべき**だと思います。 ### `ul`要素 vs `ol`要素 CSS を使用することで、`ul`要素を`ol`要素のように見せることが出来ますが、それはあくまでも**見た目を変更したに過ぎない**ので、文書の意味としては**順序付けられていないリスト**となってしまいます。もしもリスト項目の順序を変えたときにリスト全体の意味が変わってしまうのであれば、`ol`要素を使うようにするべきです。最新記事のリストは、記事の順番が前後することで意味が変化してしまうため、**`ol`要素を使用することが適切**だと思います。 ### `ol`要素 vs `dl`要素 `dl`要素は項目と説明の対応付けを行うことで、各日付に対する説明として最新記事の情報を記述することが出来ます。しかし、**`dl`要素では順序を明確にすることが出来ません**。そのため、項目の順序が重要である最新記事の一覧では、**`dl`要素よりも`ol`要素の方が適切**だと思います。 もし単なる一覧で、順序が重要ではない場合は、`dl`要素を使うほうが良い場合もあると思います。ただし、`dl`要素は、**同一リスト内に同じ項目が存在するべきではない**ため、リスト構造的に項目が重複してしまう場合、`dl`要素は不適切です。 > > The dl element represents an association list consisting of zero or more name-value groups (a description list). A name-value group consists of one or more names (dt elements, possibly as children of a div element child) followed by one or more values (dd elements, possibly as children of a div element child), ignoring any nodes other than dt and dd element children, and dt and dd elements that are children of div element children. Within a single dl element, there should not be more than one dt element for each name. > > > 参考: HTML Standard - 4.4.9 The dl element なぜ`ul`要素が使われるのか Web 上にある多くのナビゲーションでは、項目の順序が重要ではないことがほとんどなので、`ul`要素がよく使われます。このような背景から「最新記事のリストも一覧だし、とりあえず`ul`要素で作ろう」ということになり、`ul`要素が使われるようになったのではないかと思います。