16: HTML lists - 日々ごちゃごちゃと考える

The three list types

3種類ある

unoredered list - いくつかのアイテムを順番関係なくまとめる
ordered list - いくつかのアイテムを順番通りにまとめる
definition list - name/value のペア, 用語とその定義や日時とイベントなど

Unoredered lists

"bulleted lists" とも。順番関係ないときに使う。
頭の点は CSS でデフォルトのどれかとか、画像とか、なし（点を表示しない）にすることもできる。
いくつかの `<li>...</li>>` を `<ul>...</ul>` で囲む。

<ul>
   <li>bread</li>
   <li>coffee beans</li>
   <li>milk</li>
   <li>butter</li>
</ul>

Ordered lists

"numbered lists" とも。決まった順番に並べるときに使う。料理の手順とか。
頭には数字とかアルファベットとかがつく。ふつーは数字。

文字
- アルファベット小文字(a, b, c...)
- アルファベット大文字(A, B, C...)
- Lowercase classical Greek
数字
- 10進数(1, 2, 3...)
- 頭に0のついた10進数(01, 02, 03...)
- 小文字のローマ数字(i, ii, iii...)
- 大文字のローマ数字(I, II, III...)
- Traditional Georgian numbering
- Traditional Armenian numbering

変えるのは CSS で。
いくつかの `<li>...</li>>` を、`<ol>...</ol>` で囲む。

<ol>
   <li>Gather ingredients</li>
   <li>Mix ingredients togather</li>
   <li>Place ingredients in a baking dish</li>
   <li>Bake in oven for an hour</li>
   <li>Remove form oven</li>
   <li>Allow to stand for ten minutes</li>
   <li>Serve</li>
</ol>

Beginning ordered lists numbers other than 1
start attribute を使って 1 以外から始めることもできる。

<ol>
   <li>Gather ingredients</li>
   <li>Mix ingredients together</li>
   <li>Place ingredients in a baking dish</li>
</ol>

<p class="note">Before you place the ingredients in the baking dish,
preheat the oven to 180 degrees centigrade/350 degrees farenheit in
readiness for the next step</p>

<ol start="4">
   <li>Bake in oven for an hour</li>
   <li>Remove from oven</li>
   <li>Allow to stand for ten minutes</li>
   <li>Serve</li>
</ol>

NOTE: 最新の HTML 仕様でこの attribute は deprecated とされているので、strict な doctype を指定していると Validate に失敗する。Validator は必ずしも正しいわけではない。
ついでに、HTML 5 では deprecated ではなくなる。もしこの機能を使いたくて、かつ Validate で無ければならないなら CSS counters を使う。

Definition lists

定義リストに、項目とその定義を関連づけたもののリスト。
それぞれの項目とその定義は "definition gorup" あるいは "name-value group" と呼ばれる。definition group はいくつあっても構わない。各 definition group にはひとつ以上の項目とひとつ以上の定義がなければならない。
複数の項目をひとつの定義に関連づける、あるいはその逆も可能。

定義リストでは `<dt>...</dt>` と `<dd>...</dd>` の組み合わせを、`<dl>...</dl>` で包む。ソース上で `<dt>...</dt>` が先に現れなければならない。

<dl>
   <dt>Term</dt>
   <dd>Definition of the term</dd>
   <dt>Term</dt>
   <dd>Definition of the term</dd>
</dl>

複数の項目をひとつの定義に関連づけ、とその逆、の例

<dl>
   <dt>Term</dt>
   <dd>Definition of the term</dd>
   <dt>Term</dt>
   <dt>Term</dt>
   <dd>Definition that applies to both of the preceding terms</dd>
   <dt>Term that can have both of the following definitions</dt>
   <dd>One definition of the term</dd>
   <dd>Another definition of the term</dd>
</dl>

これ使うことはあんまりないけど、知っておくと必要になったときに便利。

Choosing between list types

どのリストを使うか迷ったら、次の2つの質問に答えればはっきりする。

