改行を意味する<br>と区切り線を表す<hr>について

HTMLの文章構造においては、改行をするときに専用の要素を使用する必要があります。テキストファイルであれば、Enterキーを押すだけで改行できますが、HTMLだとbr要素を使うという決まりがあります。

また、話題を変えるときの区切りなども、hr要素を使って表すことができます。これらを使うことで、視覚的にも読みやすい文章となりますから、積極的に活用するようにしてください。

ここでは、br要素とhr要素について解説をします。

 

強制的に改行させるbr要素

パソコン上でWordやテキストエディタで文章を書く場合、Enterキーで改行することが出来ますよね。しかし、HTMLでEnterキーを押しても、ソース上は改行されますが、ブラウザで表示した時に改行はされません。

なので、br要素を使うようにしましょう。「forced line break」の略で<br />と記述しますが、終了タグは存在せずに、これ単体で機能する要素です。

<p>今日は、朝から雨が降っていた。<br />
なので、家から一歩も出ませんでした。</p>

上記のように記述すれば、文章を途中で改行させることができます。

20141019-2-

また、連続して<br />を記述することで行間を開けることが出来ますが、本来の意味は文章を途中で区切るためのものです。なので、行間を開けたい場合は、CSSでmarginの指定を行ってください。

 

水平の区切り線を入れるhr要素

文章中に話を展開させたいときや別の話題に移りたいときには、hr要素を使って段落を区切るのが有効です。hr要素を使えば、水平線を入れることができます。前の段落と区別することが出来るので、読みやすい文章となります。

hr要素は「horizontal rule」の略ですが、<hr />と表記します。br要素と同じように終了タグは存在せず、単体で成立する要素です。

<p>今日は、朝から雨が降っていた。</p>
<hr />
<p>なので、家から一歩も出ませんでした。</p>

上記のように記述すると、真ん中に水平線を引くことが出来ます。

20141019-3

<hr />はブロックレベル要素なので、左右一杯に線が引かれて、上下に改行が入ります。ページのレイアウトにも応用できるので、利用できる範囲は広いです。また、HTML4.01ではhr要素の意味はありませんでしたが、HTML5からは「テーマや話題の区切り」を意味します。

 

以上、br要素とhr要素の解説をしました。利用頻度の多いタグですから、しっかりと使いこなせるようにしましょう。適切に活用することで、読みやすいページにすることが出来るはずです。

サブコンテンツ

このページの先頭へ