HTMLで改行やスペース(空白)を入れる方法

HTMLのソースコード内で 改行スペース(空白)を入れていても、 ブラウザにそのまま改行やスペースが表示されるわけではありません。
HTMLコードとして明示してあげる必要があります。 まずは改行、次にスペースを入れる方法を紹介します。

改行を入れる

HTMLで改行を入れるには<br>タグを使う方法と、 <pre>タグを使う方法があります。

<br>タグ

「br」は「break(改行)」の略です。
brタグを使用する場合は、 改行したい部分に「<br>」を入れることで、 ブラウザ上でも改行が表示されます。

<p>改行コードのサンプル、<br>
改行コードのサンプル</p>

上のコードは次のように表示されます。

改行コードのサンプル、
改行コードのサンプル

<pre>タグ

preタグは整形済みテキストを挿入する目的で使用され、 preタグで囲まれた部分はブラウザ上でそのまま表示されます。 プログラムのソースコードなどを表示させる時に良く使われるタグです。

<pre>
preタグ部分は
そのまま
表示されます。
</pre>

上のコードは次のように表示されます。

preタグ部分は
そのまま
表示されます。

スペース(空白)を入れる

スペースを入れる場合は「&nbsp;」を使う方法と <pre>タグを使う方法があります。

&nbsp;

「&nbsp;」と入力することで、スペースが表示されます。 「&nbsp;&nbsp;」ならスペース2つです。

<p>スペースを2つ&nbsp;&nbsp;入れます。</p>

上のコードは次のように表示されます。

スペースを2つ  入れます。

<pre>タグ

先程改行の所で紹介したように、 preタグを使えば改行と同じくスペースもそのまま表示することができます。

<pre>
preタグ部分は
スペースも   そのまま
表示されます。
</pre>

上のコードは次のように表示されます。

preタグ部分は
スペースも   そのまま
表示されます。
HTML・CSS入門