HTML:改行の方法。<br> と <p> の使い方

最終更新:2021-06-22 by Joe

HTMLにおける、改行の方法についてです。

HTML における改行の方法

方法1通常の改行には<br>タグを使う

HTMLにおいて、ファイル内のテキストの改行は、<br>タグを利用します。ちなみに、br は break の略で、英語で、改行を line break と言います。

授業の時間:<br>19:00 ~ 20:00

方法2<p>などのタグで段落の構成して、改行する

一方で、HTMLでは、不用意に改行を用いず、意味のまとまりで「段落」を構成することが一般的です。

例えば、1つの段落を構成するには<p>…</p>というタグで囲みます。p は paragraph (段落)の略です。HTML<p> タグで段落を構成すると、段落の区切りで自動的に改行されます。

<p>HTMLでは、p を使って段落を構成します。</p>
<p>なぜなら、文字群の意味を記述する言語、すわち「マークアップ言語」だからです。</p>
<p>でも、そんなに難しく考えているよりも、まずは思ったとおりに書けるほうがハッピーです。</p>
なぜ p タグは改行されるの?
HTML要素は、表示のされ方で大きく2種類に区別でき、それぞれ「インライン要素」「ブロック要素」と呼ばれます。インラインレベルの要素はその行に流れ込むように配置され、またブロック要素は、自身がブロック(四角い塊)を形成するように配置されます。

<p>タグは「ブロック要素」の1つですので、<p>..</p> で囲んだ要素内のコンテンツは、四角いブロックないから出ることはありません。こうして、1つのPタグのごとに、改行が発生するのです。

インラインとブロックはCSSによる中央寄せ方法が異なる。

最近の、HTML5の新しい考え方では、インライン、ブロックという区別よりも、より細かく分類が分けられていますが、大雑把な考え方としてこの2つの区別を知っておくと、HTMLのレイアウトを理解しやすいでしょう。

方法3<pre> タグで改行をそのまま表示する

ご存知の通り、HTMLドキュメントでは、通常のテキスト内の改行(リターンキー)は改行されて表示されません。

ただし、テキスト内の改行をそのまま表示させる方法もあります。<pre>タグを使います。pre は preserve (保存する)の略ですが、<pre>…</pre>タグで囲んだテキストは、改行や半角スペースの数などをふくめて、テキスト文字列の表現内容をそのまま表示されます。

pre タグは、何らかの改行を含む文書(プログラムのソースコードなど)の抜粋など、特別な場合にのみ使用します。

<pre>
このタグのなかは、
改行も書いたとおりに
表示されるよ!
</pre>

以上です。