文章を整形する

ここで学習するエレメント
BRエレメント、Pエレメント、DIVエレメント、HRエレメント
文字参照記号

文章の改行

さて、先程作成したＨＴＭＬ文書をメモ帳で開いてください。
現在、BODYエレメントで挟まれた部分は、ＨＴＭＬ研修だけですね。
改行して・・・

と入力してみてください。
メモ帳上のBODYエレメントで挟まれた部分は、以下のようになっているはずです。

これをＷＷＷブラウザで見てみると、以下のように表示されてしまいます。

なぜ改行されないのでしょうか？
エレメントの中には改行を意味するエレメントが存在します。
それを使用しないと、いくらテキスト上は改行していてもブラウザ上では１行とみなされてしまいます。

改行するためには、<BR>タグを使います。
ＨＴＭＬ文書を以下のように修正してみましょう。

これをブラウザで参照すると、正しく改行されているはずです。

段落

実は、今の段階では HTML4.0のルールから外れています。HTML4.0からBODYエレメントに直接文章を書けないきまりになりました。必ず、Pエレメントか他のブロックレベルエレメントでくくらなければならなりません。
文章を書き出す前には、必ず<P>を書くものだ、と思っていてください。もちろん、文章の終わりには</P>を付けます。

それでは、HTML文書を正しいルールに則った記述法にしましょう。

文字揃えをする

次に、文章が表示される位置を変えてみましょう。
今のままでは、文章は全て左寄せで表示されてしまいます。
場所によっては、文章を右揃えしたり、センタリングしたい場合もあります。どうすればよいでしょうか？
DIVエレメントを使用すると、文字揃えを制御できます。
試しに、ＨＴＭＬ文書を以下のように修正してみましょう。

ブラウザで参照すると、以下のように表示されます。

ＨＴＭＬ研修という文だけが、センタリングされて表示されます。

文字を「右寄せ」する場合は、align= を「right」を、左寄せは「reft」を設定します。
また、センタリングには、<CENTER>というタグも存在します。これは、元々Navigatorが独自に拡張した<DIV align="center">の省略形です。一般的になってしまったために正式採用されました。

横罫線

文章を見やすくするための手段として、横罫線を引くことも有効な手段です。
横罫線を引くには、<HR>タグを使用します。
ＨＴＭＬ文書を以下のように修正してみましょう。

これをブラウザで参照すると、以下のように表示されます。

この横罫線<HR>は、太さと長さも変更することが可能です。
今回の研修では省略します。後でＨＴＭＬリファレンスマニュアル等で調べてみてください。

しかし、この時点でのHTML文書は、HTML4.0的には間違いなのです。なぜでしょう？
Pエレメントは、インラインエレメントしか含むことができません。しかし、<P>〜</P>の間に、ブロックレベルエレメントである<HR>が存在します。このため、<P>と</P>が<HR>によって、分断された状態になってしまっています。
以下のように修正しましょう。

前にも述べましたが、この辺のことは文法チェッカーを利用すれば分かることですので、過剰に意識することはやめましょう。例によって、ブラウザは文法ミスには寛容です。

文字参照記号

HTMLでは、空白文字（半角スペース）は、いくつ打ってもひとつです。
また、改行コードも半角スペースひとつと見なされます。どうしても空白で文字を揃えたい場合は、全角スペースか半角スペースを意味する&nbsp; という文字参照記号を使いましょう。
また、<や>などは、そのまま打つとタグとして認識されてしまい、表示できません。&nbsp;の＆のように文字参照記号の一部になっているものも表示不可能です（A & Bのように"&"が文字参照記号の一部でないことが明らかな場合は、"&"をそのまま使っても良い）。そういった場合、以下の文字参照記号を使います。