HITP 広島工業大学専門学校

ホームページの基礎(1. XHTML 編)

← 1.8 XHTMLをHTMLにしてみよう  目 次  1.10 改行と段落 →

  1. 1.9 段落と見出し
    1. 1.9.1 body要素
    2. 1.9.2 段落(p要素)
    3. 1.9.3 見出し要素
    4. 1.9.4 XHTML(HTML)が表現するもの

1.9 段落と見出し

ここでは,使う頻度の多い段落(p要素)見出し(h1要素,h2要素,h3要素,h4要素,h5要素,h6要素)を中心に説明する。

1.9.1 body要素

これまでサンプルをブラウザで何度か表示させてきた。実際にブラウザに表示される部分は,すべて開始タグ <body> と終了タグ </body> の間に記述されたものだ。

つまり,Webページとして表示させたい部分は,body要素として記述することになる。body要素については,これくらいの理解で,今は先に進もう。

1.9.2 段落(p要素)

テキストを表示させる場合,通常はひとつのかたまりの文章を段落として扱う。この段落を表現する要素がp要素だ。まず,その書式は,次のようになる。

<p>・・・テキスト・・・</p>

段落で注意しなければならないことは改行位置だ。改行位置を強制的に制御することは可能である。ただし,本当に制御する必要があるかどうかを再検討しないといけない。つまり,作成したWebページを見ているユーザー(読者)の環境を統一することは不可能なため,ユーザーによって,表示幅が異なり,それによって段落の改行位置も変化するからだ。

すなわち,改行位置を気にするのではなく,意味的にひとつの段落かどうか,それによってタグ付けをした方がよい。つまり,この段階では見栄えは気にしない方がよい。

1.9.3 見出し要素

見出しを表現するためのものが見出し要素だが,これには6種類の要素が用意されている。各見出し要素の書式は,次のようになる。

<h1>ここに見出しを書く</h1>
<h2>ここに見出しを書く</h2>
<h3>ここに見出しを書く</h3>
<h4>ここに見出しを書く</h4>
<h5>ここに見出しを書く</h5>
<h6>ここに見出しを書く</h6>

各見出し要素の番号の違いだが,見出しにも大見出し,中見出し,小見出しのように階層がある訳で,それを番号で区別するようになっている。つまり,h1から順番にh2,h3・・・と階層が下がって行く訳だ。例えば,h1が大見出し,h2が中見出し,h3が小見出しという具合に使って行く。

見出し要素で注意する点は,「h1が大見出し,h3が中見出し,h5が小見出し」とか,「h3が大見出し,h4が中見出し,h5が小見出し」のような使い方は避けるということだ。見出しは,h1から順番に間を空けずに使おう。

1.9.4 XHTML(HTML)が表現するもの

実際に見出し要素などを指定して,ブラウザで表示すると文字の大きさが変化しているものが大部分だろう。しかし,これは本来のXHTML(HTML)の機能ではない。

文字の大きさや色などのいわゆる見栄えに関するものは,すべて文書の物理構造(スタイル)と呼ばれるもので,XHTML(HTML)の範疇ではない。XHTML(HTML)は文書の論理構造,つまり,ここは見出し,ここは段落,ここは箇条書きといった文書の意味的構造を記述するものだ。

このことはとても大切だ。Webページでの見栄えはとても重要だが,それを担当するものは,スタイルシートと呼ばれるもので記述する。XHTML(HTML)は,とにかく見栄えを気にすることなく,ひたすら文書の意味を考えることに留意しよう。

(C)Copyright 2010 HIROTAKA.YAMASHITA. HITP 広島工業大学専門学校. All Rights Reserved.