Webサイト制作初心者の方向けに、HTML5のbrタグについて解説します。
brタグは、文章を改行するために用いるタグで、改行タグとも呼ばれます。
HTMLで記述された文章は、テキストエディタで改行しても、プレビューでは改行されないため、brタグが必須となります。
brタグの使い方を理解することで、Webサイト制作の際に文章を適切に改行できるようになります。
Contents
HTML5におけるbrタグとは？
brタグは、HTML5で文章を改行するために用いるタグです。
「br」は英単語の「Break」の略称で、「改行タグ」とも呼ばれます。
HTMLで記述された文章は、テキストエディタで改行しても、実際のプレビューでは改行されません。
そのため、文章を明示的に改行するために、brタグが必要となるのです。
1:brタグの役割
brタグは、HTML文書内で改行を行うためのタグです。
brタグは、単独で記述する「void要素」と呼ばれるタグの1つです。
そのため、開始タグと終了タグの記述は必要ありません。
2:brタグの記述例
<p>株式会社サンプル<br>
電話番号：012-345-6789<br>
営業時間：9:00～20:00<br>
</p>上記の例では、brタグによって「株式会社サンプル」「電話番号」「営業時間」のそれぞれが改行され、見やすく表示されます。
brタグを使用する際の注意点
brタグは、改行タグであるため、多用するとソースコードが見づらくなり、ページの重くなる原因にもなります。
余白を作る際はCSSを使用し、段落を区切る場合はpタグを用いるのが一般的です。
brタグとpタグの違いを理解することで、より適切なコード記述が可能になります。
1:brタグの多用は避けるべき
brタグは、あくまで改行を行うためのタグです。
余白を空けたり、段落を区切ったりするためにbrタグを多用すると、ソースコードが見づらくなり、ページの重くなる原因にもなります。
2:CSSによる余白の調整
デザイン的に余白を作りたい場合は、CSSを用いて調節しましょう。
CSSを使用することで、brタグを多用することなく、見栄えのよいレイアウトを実現できます。
3:pタグによる段落の区切り
段落を区切りたい場合は、pタグを用いることをおすすめします。
pタグは、文章の全体を段落で区切るためのタグです。
pタグで囲われた部分は、ブラウザにおいて段落としてみなされ、CSSで指定することで余白も作れます。
4:brタグとpタグの使い分け
brタグは改行のみを行うタグであり、pタグは段落全体を区切るタグです。
両者を使い分け、読みやすく、見直した際にわかりやすく編集が容易になるコードを記述するよう心がけましょう。
まとめ
brタグは、HTML5で文章を改行するために用いるタグです。
brタグは改行タグであり、多用するとソースコードが見づらくなるため、余白を作る際はCSSを使用し、段落を区切る際はpタグを用いるのが一般的です。
brタグとpタグの違いを理解することで、より適切なコード記述が可能になります。
当社ではクライアントのビジネスモデルや業界特性に合わせた提案を行うため、定期的な打ち合わせやヒアリングを重視しています。
お客様の強みを活かした記事構成の提案や、競合分析を踏まえた戦略的なコンテンツ制作が特徴ですので、集客でお悩みの方はぜひお気軽にお問い合わせください。
