開発ブログ
Git、CSS、HTML、正規表現など、入門者がつまづきそうなポイントを中心に、役立ち情報発信します。。

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

最終更新:2018-07-21 by Joe

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

HTML における改行の方法

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

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

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

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

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

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

<p>HTMLでは、p を使って段落を構成します。</p>
<p>なぜなら、文字群の意味を記述する言語、すわち「マークアップ言語」だからです。</p>
<p>でも、そんなに難しく考えているよりも、まずは思ったとおりに書けるほうがハッピーです。</p
なぜ p タグは改行されるの?

HTML要素は、表示のされ方で大きく2種類に分けられ、それぞれ「インライン」「ブロック」と呼ばれます。インラインレベルの要素は行に流れ込むように配置され、またブロックレベルの要素は、自身がブロックを形成するように配置されます。

<p>タグは「ブロックレベル」の1つですので、<p>..</p> で囲んだ要素は、改行が発生するのです。

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

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

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

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

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

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

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

 

以上になります。

 

閉じる