HTMLで改行をする方法

HTMLの改行はふつうのテキストの改行とは違うため、入門者は戸惑いやすいです。

このページでは、HTMLの改行についてわかりやすく解説します。

改行してるのに改行できない

テキストエディタ上でHTMLファイルの文章を改行していても、ブラウザで表示すると改行されません。

これはHTMLでは改行は文書構造と見なされるため、改行もHTMLタグで表現する決まりになっているからです。逆に、段落を表す<p>では、テキストエディタ上で改行なしで書いても、ブラウザ上では前後に改行が入ります。

ブラウザはHTML文書を解析して、HTMLの仕様通りに画面にコンテンツを表示します。

このような書き出しをレンダリングと呼びます。

このHTMLレンダリングによってHTMLタグはテキストから表現に変わります。例えば<storng>は太字になり、<a>はリンクになるのです。

HTMLタグ以外のテキストコンテンツはそのままテキストとして表示されますが、テキスト中の改行はレンダリングされずに無視されます。まったく表現されないか、少し隙間が空いたりするブラウザもあるようですが、改行としては表現されません。

このように、HTMLではテキストはあくまでテキストとして扱われ、文書構造である改行をテキスト内に含めても無視されるわけです。

文書構造である改行を表現するには、HTMLの改行を表す<br>タグを使う必要があるのです。

テキストエディタ内での改行はもちろんテキストエディタ内では改行として表現されます。改行はコンピュータ上では文字としては見えませんが機能の様子は伺えます。このような文字を制御文字と呼び、改行は改行コードと呼ばれます。

残念ながらコンピュータのOSごとに改行コードは異なるので、あのOSでは改行されるがこのOSでは改行されない、という事態が起こり得ます。テキストエディタなどに改行コードを選択する機能が付いていたりするのはこのためです。

とはいえ、改行コードの種類は数種類で、一般的にはWindows、Mac、Linuxの3種類という感覚でしょうか。

HTMLで改行をするには<br>ですが、ソース上で改行させるにはこの改行コードを入力するというわけです。

改行に関してややこしいのが、HTMLを出力するPHPスクリプトでの改行の扱いです。

まず、PHPスクリプト内のコード中の改行、そしてPHPスクリプトが出力する改行コード、さらにPHPスクリプトが出力するHTMLとしての<br>による改行、とが登場します。

		// <--見えないけど改行されている
		echo "\n";
		echo '
';

1行目はPHPスクリプトエディタ内での改行で、改行コードが改行として表現されています。

2行目はPHPスクリプトによる改行コードの出力で、出力したHTMLソースなどのテキスト内で改行となります。PHPで改行コードを出力するには\nを使います。\nは結果的にOSごとの改行コードとして出力されます。

3行目はブラウザによるHTMLレンダリングによってブラウザ画面上で改行となります。