用語を定義してる（あるいは name/value である）
- yes なら定義リストを使う
- no なら次の質問へ
順番が重要である
- yes なら番号付きリスト
- no なら番号無しリスト

The difference between HTML lists and text

HTML でリストにするのと、頭に点とか数字付けた数字とどう違うのか:

番号付きリストの順番を変えるときに、いちいち全てのアイテムの順番を修正する必要はない
CSS でリストだけ見た目を変えることが簡単にできる
見た目と同様に正しい意味的な構造を与えることができる

他の言い方: テキストとリストは同じじゃない。リストを使うべきところでテキストをつかうと余計な仕事が増えるうえに、問題が起きるかもしれない。

Nesting lists

list を list item とすることができる。

<ol>
   <li>Chapter One
      <ol>
         <li>Section One</li>
         <li>Section Two</li>
         <li>Section Three</li>
      </ol>
   </li>
   <li>Chapter Two</li>
   <li>Chapter Three</li>
</ol>

ネストされた list 全体が li element 内に収まる。ネストしたリストはよくメニューに使われる。

リストのネストはどこまでもできるが、あんまりネストしすぎると混乱する。リストがあまりに大きくなるなら、いくつかに分割して見出しを付けるとか、いくつかのページに分けるとかした方がいいかも。

Step by step example

Main page markup

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang='en'>
   <head>
      <title>HTML Cooking School</title>
      <meta name="description" content="recipes for example of list.">
      <meta name="keywords" content="recipes, list, HTML, OperaWSC">
   </head>
   <body>
      <h1>HTML Cooking School</h1>
      <h2>Recipes</h2>
      <ul>
         <li>Cakes
            <ul>
               <li><a href="stepbystep-recipe.html">Plain Sponge</a></li>
               <li><a href="stepbystep-recipe.html">Chocolate Cake</a></li>
               <li><a href="stepbystep-recipe.html">Apple Tea Cake</a></li>
            </ul>
         </li>
         <li>Biscuits
            <ul>
               <li><a href="stepbystep-recipe.html">ANZAC Biscuits</a></li>
               <li><a href="stepbystep-recipe.html">Jam Drops</a></li>
               <li><a href="stepbystep-recipe.html">Melting Moments</a></li>
            </ul>
         </li>
         <li>Quickbreads
            <ul>
               <li><a href="stepbystep-recipe.html">Damper</a></li>
               <li><a href="stepbystep-recipe.html">Scones</a></li>
            </ul>
         </li>
      </ul>
   </body>
</html>

The recipe page

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
   <head>
      <title>Simple Sponge Cake - HTML Cooking School</title>
      <meta name="description" content="recipe of simple sponge cake.">
      <meta name="keywords" content="sponge cake, recipe, list, OperaWSC">
   </head>
   <body>
      <h1>Simple Sponge Cake</h1>
      <h2>Ingredients</h2>
      <ul>
         <li>3 eggs</li>
         <li>100g caster sugar</li>
         <li>85g self-raising flour</li>
      </ul>
      <h3>Notes on ingredients</h3>
      <dl>
         <dt>Caster Sugar</dt>
            <dd>Finely granulated white sugar.</dd>
         <dt>Self-raising flour</dt>
            <dd>A pre-mixed combination of flour and leavening agents
               (usually salt and baking powder).</dd>
      </dl>
      <h2>Method</h2>
      <ol>
         <li>Preheat the oven to 190 degree.</li>
         <li>Grease a 20cm round cake pan.</li>
         <li>In a medium bowl, whip together the eggs and caster sugar
            until fluffy.</li>
         <li>Fold in flour.</li>
         <li>Pour mixture into the prepared pan.</li>
         <li>bake for 20 minutes in the preheated oven, or until the top
            of the cake springs back when lightly pressed.</li>
         <li>Cool in the pan over a wire rack.</li>
      </ol>
   </body>
</html>

Summary

HTML には3種類のリストがある（bulleted, numbered, definition）
ネストできる