今回はHTMLで使用する<p>と<br/>についてまとめた。
どちらも使用すると改行されるが、それぞれ使い方に違いがあるから注意。
<p>とは？
<p>は主にHTMLの<body>タグ内で使用される。
「p」とは「paragraph（パラグラフ）」の略で、「段落」を意味する。
一つ目は昨日のご飯の話題、二つ目は今日のご飯の話題となっている。
話題が変わるときなど、文章ごとに段落を使用することで読みやすくなる効果がある。
上の文章を<p>を使用して表すと以下のようになる。
<p>昨日の朝ご飯は目玉焼きとお味噌汁でした。お昼ご飯は家族とラーメンを食べに行き、夜ご飯はたこ焼きパーティをしました。</p>
<p>今日の朝ご飯はパンとスクランブルエッグでした。お昼は食べませんでしたが、夜は焼き肉を食べました。</p>
</body>
昨日の朝ご飯は目玉焼きとお味噌汁でした。お昼ご飯は家族とラーメンを食べに行き、夜ご飯はたこ焼きパーティをしました。
今日の朝ご飯はパンとスクランブルエッグでした。お昼は食べませんでしたが、夜は焼き肉を食べました。
コードを入力した時点では何も改行していなかったけれど、<p></p>を入力したから段落で改行された。
<p>には開始タグと終了タグがある。
段落の最後には</p>を付けなければならないことに注意する。
<br/>とは？
<br/>も<body>タグの中で使用される。
<br>と書かれることもあるが、XHTMLというものでは使用されない為、ブラウザによって対応しない可能性がある。
使用する際は<br/>と書くこと。
「break」の略で、HTMLでは「強制改行」を表す。
そのままの意味で、強制的に改行させたいところに使用する。
上では2つの文章を改行無しで表示している。
これを改行しようとすると以下のようなコードになる。
お昼ご飯は家族とラーメンを食べに行き、夜ご飯はたこ焼きパーティをしました。
<br/>には終了タグと呼ばれるものがない。
そのため、改行したい時点に<br/>と記述するだけで良い。
終了タグが必要なもの、終了タグを必要としないものがあるのでそれぞれ注意が必要。
注意点
<br/>はあくまでも強制的に改行させるためのもので、何行も連続して使用するものではない。
文章のまとまりは<p>タグを使用して段落を使用し、その中で改行したい部分にだけ<br/>を使用する。
以下のコードの書き方は推奨されない例。
昨日の朝ご飯は目玉焼きとお味噌汁でした。<br/>お昼ご飯は家族とラーメンを食べに行き、夜ご飯はたこ焼きパーティをしました。<br/><br/>
今日の朝ご飯はパンとスクランブルエッグでした。<br/>お昼は食べませんでしたが、夜は焼き肉を食べました。
</body>
ブラウザで表示すると以下のようになる。
お昼ご飯は家族とラーメンを食べに行き、夜ご飯はたこ焼きパーティをしました。
今日の朝ご飯はパンとスクランブルエッグでした。
お昼は食べませんでしたが、夜は焼き肉を食べました。
改行は出来てはいるが、HTMLでは上と下の文章は段落とは認識しない。
文章のまとまりは<p>を使用し、部分的に改行を入れたい場合のみ<br/>を使用する。
最後に
<p>と<br/>はどちらも改行するが、<p>は段落のまとまりを表すもの。
一方<br/>は強制改行という役割で、部分的なもの。
使い方に注意！
コメント