レンダリング

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

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

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

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

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

歴史

[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 と同じように 順序を持たない並びという意味を持っています。

例

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

メモ