HTML STUDY

改行・段落・区切り

ここではHTMLで文章を入力する際に使用する基本的なタグについて解説していきます。解説するのは<p>,<br>,<hr>の3つになります。

HTMLタグは開始と終了がセットになっていると解説しましたが、改行を表す<BR>のように単一で完結するHTMLタグがあります。またHTML5ではこのように単一で完結するタグに半角スペースとスラッシュを入力します。例:<br />

<p>

<p>はひと段落を表します。<p>~</p>内にテキストを入力するとブラウザに文章が表示されます。またHTMLコード内で改行ボタン(enter)で改行してもブラウザ上では改行されません。改行をする場合は<br>を使用します。

要素解説
<p>ひと段落
<p>p要素はひと段落の文章を表します。</p>

ブラウザ表示例

p要素はひと段落の文章を表します。

<br>

br要素は改行を表します。通常HTMLタグは開始と終了タグがセットになっていますが、br要素は単一で完結するため終了タグを必要としません。またスペースを空けるためにbr要素を連続して使用するのは適切な方法ではありません。文章ごとにスペースを調整する場合は<p>にテキストを入力し、CSS(スタイルシート)で<p>の間隔を調整しましょう。ちなみにひと段落の間隔を調整する場合は「margin」、段落内の文章の間隔は「line-height」を設定します。

要素解説
<br>改行
<p>br要素は<br>改行を表します。</p>

ブラウザ表示例

br要素は
改行を表します。

<hr>

hr要素はテーマの区切りを表します。hr要素も同じように単一で完結するHTMLタグです。またブラウザ上ではhr要素は直線で表されます。HTML5ではセクションごとにheadrやarticle、asideなどテーマにあった適切な要素があり、内容によってコンテンツを分けるのであればそちらを使用しましょう。<hr>はあくまでシーンが変わる文章内で使用されるのが適切です。

要素解説
<hr>テーマの区切り
<p>p要素はひと段落の文章を表します。</p>
<hr>
<p>br要素は<br>改行を表します。</p>

ブラウザ表示例

p要素はひと段落の文章を表します。


br要素は
改行を表します。

HTML文字 関連記事