定義型リストにはスペースを節約するコンパクト形式があります。これは<dt>タグで指定した文字数が少ない場合のみ、<dd>で指定したテキストを改行せずに表示します。多ければ変わりません。また、コンパクト形式の記述方法は<dl>開始タグへcompact属性を付けるだけですが、ブラウザによってはこの機能がサポートされておらず、確かめたいかたは以下の２例を見比べて下さい。
定義型リストは見出しと本文の関係で、本文を見出しよりも右にインデントしたい場合も使用できます。
リスト
HTMLでは｢番号付｣リスト、｢番号なし｣リスト、｢定義型｣リスト、｢メニュー｣リスト、｢ディレクトリ｣リストと、５種類のリストタグが使用できます。どの場合も基本的な記述は変わらず、以下のとおりです。
具体的な記述方法は、このようになります。
<リスト開始タグ>
<リスト項目タグ>テキスト
<リスト項目タグ>テキスト
：
：
：
<リスト項目タグ>テキスト
</リスト終了タグ>
番号付リスト
<ol>
番号付リストは１かそれ以外の指定した数値から順に番号を振ったリストが作成できます。リストタグの名称はolで、<ol>〜</ol>に挟まれるリスト項目タグが<li>であることは、すでに述べました。
上記のように記述すると、ブラウザ(閲覧ソフト)では以下の表示となります。
<ol>
<li>スキー
<li>ビリヤード
<li>射撃
<li>音楽
<li>コンピュータ
</ol>
ネットスケープなどの｢番号付(Ordered)｣リストには、typeとstartの属性が使用できます。type属性は、英大文字(type=A)、英小文字(type=a)、大ローマ数字(type=I)、小ローマ数字(type=i)、そしてデフォルト(初期設定)のアラビア数字(type=1)と、表示する番号の種類を指定するための機能で、開始番号の値もstart属性によって設定は自由です。
<ol type=I start=5>
<li>これは大ローマ数字の５です。
<li>これは大ローマ数字の６です。
<li>これは大ローマ数字の７です。
</ol>
タイプ値 スタイル 例 A
英大文字
A, B, C, D a
英小文字
a, b, c, d I
大ローマ数字
I, II, III, IV i
小ローマ数字
i, ii, iii, iv 1
アラビア数字
1, 2, 3, 4
番号なしリスト
<ul>
番号なしリストは番号付リストで使ったolの代わりにulを使用し、<ul>〜</ul>で構成されます。そして、中の項目リストは番号の代わり記号が付きます。
<ul>
<li>スキー
<li>ビリヤード
<li>射撃
<li>音楽
<li>コンピュータ
</ul>
ネットスケープなどの｢番号なし(Unnumbered)｣リストにはtype属性があり、頭の記号を｢disc(ディスク：黒い丸)｣、｢circle(白抜きの丸)｣、｢square(四角)｣のどれかに指定することができます。
<ul type=disc>
<li>これはディスクを指定した場合です。
</ul>
<ul type=circle>
<li>これは丸を指定した場合です。
</ul>
<ul type=square>
<li>これは四角を指定した場合です。
</ul>
リスト項目
<li>
途中でリストのタイプを変更したい場合、type属性を用いることによって、番号なしリストの記号タイプを変えたり、番号付リストの番号形式、あるいは同じタイプであればvalueを使って値を変えることもできます。
<ul>
<li type=disc>これはディスクを指定した場合です。
<li type=square>これは四角を指定した場合です。
</ul>
<ol>
<li>これはアラビア数字の１です。
<li value=5>これはアラビア数字の５です。
<li type=A>これはアルファベットのＦです。
<li value=10 type=I> これはローマ数字の10です。
</ol>
以下のリストのように、番号なしリストのまま番号付リストの属性を記入した場合、その属性は無視されます。
<ul>
<li>これは番号なしリスト項目です。
<li value=5>番号付リスト項目の属性で５を指定しました。
</ul>
一部のブラウザでは、番号なしリストの記号へ他の画像を指定したい場合、<ul>タグにsrc属性を付加できます。
<ul src="../images/bannsphy.gif">
<li> テスト１
<li> テスト２
<li> テスト３
</ul>
テスト１
テスト２
テスト３
<ul>タグの<src>属性をサポートしていません。サポートされているブラウザでは、左右の表示が同じになります。 定義型リスト
<dl>
定義型リストは用語リストとも呼ばれ、リストタグにdlを使用します。リスト項目の指定方法が他のリストとは異なり、次の部分から構成されます。
<dt>と<dd>はどちらもワンサイドタグで、一緒に用います。
<dl>
<dt>ブラームス
<dd>1833年〜1997年。19世紀ドイツ音楽の最大の作曲家の１人であり、
バッハ、ベートーベンとともにドイツ音楽の３Ｂと呼ばれる。若い頃は
ピアニストとして活躍し、各地を演奏旅行した。作品傾向として、初期は
ピアノ曲･歌曲･室内楽を中心に作曲、後期は交響曲･協奏曲などの大作を作曲。
ロマン派絶頂の中、新古典派と呼ばれた。代表曲に、交響曲第１〜４番、
ヴァイオリン協奏曲など多数。
<dt>マーラー
<dd>1860年〜1997年。後期ロマン派の交響曲作曲家、指揮者。作品は
長大な交響曲、およびそれと不可分な関係にある管弦楽伴奏付歌曲が中心。
代表曲に、交響曲第１番｢巨人｣、５番など多数。
</dl>
上記２例の表示がどちらも同じ４行であれば、ご覧のブラウザは<dl>タグの<compact>属性をサポートしていません。コンパクト形式の機能がサポートされているブラウザでは、右側の例が２行にまとまって表示されます。
<dl>
<dt><h2>見出し部</h2>
<dd>本文は見出しよりも右にインデントされています。本文は見出しよりも右
にインデントされています。本文は見出しよりも右にインデントされています。
</dl>
その他、<dt>タグへテキストを記述せず空にしておくことで、番号や記号のないリストが作成できます。また、自分で記号代わりの画像を張り付けたい時もこの方法が使え、前述の<ul>タグで<src>属性をサポートしている必要はありません。
見出し部
<dl>
<dt><dd><img src="images/bannsphr.gif"> 赤印
<dt><dd><img src="images/bannsphb.gif"> 青印
<dt><dd><img src="images/bannsphg.gif"> 緑印
</dl>
赤印
青印
緑印メニューとディレクトリ･リスト
メニュー･リストは短い段落で用い、リストタグにMENUを使います。
ディレクトリ･リストはリストタグにdirを使用します。
<Mmenu>
<li>肉
<li>野菜
<li>果物
</menu>
<dir>
<li>cgi/
<li>html/
<li>html3/
<li>images/
<li>java/
<li>misc/
</dir>
リストの入れ子
リストは入れ子にすることができます。ただし、３レベルまでしか入れ子はできないので注意して下さい。どのリストも入れ子が可能で、異なるリストを入れ子しても構いません。たとえば、
上記のように記述すると、ブラウザでは次のとおりです。
<ul>
<li>東京都
<ul>
<li>千代田区
<ul>
<li>大手町
</ul>
<li>港区
</ul>
<li>ロサンゼルス市
<ul>
<li>ハリウッド
</ul>
</ul>
番号付リストの場合は、
<ol>
<li>東京都
<ol>
<li>千代田区
<ol>
<li>大手町
</ol>
<li>港区
</ol>
<li>ロサンゼルス市
<ol>
<li>ハリウッド
</ol>
</ol>