Section 4 : 見出しをつけよう

 HTML に,文章のほかに見出しをつけてみよう。メリハリがついて読みやすくなること請け合い。

見出し

 ワープロなどだと,見出しを表すのに“倍角”とかいう方法を使うことがあるけど,HTML ではそんなことを気にせずに“見出し”とモロに書いてしまう。これも当然,“ここから〜ここまで”で。

<Hn>...</Hn>

n”に入るのは数字で,1 から 6。要するに,<H1>...</H1> から <H6>...</H6> までの 6 段階の見出しがつけられる。<H1>...</H1> は“もっとも重要な見出し”で,<H6>...</H6> は“もっとも重要でない見出し”ということ。言い換えると,たとえば,<H1>...</H1> を“章の見出し”とするならば,<H2>...</H2> は“節の見出し”というように考えても差し支えない。

 また,見出しは文章とは別モノだから,<P>...</P> で囲まれた範囲には書いてはいけない。

 見出しの使い方を見てみよう。

<H3>Hello world HTML</H3>
<P>
“Hello world HTML”は最新の HTML 4.0 に対応したやさしい HTML 入門のためのチュートリアルです。</P>

Hello world HTML

“Hello world HTML”は最新の HTML 4.0 に対応したやさしい HTML 入門のためのチュートリアルです。

 上の例では,中程度の重要さの見出し <H3>...</H3> を使ってみた。また,ご覧のとおり <Hn>...</Hn> は,<P>...</P> のように前後に改行を伴う。

 注意すべきことは,一般に見出しは文字が大きくなるが,これを単に大きな文字を出力させるのに使ってはいけないということ。たしかに表示はうまくいくのだが,“見出しだよ”と言っておきながら実は中身が見出しじゃないというのは裏切り行為である。そもそも,全文見出しというのは電車の週刊誌の中吊り広告くらいで,ふつうの文書がそんな全文見出しなんてことあるはずがない。

HTML の考え方

 しかし,何で HTML では見出しを“見出し”として書くのだろう? ワープロのように“文字を大きく”と書いて済ませてしまわないのだろうか。

 これは,ワープロと HTML には考え方の違いがあるから。HTML は“文書を見ためでなく,部分の持つ役割で書いていく”ということが基本だからだ。

たとえば,“ここから〜ここまで段落”“ここから〜ここまで見出し”のように囲まれた部分は,文書の中で“段落”“見出し”という役割を持つことになる。それをブラウザが読みとって,“段落らしく”“見出しらしく”表示させてくれるのだ。

 だから,あまり見ため優先の書き方をするのは HTML らしくないといえるんじゃないだろうか。

 つまり,文書がどう見えるかを考えながら書くより,今から書く部分はどんな役割を持っているかというのを考えながら書くのがじょうずに HTML を書く秘訣である。


◆ Summary

 見出しには,重要さに応じて <H1>...</H1> から <H6>...</H6> の 6 段階がある。全文を見出しにするようなことはさけるようにしよう。