改行タグと段落タグの使い分けがいまいちわからない
改行の基本を理解したい
こんにちは！HTML、CSSが得意な侍エンジニアブログ編集部のシホです。みなさんはHTMLで改行するとき、改行タグ<br>や段落タグ<p>を使っていると思いますが、上手く使い分けられていますか？
とりあえず改行は<br>だ！と思って使いすぎてしまうとちょっと困ったことが起きてしまいます。改行タグ<br>と段落タグ<p>の役割をきちんと理解して、見やすいコーディングをマスターしましょう！
この記事はこんな人のために書きました
- HTMLで改行するには
- 改行タグと段落タグの基本的な使い方
- 意図的に改行させたくない場合
HTMLで改行する方法についてわかりやすく解説していますので、ぜひ参考にしてください
HTMLで改行するには
HTMLで改行したいとき、普段テキストで使うようにEnterで改行してみると上手く改行できません。
See the Pen odBweX by Shiho Sakai (@shiho-sakai) on CodePen.0
このように、テキストで普通にEnterで改行してしまうと、一文字分の空白がはいっただけで改行されません。改行するためには「改行タグ<br>」「段落タグ<p>」を使って明示的に書く必要があります。
HTMLで改行する方法と注意点
改行タグ<br>で改行する
brは「BRreak（改行）」の略です。「ここで1行改行する」という意味なので、終了タグは必要ありません。
See the Pen YLNQoZ by Shiho Sakai (@shiho-sakai) on CodePen.0
改行タグ<br>使用時の注意点
改行タグ<br>を使う際に3つ注意して起きたい点があります。
連続で<br>を使わない
行間をたくさんあけるために次のように<br>を連続で使うのは構造上好ましくありません。
See the Pen ZoLydd by Shiho Sakai (@shiho-sakai) on CodePen.0
行間をたくさんあける場合は、後で説明する段落タグ<p>を使うかCSS（ページをデザインする言語）でやりましょう。
バージョンによってタグが違う
HTMLは時代によって何度かバージョンアップされてきました。過去HTML4やXHTMLが使われてきましたが現在はHTML5が主流となっています。
HTML4とHTML5では<br>を使うことができますが、XHTMLは<br>ではなく<br />を使うので気をつけましょう。
また、brと/の間には半角空白が必要なので要注意です。
他のディバイスで同じように表示されるとは限らない
改行するならとりあえず<br>を使っておこうという認識は少し危険です。なぜかというと、パソコンのブラウザ上では正しく改行されていても、スマホで見たときに変なところで改行されてしまう可能性があるからです。
以下がスマホで見た場合の例です。
文章最後の数文字でスマホの横幅の限界により改行されていますね。これでは大変読みづらくなります。このようになってしまう場合もあるので、むやみやたらに<br>を使うのではなく、次に説明する段落タグ<p>を使うのをおすすめします！
段落タグ<p>で改行する
続いては、段落タグ<p>を使って改行する場合です。pは「Paragraph（段落）」の略です。
段落タグ<p>の目的は文字通り段落をつけて文章を見やすくするためにあります。<p></p>で囲むことによって文章のまとまりが一目でわかるようになり、改行できます。
See the Pen OZWjgo by Shiho Sakai (@shiho-sakai) on CodePen.0
改行させない方法
HTML5では<nobr>を使って改行させない方法がありましたが、最近廃止されたようです。
改行せずにブラウザに表示したい場合は、CSS（ページをデザインする言語）を使いましょう！
WEBサイト製作スキルを身につけて自由に働きたい方は
HTMLを学んでいる人の中には、その先にフリーランスとして案件を獲得し、自由な生活をしたいと考えている人もいるのではないでしょうか？
そんな方はHTMLやCSSのようなマークアップ言語だけでなく、JavaScriptやPHPといったいわゆる「プログラミング言語」も扱えるようになる事をオススメします。
というのも、HTMLやCSSだけの案件は数が少ないことに加え、単価も低い案件が多いからです。しかし、HTMLやCSSに加えてプログラミングスキルがあれば、高単価案件を継続的に獲得しやすくなります。
かといって、プログラミング言語の習得はHTMLやCSSと比べて難易度が一気に上がるため、独学だと挫折しがちなもの。そこで、先も見据えている人はプログラミングスクールの利用をしてしっかりスキルを身に付ける事を検討してもいいかもしれません。
弊社「侍エンジニア」では、あなただけのフルオーダーメイド学習カリキュラムを作成し、現役エンジニアがマンツーマンでレッスンするので挫折する事なく学習を続けられます。更に、フリーランスとして仕事を獲得するサポートもさせて頂いています。
結果として、弊社を受講している間にクラウドソーシングからお仕事を受注して納品まで行い、フリーランスエンジニアとしてデビューした方も多々いらっしゃいます。
少しでも興味を持った方は、まずはお気軽に弊社の無料カウンセリングを利用してみてください。
入会する、しないに関わらず、業界随一のコンサルタントがあなたの目標をヒアリングし、ぴったりの学習プランを提供させて頂きます。下記ボタンから直接予約が可能となっています。オンラインの利用もできますので、是非お試しください。
まとめ
いかかでしたでしょうか？
改行タグ<br>と段落タグ<p>の使い分けを正しく理解しておくと、とても見やすくなり、どのブラウザでも同じように表示ができます。
HTMLで改行する時は、ぜひタグの意味や役割を理解して使ってみてください！
