Q&A
ご回答いただきまして誠にありがとうございます。
>序列Noが表出して論理構造上、破綻するのはおかしい
確かに‥‥と感じたものの、<ol>は、序列Noが表出しないパンくずリストでも多用される部分なので「正解はどうなのだろう?」と迷いが生じました。
※ご連絡が遅れまして申し訳ございません。
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」を採用してしまっています。
アドヴァイスをいただければ幸いです。
回答5件
0
ベストアンサー
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要素が使われるようになったのではないかと思います。
投稿2019/04/13 10:28
編集2019/04/13 14:47
総合スコア14731
0
ol要素
ol要素は、順序を変更することが文書の意味を変更するような、意図的に順序づけられた項目のリストを表す。
...(中略)...
リストの順序を変更すると、どのように文書の意味が変化するかに注意する。次の例は、最初の2つの項目にある相対順序を変更することで、著者の故郷を変更している：
序列を定義する
現に、下記URLのようにolでマークアップされている方も存在します。
https://gray-code.com/html_css/markup-to-date-and-time/amp
「数字を消しているならolの意味がない」と主張されている方もいますが、そのような制約は仕様に記述がありません。
それは論理構造を認識する上での「考え方」の一部であって仕様ではありません。
ol要素は序列を定義するわけですが、それはすなわち順序に意味があるという事であり、序列Noとしての「1. -> 2. -> 3.」が表出しても、論理構造上、問題ない必要があります。
(序列があるのですから、序列Noが表出して論理構造上、破綻するのはおかしいでしょう)
HTML
1<ol> 2 <li>記事A</li> 3 <li>記事B</li> 4 <li>記事C</li> 5</ol>
例えば、上記HTMLにおいて、次の全てを満たせるようなマークアップになっていますか。
- リストマーカーが出現したとしても、それは序列を表す数字として自然な表示である
- 最初の記事Aは最古の記事であり、最新の記事ではない(なぜなら、初めに最新の記事がある場合、最新記事が追加される度に序列が変化してしまい、記事の管理上、好ましくない)
- 記事の順序を逆順ソートした場合、リストマーカーである序列Noは記事に追従し、ナンバリングし直さない動作が正しい
teratailのように、記事Noとして、「1. -> 2. -> 3.」を定義しているのなら有とは思うのですが、ほとんどの場合はそういう管理の仕方にはなっていないので、article要素でマークアップするのが妥当なケースが多いように私は思います。
本記事を例にとるなら、次のようにマークアップする事は可能です。
HTML
1<ol> 2 <li value="184261"><a href="https://teratail.com/questions/184261">JavaScript - 何故「ol」は最新記事に使われないのか｜teratail</a></li> 3</ol>
ol要素を親に持つli要素は、value属性によって序列Noを指定することが出来ます。
Re: megu9859 さん
投稿2019/04/13 12:59
編集2019/04/13 13:12
総合スコア18164
0
何故「ol」だけは検討対象に含まれないのでしょう?
デザイン（表現）に番号が不要な場合が多いだけでは？
必要な場合は「ol」を使いますし、「含まれない」訳ではありません。
※「Javascript」タグは関係ないと思われます。
投稿2019/04/13 05:04
総合スコア3523
0
結論どう解釈させるかによって使い分けになるかと思いますが、ほとんどの場合最新記事一覧でもそれぞれの記事コンテンツを並列な扱いにさせたいためulを使ってる場合が多いと思います。それぞれ記事は独立したコンテンツですからね。
どちらかというとolは関連性のあるコンテンツの順番を明確化させたい時に使うイメージです。
例えば、ランキング、パンくずリスト、順をおった説明文、何かのフローなどですかね。
投稿2019/04/13 05:02
編集2019/04/13 05:07
総合スコア163
0
例えば以下のようなサイトがあったとします。
〜 新着記事 〜
猫の飼い方 (4/13)
猫は可愛い (4/10)
猫だーいすき (4/7)
この3つの記事は新着順で上から1,2,3と番号を付けられますがあくまでも並列的な関係です。
(個人的にはこういう時はolの方がいいなーとか勝手に思ってますが明確な区分けわけがないので...)
まぁそれでも「新着順なんだからolでもいいだろ！」と言われたりするのでようは好みの問題では？
投稿2019/04/13 09:56
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/04/13 14:50 編集
2019/04/20 06:04