ul
要素型 (HTML, XHTML 1)[9] HTML の ul
要素は、
順序に深い意味の無い並びを表します。
[21] 仕様書:
http://www.w3.org/1999/xhtml
ul
(unordered list
(順序付けられていない並び) より)
(li
)+
%list;
が出現できる文脈属性名 | 属性値 | 既定値 | 説明 | 状態 | 出典 |
class | 級 | [HTML4] %coreattr | |||
compact | (真偽値属性) | (偽) | 小表示 | [HTML4] 非推奨 | |
dir | 書字方向 | [HTML4] %i18n | |||
id | 一意識別子 | [HTML4] %coreattr | |||
lang | 自然言語 | [HTML4] %i18n | |||
xml:lang | 自然言語 | [XHTML1] | |||
onclick | [HTML4] %events | ||||
ondblclick | [HTML4] %events | ||||
onkeydown | [HTML4] %events | ||||
onkeypress | [HTML4] %events | ||||
onkeyup | [HTML4] %events | ||||
onmousedown | [HTML4] %events | ||||
onmousemove | [HTML4] %events | ||||
onmouseout | [HTML4] %events | ||||
onmouseover | [HTML4] %events | ||||
onmouseup | [HTML4] %events | ||||
style | スタイル情報 | [HTML4] %coreattr | |||
title | 注釈的題 | [HTML4] %coreattr | |||
type | ( | (入れ子の深さ依存) | 項目の印の種類 | [HTML4] 非推奨 |
[29]
項目が1個の箇条書き:
リスト
というと一般的には2個以上の項目が含まれていないといけないような気がすることもありますが、
それがリスト (箇条書き) である (べき) と思うのであれば
1個でも ul
や ol
を使って構いません (というよりそうするべきです)。
(計算機の世界で普通リストといえば項目は0個以上です。 HTML 4 のリストの項目は1個以上ですが、 HTML 5 では0個以上になっています。)
例: >>30
[11] HTML 4 によると、 ul
と ol
は視覚的 UA では同じようにレンダリングされます。
ただし、 ol
は番号付けされませんが、
ul
は番号付けされません。
というような記述は、仕様書で must
を使って書かれているわけではありませんし、すべての場面における強制ではなく、
既定スタイルの推奨程度と受け止めるべきでしょう。
(そうしないと、 CSS で ul
に list-style-type: 数系 を指定するようなことまで否定されてしまいますが、そのような制限は慣習的に適当とは思えません。)
[12] <IW:HTML4:"struct/lists.html#idx-list-5"> ではいくつかの視覚的 UA での慣習が説明されています。 (こちらは参考と明記されています。)
[33]
ul
は HTML のかなりはじめの頃から
(おそらくは最初から) 存在していた要素型です。
ul
, ol
,
li
を使ったリストのマーク付けのモデルは
SGML応用でよく採用されているもので、 HTML
でもそれを流用しています。 ol
も同時に HTML の仕様に採り入れられましたが、
Webブラウザの側では長く未実装のままで、
専ら ul
が用いられてきました。
[22]
ul
要素の子供には
li
要素しか記述できません。
しかし、古い時代の利用者エージェントは ul
要素内では字下げし (左右の余白を多めに取り)、
li
要素の開始タグのところでリスト記号をレンダリングするという方法を採っていたので、
と勘違いする人が出てきました。自分が勝手に勘違いするだけならまだしも、
人に教える人や本や雑誌に書く人、ul
タグを使うと字下げができる裏技
といってはしゃぐ人、
果ては字下げのために ul
や
ol
を積極的に使うべき
(文章全体を囲むとか。そうすれば読みやすくなる
)
など電波がかった主張をする人まで出てくる始末でした。
というのは1990年代後半の話で、 CSS
が普及した昨今では流石にここまで逝った主張は見なくなりました。
blockquote
で字下げする人は今でも稀に見かけますがね。
(2005年)
[23] ul
と ol
:
ul
(unordered list
: 順序付けられていない並び)
と同じようにリストを表す HTML の要素型に
ol
(ordered list
: 順序付けられた並び)
があります。
項目の順序に重要な意味がある場合は、 ol
を使います。例えば、
料理の調理法は最初の項目から順に行っていく必要があります。
ですから、 ol
を使います。
項目の順序が然程重要ではない場合は、 ul
を使います。例えば HTML の要素型の一覧は、
どの要素型を先に示すかに特別な意味はありません。
p
を先に紹介しても、 ul
を先に紹介しても、本質的な違いはありません。
(入門書における要素型の説明の話ではありませんよ。)
[24] たとえ順序に深い意味が無くても、
項目の前の印として番号を付けたいことはよくあります。
そのような時でも、 HTML の要素型としては
ol
を使います。番号をつけてレンダリングすることは、
CSS の list-style-type
特性によって記述できます。
[25]
項目を無作為に入れ替えても良い??:
たまに、 ul
は
無作為に順序を入れ替えても問題が無いようなリスト
と紹介されることがあります。が、これを余り鵜呑みにしてはいけません。例えば、
<p>HTML の要素型には次のようなものがあります。</p> <ul> <li><code>p</code></li> <li><code>ul</code></li> <li><code>ol</code></li> </ul> <p>1つ目の <code>p</code> は、段落を表します。 2つ目の <code>ul</code> は、順序無しの並びを表します。 最後の <code>ol</code> は、順序ありの並びを表します。</p>
の ul
は、
無作為に順序を入れ替え
ると最後の段落と矛盾してしまいます。でも、
このリストの3つの項目の並び順にはそんなに意味がある
(ol
にするべきな) のでしょうか?
実際の文章ではこの例文のようにリストに掲げた並び順が前後の文章に影響してくることが少なくありません。
影響があるから ol
にしなければならないということはなく、
ul
か ol
かの選択は本質的にそのリストが順序付けられるべきかどうかを考慮して行うべきものです。
無作為に順序を入れ替え
てみるのは迷った時の判断基準として悪くはありませんが、
言葉どおりに受取って本質を見失ってはいけません。
[31]
メモ: 前後の文脈で1つ目
のような参照をするのがよくないのだ、
そういう文章は HTML には適さない、という意見があります。
確かに、 SGML で一般に行われている方法を採るなら
<p>HTML の要素型には次のようなものがあります。</p> <ul> <li id="et-p"><code>p</code></li> <li id="et-ul"><code>ul</code></li> <li id="et-ol"><code>ol</code></li> </ul> <p><ref idref="et-p" />の <code>p</code> は、段落を表します。 <ref idref="et-ul" />の <code>ul</code> は、順序無しの並びを表します。 <ref idref="et-ol" />の <code>ol</code> は、順序ありの並びを表します。</p>
とでもするべきでしょう。 ref
要素の内容は利用エージェントが参照先と文脈から適当に生成します。
しかし歴史的に HTML はこのような形の参照と生成を使っておらず、
こちらの方が余程 HTML にはなじみません。
[26] ul
と dl
:
リストが単純な一次元的な並びではなく、
見出しと説明の組の並びのようなものの時は、
ul
ではなく dl
を使います。
例えば用語集は用語と説明の組が並んだものですから、
dl
を使います。
[27] ul
と menu
と dir
:
古い時代の HTML には ul
の他に menu
と dir
がありました。3者は意味的にはほぼ同じで、
項目の長さとそれに合わせたレンダリング方法に違いがありました。
しかし、 menu
と dir
は ul
に吸収され、使わないことになっています。
[28] rdf:Bag
:
RDF の語彙である rdf:Bag
は、 ul
と同じように
順序を持たない並び
という意味を持っています。
UL
と ol の使い分け: Strict-HTML スレッド10 <http://pc2.2ch.net/test/read.cgi/hp/1045493217/328->UL
, OL
, dl, nl, dir, menu と沢山ありますからねぇ。UL
/OL
の使い分けというのは、番号を振るかどうかだった。 OL
はあくまでも、自動で番号を振ってくれる機能つきのリストだったのですよ。ul
or ol
でマークしたがる香具師が多いけど、 HTML における重要な概念、 ブロック要素とインライン要素の違いを思い出すべきだよな。 ul
も ol
もブロック水準の並びであって、A, B, そして C のような種類があるとかのような文中の列挙までそうするのは生きすぎだし、ナビゲーションのリンク並びも (無理矢理分類して) インライン水準なら ul
は不適切だと思う。[18] 90年代中頃の糞解説書には、リスト要素は余り使われなくなってきていて、確かに余り融通が効かないし、敢えて必要もないよね、みたいなことを書いてあるものまでありました。その主たる根拠は marker の自由度が低いこと。
悔しいけど当時の状況は糞本著者の言う通りで、丁度マーク放棄、自分のブラウザで表示できればそれでよしの風潮が高まっていった時期ですし、当時のブラウザで list marker は type
属性で指定できる分しか選択肢がなかったです。
(HTML 3.0 には li
要素に src
属性 (いまでいうところの CSS の list-style: url(foo)) があったけど、実装はほとんどなかったしなあ。)
当時の WYSIWYG な著述ソフトウェアの中には、 list marker の画像を table
で実現しているものもあったっけ (もちろん、利用者には他の list marker と同列に見せて、実は)。
需要は高まる一方なのに標準化も実装も追い付かないというか違う方向にすすんでいるというか、 ある意味誰にとっても不幸な時代だったような気がします。
<UL> <LI>Unordered information. <LI>Ordered information. <LI>Definitions. </UL>
(HTML 4 仕様書より)
<p>現在インターネットでもっともよく使われているサービスは次のものだろう。 <ul> <li>WWW</li> <li>電子メイル</li> <li>P2P</li> </ul>
[15] 入れ子の例:
<p>主要なマーク付け言語: <ul> <li>XML <ul> <li>XHTML</li> <li>MathML</li> <li>SVG</li> <li>SMIL</li> <li>DocBook (XML)</li> </ul></li> <li>SGML <ul> <li>HTML</li> <li>DocBook</li> <li>TEI</li> </ul></li> <li>TeX <ul> <li>LaTeX</li> <li>Texinfo</li> </ul> <p class="note">TeX はマーク付け言語的な側面もプログラム言語的側面もある。</p> </li> <li>Wiki 系 <ul> <li>本家 WikiWikiWeb</li> <li>YukiWiki</li> <li>Tiki</li> <li>Pukiwiki</li> </ul></li> </ul>
<div
class
="subtoc"> <p
><strong
>Contents</strong
></p
> <ul
class
="toc"> <li
class
="tocline">4.1. <a
href
="#sec_4.1.
"class
="tocxref">Syntactic Conventions</a
></li
> <li
class
="tocline">4.2. <a
href
="#s_common_types
"class
="tocxref">Content Types</a
></li
> <li
class
="tocline">4.3. <a
href
="#s_common_attrtypes
"class
="tocxref">Attribute Types</a
></li
> <li
class
="tocline">4.4. <a
href
="#sec_4.4.
"class
="tocxref">An Example Abstract Module Definition</a
> <ul
class
="toc"> <li
class
="tocline">4.4.1. <a
href
="#sec_4.4.1.
"class
="tocxref">XHTML Skiing Module</a
></li
> </ul
> </li
> </ul
> </div
>
出典: Modularization of XHTML - Defining Abstract Modules <http://www.w3.org/TR/2001/REC-xhtml-modularization-20010410/abstraction.html#s_abstraction>
<ul
class
="navigation"> <li
class
="this"><strong
>Home</strong
></li
> <li
><a
href
="/news/
">News</a
></li
> <li
><a
href
="/demos/
">Demos</a
></li
> <li
><a
href
="/specs/
">Specifications</a
></li
> <li
><a
href
="/charter
">Charter</a
></li
> <li
><a
href
="/mailing-list
">Mailing List</a
></li
> </ul
>
出典: Web Hypertext Application Technology Working Group <http://www.whatwg.org/> (2005年1月付け)
Webサイト内の主要な頁へのリンク集で、
リンク先の各頁にも同様な ul
要素が含まれています。
別途指定されている CSS と画像により、視覚UA では GUI でよく使われるタブのような見た目で横並びに表示されます。
[16]
ol
要素, dl
要素, li
要素, type
属性, compact
属性の例も参照。
[30] 項目が1個の箇条書き:
<p><em>A コース</em>の人は、次のものを用意してください。</p> <ul> <li>水筒</li> <li>ホース</li> </ul> <p><em>B コース</em>の人は、次のものを用意してください。</p> <ul> <li>洗濯ばさみ (5ヶ)</li> </ul>
[34] Re: [css3-lists] padding-left on <ol> and <ul> elements ( (Gérard Talbot 著, 版)) <http://lists.w3.org/Archives/Public/www-style/2014Feb/0654.html>