段落・改行・リスト

HTMLでよく使われる要素

P 要素

P要素のDTDを参照

Paragraphsの頭文字からきています。････段落という意味です。

このＰ要素はブロックレベルの要素ですが、その内部にブロックレベルの要素を含むことはできません。 この特徴から、Ｐ要素の後に他のブロックレベルの要素が置かれた場合、 その時点でＰ要素は終了したと自動的に解釈することができます。
このため文法上は終タグを省略することができますが、ブラウザによっては、思いもかけない解釈を される場合があるので、付けて置いた方が無難です。

普通のブラウザ(視覚系ユーザーエージェント)では、一行分の間隔を空けて表示します。 このため、一行分の間隔を得るためだけにP要素を用いているのが見受けられますが、P要素はあくまでも 段落を意味するブロックレベルの要素でから、その中に含まれる内容がなくてはなりません。 BR要素のように使うのは止めましょう。

正しい書き方

<p>視覚系の一般的ブラウザの場合改行して一行空けます。<br>一行空けるためだけで
P要素を使うと、『お尻Ｐ』だー、と顰蹙をかいます。</p>

<!--または終了タグを省略して、-->
<p>視覚系の一般的ブラウザの場合改行して一行空けます。<br>一行空けるためだけで
P要素を使うと、『お尻Ｐ』だー、と顰蹙をかいます。

表示

視覚系の一般的ブラウザの場合改行して一行空けます。
一行空けるためだけでP要素を使うと、『お尻Ｐ』だー、と顰蹙をかいます。

視覚系の一般的ブラウザの場合改行して一行空けます。
一行空けるためだけでP要素を使うと、『お尻Ｐ』だー、と顰蹙をかいます。

間違った書き方の例

視覚系の一般的ブラウザの場合改行して一行空けます。
<br>改行目的のためだけでP要素を使うと、『お尻Ｐ』だー、と顰蹙をかいます。
<p>
<p>
<p>
またこのように複数行分の空間を明けるためだけにP要素を使うのは避けましょう。

表示

視覚系の一般的ブラウザの場合改行して一行空けます。
一行空けるためだけでP要素を使うと、『お尻Ｐ』だー、と顰蹙をかいます。

またこのように複数行分の空間を明けるためだけにP要素を使うのは避けましょう。

と、三行分の空間が空くのを期待したのですが、IE4．0では、複数個の内容のないP要素の連続は、ひとつのP要素として解釈されるようですね。 HTML4.0の仕様書にそっているようです。

BR 要素

BR 要素のDTDを参照

line breaksのBRから、『改行』の意味です。

それに含まれる内容のない、『空要素(empty element)』なので、終タグは付けてはいけません。

普通、エディターなどで文章を作成するときには、Enterキーを押しすことによって改行されますが、 HTML文書ではそれらの制御文字は無視されてしまいます。
HTML文書で、行を改めて表示させたい場合はBR要素を用います。開始タグ<br>が置かれた場所で改行されます。

文章の改行はブラウザのサイズによる折り返しに任せて、 あまりBR要素は使わない方が良いという意見があります。例えば、 

<p>今日はいい天気ですね。
<br>こんな日に家に閉じこもっているのも、
<br>どうかと思います。
<br>パソコンのディスプレーばかり眺めていずに、
<br>とりあえずは窓でも開けて、
<br>外の新鮮な空気を吸ったらどうでしょう？</p>

のような記述は、ブラウザのサイズによっては以下のように表示されてしまいます。

今日はいい天気ですね。
こんな日に家に閉じこもっているのも、
どうかと思います。
パソコンのディスプレーばかり眺めていずに、
とりあえずは窓でも開けて、
外の新鮮な空気を吸ったらどうでしょう？

リスト

リストには次の三種類のタイプがあります。

順不同リスト　unordered list

UL 要素

　Unordered ListのULから、『順不同リスト』です。 どちらもブロックレベルの要素です。

UL要素の記述例

<ul>
  <li>List item 1
  <li>List item 2
  <li>List item 3
</ul>

表示

番号付きリスト　ordered list

OL 要素

Ordered ListのOLから、『番号付きリスト』。 ブロックレベルの要素です。

OL要素の記述例

<ol>
  <li>List item 1
  <li>List item 2
  <li>List item 3
</ol>

表示

  1. List item 1
  2. List item 2
  3. List item 3

OL、UL要素には、LI要素だけしか含めない事に注意してください。 ですから、以下のような書き方は出来ません。

<ul>好きな果物
  <li>リンゴ
  <li>みかん
  <li>パイナップル
</ul>

LI 要素

List Item のLIから、『リスト項目』を表す要素です。UL要素とOL要素の中で使われます。

終了タグは省略できます。

インライン要素ばかりでなくブロックレベル要素も含めることに注意してください。 以下は、LI要素の中にUL要素が含まれる(リスト要素の入れ子)例です。

UL要素が入れ子になった記述例

<ul>
    <li>List item 1
        <ul>
            <li>List item 1.1
                <ul>
                    <li>List item 1.1.1
                    <li>List item 1.1.2
                    <li>List item 1.1.3
                </ul>

            <li>List item 1.2
            <li>List item 1.3
        </ul>

    <li>List item 2
    <li>List item 3
</ul>

表示

スタイルシートでマージンを付ける場合、LI要素はブロックレベルの要素でないためか？、 そのLI要素を直接指定してマージンやパッディングなどを決められないようです。LI要素の中に 含まれるブロックレベルの要素のプロパティによって、間接的に表示のさせかたを決定しなければ ならないようです。（IE4．0の場合）

定義リスト　Difinition List

DL 要素

Difinition List のDLから、 『定義リスト』を表す要素です。その中にDT要素もしくはDD要素だけをひとつ以上含まなければなりません。

DT 要素

Difinition Term のDTから、 『定義項目』を表す要素です。DT要素の中にはインライン要素しか含めません。

終了タグは省略できます。

DD 要素

Difinition Description のDDから、 『定義記述』を表す要素です。インライン要素とブロック要素を含めます。

終了タグは省略できます。

定義リストの記述例

<dl>
    <dt>バルサミコ
    <dd>北イタリア、モデナ地方に伝わる伝統的な酢。ブドウの果汁を煮詰めて、樽で
        長期熟成させて作る。味や香りに濃縮されたブドウの風味がある。
</dl>

表示