Let's begin XHTML―さあ始めよう XHTML

Section 5:基本的な文書構造

 まずは,基本的な文書を記述することから始めてみよう。

パラグラフ:p 要素

 Section 2 でも登場したが,パラグラフを表すのが p 要素である。パラグラフは,それぞれ,<p> および </p> でマークアップされる。

<p>...</p>

次に示すのは,2 つの p 要素である。

<p> “心に余裕を持つこと”は,いかなる場合でも大切なのではないか。</p>
<p> 心に余裕があるときは,自分をあるいは冷静に,客観的に見つめることができるだろう。往々にして,気張りすぎは最良の結果を生まないものだ。</p>

 ご覧になってわかるように,p 要素はその内容にテキストを含めることができる。しかし,パラグラフおよび見出しのような,“文書中の大きなかたまり”を表す要素を含んではならない。たとえば,p 要素の内容に p 要素が含まれるとき,それは誤りである。

 ところで,XHTML において,出力すべき本文は body 要素に書くと述べた。ここで,XHTML では,body 要素の内容にテキストを含んではならないことになっている。つまり,以下のように書かれた body 要素は誤りである。

<body>
 “心に余裕を持つこと”は,いかなる場合でも大切なのではないか。
</body>

本文にテキストを記述するときは,その各部分がパラグラフであるか,見出しであるか,箇条書きの項目であるか,……,に応じてマークアップして要素とし,body 要素に含める形にしなければならない。先ほどの誤った例では,たとえばパラグラフとしてマークアップし,p 要素として body 要素に含めればよい。

<body>
<p> “心に余裕を持つこと”は,いかなる場合でも大切なのではないか。</p>
</body>

見出し:h1h6 要素

 見出しも,Section 2 で大見出しの要素 h1 が登場したが,詳しく説明し直そう。

 XHTML では,見出しには 6 段階ある。h1h2h3h4h5h6 要素があり,数字の小さいほうがレベルの高い見出しになる。

<h1>...</h1>
<h2>...</h2>
<h3>...</h3>
<h4>...</h4>
<h5>...</h5>
<h6>...</h6>

この,“見出しのレベル”は,h1 要素が“章の見出し”であるとするならば,h2 要素は“節の見出し”,h3 要素は“項の見出し”,……,という関係で捉えていただければよい。言い換えると,文書の,“1.”,“2.”,“3.”,……,の見出しを h1 要素とすれば,“1.1.”,“1.2.”,……,“2.1.”,“2.2.”,……,の見出しは h2 要素,……,のようになる。

 次に示すのは,もっともレベルの高い見出し h1 の例である。

<h1>心に余裕を</h1>

 見出しの要素は,内容としてテキストを含むことができる。ただし,パラグラフ同様,“文書中の大きなかたまり”を表す要素を含んではならない。たとえば,見出しが入れ子になってはならないし,見出しの中にパラグラフが含まれるのも誤りである。

 ここで,パラグラフと見出しを含むような,完全な形の XHTML を示しておこう。

<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Relax!</title>
</head>
<body>
<h1>心に余裕を</h1>
<p> “心に余裕を持つこと”は,いかなる場合でも大切なのではないか。</p>
<p> 心に余裕があるときは,自分をあるいは冷静に,客観的に見つめることができるだろう。往々にして,気張りすぎは最良の結果を生まないものだ。</p>
</body>
</html>

Section 4 で示した例も,完全な形の XHTML の例である。併せて参考にされたい。

 以降,例では,XHTML の一部分を示すことにする。以降の例では,特に断らない限り,その示されたものを body 要素の内容とすれば,正しい XHTML になるようにしてある。