ul

ul

ul 要素型 (HTML, XHTML 1)

[9] HTMLul 要素は、 順序に深い意味の無い並び (リスト) を表します。

並びの各項目は子 li 要素とします。

[21] 仕様書:

[10]

状態
W3C 勧告
名前空間URI
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(disc | square | circle)(入れ子の深さ依存)項目の印の種類[HTML4] 非推奨

[29] 項目が1個の箇条書き: リストというと一般的には2個以上の項目が含まれていないといけないような気がすることもありますが、 それがリスト (箇条書き) である (べき) と思うのであれば 1個でも ulol を使って構いません (というよりそうするべきです)(計算機の世界で普通リストといえば項目は0個以上です。 HTML 4 のリストの項目は1個以上ですが、 HTML 5 では0個以上になっています。)

例: >>30

レンダリング

[11] HTML 4 によると、 ulol は視覚的 UA では同じようにレンダリングされます。 ただし、 ol は番号付けされませんが、 ul は番号付けされません。

というような記述は、仕様書で must を使って書かれているわけではありませんし、すべての場面における強制ではなく、 既定スタイルの推奨程度と受け止めるべきでしょう。 (そうしないと、 CSSullist-style-type: 数系 を指定するようなことまで否定されてしまいますが、そのような制限は慣習的に適当とは思えません。)

[12] <IW:HTML4:"struct/lists.html#idx-list-5"> ではいくつかの視覚的 UA での慣習が説明されています。 (こちらは参考と明記されています。)

  • 入れ子の深さにしたがってレンダリングします。
  • type 属性をレンダリングのヒントとします。
  • type 属性の既定値は入れ子の深さに依存します。
  • type 属性の値とそれに対応する、表示するべき形。 (type 属性の説明を参照。)

[17] type 属性や compact 属性の説明も参照。

歴史

[33] ulHTML のかなりはじめの頃から (おそらくは最初から) 存在していた要素型です。 ul, ol, li を使ったリストマーク付けモデルSGML応用でよく採用されているもので、 HTML でもそれを流用しています。 ol も同時に HTML の仕様に採り入れられましたが、 Webブラウザの側では長く未実装のままで、 専ら ul が用いられてきました。

不思議解釈

[22] ul 要素の子供には li 要素しか記述できません。 しかし、古い時代の利用者エージェントul 要素内では字下げし (左右の余白を多めに取り)、 li 要素の開始タグのところでリスト記号をレンダリングするという方法を採っていたので、 ul タグを使うと字下げができる と勘違いする人が出てきました。自分が勝手に勘違いするだけならまだしも、 人に教える人や本や雑誌に書く人、裏技といってはしゃぐ人、 果ては字下げのために ulol を積極的に使うべき (文章全体を囲むとか。そうすれば読みやすくなる) など電波がかった主張をする人まで出てくる始末でした。

というのは1990年代後半の話で、 CSS が普及した昨今では流石にここまで逝った主張は見なくなりました。 blockquote字下げする人は今でも稀に見かけますがね。 (2005年)

関連

[23] ulol: ul (unordered list : 順序付けられていない並び) と同じようにリストを表す HTML要素型ol (ordered list : 順序付けられた並び) があります。

項目の順序に重要な意味がある場合は、 ol を使います。例えば、 料理調理法は最初の項目から順に行っていく必要があります。 ですから、 ol を使います。

項目の順序が然程重要ではない場合は、 ul を使います。例えば HTML要素型の一覧は、 どの要素型を先に示すかに特別な意味はありません。 p を先に紹介しても、 ul を先に紹介しても、本質的な違いはありません。 (入門書における要素型の説明の話ではありませんよ。)

[24] たとえ順序に深い意味が無くても、 項目の前の印として番号を付けたいことはよくあります。 そのような時でも、 HTML要素型としては ol を使います。番号をつけてレンダリングすることは、 CSSlist-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 にしなければならないということはなく、 ulol かの選択は本質的にそのリストが順序付けられるべきかどうかを考慮して行うべきものです。 無作為に順序を入れ替えてみるのは迷った時の判断基準として悪くはありませんが、 言葉どおりに受取って本質を見失ってはいけません。

