HTMLの改行の仕方ってどうやるんだろう？
brタグとかよく聞くけど…。
こんな悩みをもっている初心者の方が多いかと思います。
今回はそんな悩みを解消するためにbrタグによる改行の仕方や属性についてまとめました。
brタグの仕組みを理解して、HTMLファイルでいつでも改行できるようになりましょう。
- HTMLのbrタグについて知りたい
- HTMLのbrタグで改行する方法について理解したい
- HTMLのbrタグの使い方や属性などを詳細に覚えたい
スポンサーリンク
HTMLのbrタグとは
HTMLのbrタグとは、HTML文書のテキストを改行するために使うHTMLタグのことです。
「break」の略称で、brタグを記述すればどんなに途中の文章でも改行することができます。
HTML文書の中ではエンターキーによる改行は無視されるため、改行するには一般的にはこのbrタグを使うことが多いです。
例えば、web ページの文章のなかで、「しかし」などの接続詞が入る場合があります。
このような文章の中で主張が変わったり、主張の説明を追加で入れたいときに便利なのがこのbrタグです。
brタグを使うには<br>とHTML文書にマークアップして記述します。
一般的に、<>で囲まれたものをタグといいます。
HTMLのbrタグで改行する方法
HTML文書の中でbrタグが使われるシーンには以下のような場合があります。
- ひとまとまりの文章の中で改行を入れたい場合
- リスト以外の短い文章を複数記述したい場合
ひとまとまりの文章の中で改行を入れたい場合
<p>こんにちは。<br>私はユキです。</p>brタグは、上記のように内容が変わらない同じ文章で改行を入れたい場合によく使われます。
主にpタグの中で使用されます。
リスト以外の短い文章を複数記述したい場合
<p>
氏名：○○<br>
性別：○○
</p>brタグは、上記のようなリスト以外の短い文章を改行するときに役立ちます。
しかし、項目が多くなってきた場合は別のアプローチを考えたほうがいいでしょう。
HTMLのbrタグを使用するうえでの注意点
HTML文書の中でbrタグを使用する場合はいくつか注意点があります。
この章では注意したほうがいいことを３つ紹介します。
- 段落としてbrタグを使用する
- brタグの連続使用
- cssの代わりとしてbrタグをデザインに活用する
段落としてbrタグを使用する
HTML文書の中でbrタグを使用するときは段落としての使用はやめましょう。
段落として利用する場合はpタグを使用するのが一般的です。
理由は、brタグで改行しようとすると空白行が挿入されないからです。
長い文章でそのようなことが起こってしまうと、ユーザーにとって読みにくい文章になってしまいます。
ユーザビリティの低下に繋がってしまうので気をつけましょう。
brタグの連続使用
HTML文書の中でbrタグを使用するときは、一つのブロックでの連続使用は控えましょう。
一つのブロックで連続で使用してしまうと、開発者にとってコードが読みにくくなり、コンテンツの区別がつきにくくなってしまいます。
コードが長くなってくると、修正を加えたいときに時間がかかってしまうためbrタグの連続使用は推奨されません。
CSSの代わりとしてbrタグをデザインに活用する
CSSの代わりにbrタグでデザインを調節するのは推奨されません。
HTMLはあくまで文書をマークアップするための言語で、デザインに活用するための言語ではありません。
基本的な属性によってある程度の調整はできますが、基本的にはデザインはスタイルシート言語であるCSSに任せましょう。
HTMLのbrタグの属性
この章では現在のHTMLのバージョンで使われているbrタグの属性について紹介します。
HTML 4.01以前までは、clear属性がありましたが、HTML 4.01以降の現在はclear属性は非推奨になっています。
バージョンが「HTML Living Standard」になった現在では、brタグで使用できる属性はありません。
HTMLのbrタグ以外の改行する方法
この章ではbrタグ以外で改行できる方法を紹介します。
改行できるといっても、用途が違うため必要な場面で使えるようになってください。
- pタグ
- preタグ
- divタグ
pタグ
HTML文書の中で使わるpタグは、段落を表現するために利用されるタグです。
使用頻度が高く、HTMLの中で一番利用されるタグとなります。
preタグ
HTML文書の中で使われるpreタグは、HTMLで整形済みテキストを利用した場合に使用されるタグです。
絵文字の表現や、ファイル内の表現をそのままwebページに再現したい場合に使用されます。
divタグ
HTML文書の中で使わるdivタグは、コンテンツをひとまとめにして、各コンテンツごとに明確に区切るために利用されるタグです。
CSSでコンテンツごとにデザインを活用したい場合などに便利です。
まとめ
今回はbrタグによる改行の仕方や属性についてまとめました。
文章の途中で改行を入れたい場合は、pタグよりもbrタグを利用したほうがHTMLでのマークアップを直感的に利用できます。
HTML文書の中でbrタグを使いこなして改行マスターになりましょう。
スポンサーリンク