[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] uldl: リストが単純な一次元的な並びではなく、 見出しと説明の組の並びのようなものの時は、 ul ではなく dl を使います。 例えば用語集は用語と説明の組が並んだものですから、 dl を使います。

[27] ulmenudir: 古い時代の HTML には ul の他に menudir がありました。3者は意味的にはほぼ同じで、 項目の長さとそれに合わせたレンダリング方法に違いがありました。 しかし、 menudirul に吸収され、使わないことになっています。

[28] rdf:Bag: RDF語彙である rdf:Bag は、 ul と同じように 順序を持たない並びという意味を持っています。

HTML のリスト系要素型の使い分け

  • [1] ULol の使い分け: Strict-HTML スレッド10 <http://pc2.2ch.net/test/read.cgi/hp/1045493217/328->
  • [2] リスト系要素の使い分けは古今東西問わず頻出問題ですね。
  • [3] HTML にはリスト系要素が UL, OL, dl, nl, dir, menu と沢山ありますからねぇ。
  • [4] 某方面では100の質問のマーク付けのときにも問題になってます。
  • [5] Strict 的思想にはなじまないかもしれませんが、そもそもの SGML/HTML の初期の UL/OL の使い分けというのは、番号を振るかどうかだった。 OL はあくまでも、自動で番号を振ってくれる機能つきのリストだったのですよ。
  • [6] >>5 今の Strict は文書の構造をとことん突き詰める方へ向かっていますけど、当時は当時の時代的制約で、そんなのは夢のまた夢、あるいは夢にも思われていなかったんですよね。だから、 SGML 文書のマーク付けってのはあくまでも、表示書式の抽象化のためのものであったのでして。 (もちろん今は必ずしもそうではない。)
  • [7] 並び (列挙) はなんでも ul or ol でマークしたがる香具師が多いけど、 HTML における重要な概念、 ブロック要素インライン要素の違いを思い出すべきだよな。 ulol もブロック水準の並びであって、A, B, そして C のような種類があるとかのような文中の列挙までそうするのは生きすぎだし、ナビゲーションのリンク並びも (無理矢理分類して) インライン水準なら ul は不適切だと思う。
  • [8] >>7 表現と構造の分離思想の行き過ぎで、ブロック/行内という区別自体が表現的構成要素だと考えてしまう人もいるみたいだけど、そうじゃなくて、あるいはという水準の上がブロック、下が行内という、構造の大きさの概念と理解できるのでして。

[18] 90年代中頃の糞解説書には、リスト要素は余り使われなくなってきていて、確かに余り融通が効かないし、敢えて必要もないよね、みたいなことを書いてあるものまでありました。その主たる根拠は marker の自由度が低いこと。

悔しいけど当時の状況は糞本著者の言う通りで、丁度マーク放棄、自分のブラウザで表示できればそれでよしの風潮が高まっていった時期ですし、当時のブラウザで list marker は type 属性で指定できる分しか選択肢がなかったです。 (HTML 3.0 には li 要素に src 属性 (いまでいうところの CSSlist-style: url(foo)) があったけど、実装はほとんどなかったしなあ。) 当時の WYSIWYG著述ソフトウェアの中には、 list marker の画像を table で実現しているものもあったっけ (もちろん、利用者には他の list marker と同列に見せて、実は)。

需要は高まる一方なのに標準化も実装も追い付かないというか違う方向にすすんでいるというか、 ある意味誰にとっても不幸な時代だったような気がします。

[13]

<UL>
<LI>Unordered information. 
<LI>Ordered information. 
<LI>Definitions. 
</UL>

(HTML 4 仕様書より)

[14]

<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>

[19] 目次の例

<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>

[20] Webサイトの案内の例

  <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>

解説: >>29 (名無しさん [sage])

メモ

メモ

[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>