【HTML初心者入門】<br>タグとは?使い方も解説! | WEBCAMP NAVI
【12月の受講枠も残りわずか】

【HTML初心者入門】<br>タグとは?使い方も解説!

みなさんはHTMLの学習をしていませんか?

今回の記事では改行ができる<br>タグの使い方や注意点について紹介していきます!

・学習ステップを確認したい方は、【入門者向け】プログラミング初心者がHTMLを学ぶ6つのステップ」の記事を参考にしてください。

改行が出来る

br タグは改行を挿入します。英単語breakの略です。挿入したその位置で改行します。

HTML文書では、テキストエディタで改行した部分は改行にはなりません。よって、文章を明示的に改行するためにはこの <br> を用います。

ただの改行はbrタグですが、ブロックとして切り分けたい場合は、 <div> を使用します。

また、HTML文書の改行をそのまま改行として表示したい場合には <pre> を用いるとテキストエディタのレイアウト通りに改行できます。

・ホームページ作成を勉強する時に参考にしたい記事を集めてみました。

【初心者入門】HTMLの学習で参考になるおすすめのブログ8選!を参考にしてみてください。

 

----------------------------------------------------------------------------------------------------------------------------------

転職成功率98%の【DMM WEBCAMP】で需要の高まるITエンジニアに転職しよう!
フルタイムのコミット型学習と手厚いキャリアサポート!
万が一転職できない場合は、全額返金の転職保証付き!
条件を満たすことで最大56万円のキャッシュバックも受けられます。
まずはお気軽に無料カウンセリングへ!

\参加者満足度99%!/
エンジニア転職のプロに無料で相談する!
※最短1分で申し込み可能

使用上の注意点

行頭に書いた場合の動作

<br> を行頭に記述していると、その直前の行の末尾がブラウザの右端に配置される時に1行余分に改行されてしまうことがあります。

<br> タグは行末に記述する方が間違いありません。行頭や行間に記述する場合は十分動作確認してお使いください。

<br>と<br />

<br>という表記と<br />という表記の両方があります。

この違いというのは、そのページが「HTML」で書かれているか、「XHTML」で書かれているかの違いです。

XHTMLは、「開始タグで始まれば終了タグ(閉じタグ)を必ず入れなければならない」というルールがあります。(もちろんHTMLも厳密にはそうですが、エラーにはなりません)

たとえば、<p>で始まれば</p>で終わるというものです。

しかし、<br>は終了タグが存在しないため、<br />と表記するようになっています。<img />タグなども同じ理由です。

ちなみに、HTMLはそこまで厳密ではないため<br />と書いてもエラーにはなりませんし、動作します。

・楽しみながら、プログラミング学習をしたいという人は【初心者入門】ゲーム感覚で遊びながらプログラミングを学習できるサイト4選!を参考にしてみてください。

<br>の連打

HTMLでは<br>を続けて使って、行間を大きくとるため・空白行を入れるためなどの間隔開け目的などに使用するのは、文法違反とされています。

間隔開けはCSSで、段落は<p>など、タグの正しい用途を守っていきましょう。

<br> 改行を正しく使うべき理由は 主に 2 つあります。

ブラウザの表示を統一して読みやすくする

ある程度適当な記述でも、ブラウザは自動補正して表示してくれます。

改行タグ <br> に関して言うなら、連続して使用すればどのブラウザでもそのぶんだけ改行して表示してくれます。

つまり、人が見る上では現在の仕様では問題は出にくいです。

段落 <p> と段落の間は 1 ~ 1.5 行ぶんの空白をとるのが一般的ですが、CSS の設定によっては余白がない場合もあります。

しかし、改行と段落タグをはじめとするタグの仕様は、仕様が変更された場合に意図しない動作をして困るかもしれません。

各タグの正確な使い方を覚えておけば、どのブラウザでも同じように表示させることができますし用途が正しければ仕様変更とはいえ、問題がおきることは少ないです。

・HTMLタグを一覧から探したい方は、「【初心者向け】htmlで使う主要なタグ一覧を解説」の記事を参考にしてください。

記事の構造を検索エンジンに適切に伝える

HTML タグを正確に使う一番の理由は、検索サイトに記事の構造を適切に伝えるためです。もちろん、正しい記述をしたから必ず上位表示されるわけではありません。

しかし、大事な要素であることに変わりはありません。

構造以外の要素がほぼ同レベルなら正しい記述をしておいたほうが有利、ぐらいに考えておくといいかもしれません。

レスポンシブ対応

<br>は明示的に改行を挿入でき、意図通りに改行できますが、その代わり融通がききません。

たとえば、PC環境に合わせて改行を差し込んでも、スマホ等で覗くと最適な改行位置にはなっていない場合が多々あります。

レスポンシブ対応などを考える場合に、改行を様々な環境に適応させるのは、例えば<p>要素で段落わけをして自動改行を利用するなど、よく考えて最適なタグを検討します。

----------------------------------------------------------------------------------------------------------------------------------

国内最大級のプログラミングスクール【DMM WEBCAMP】
手厚いキャリアサポートと高品質の学習カリキュラムで驚異の転職成功率98%!
あなたも、IT業界で輝くエンジニアになりませんか?
本気で人生を変えたい方は、ぜひ無料カウンセリングへ!

\参加者満足度99%
エンジニア転職のプロに無料で相談する!
※最短1分で申し込み可能

サンプル

HTML
<!DOCTYPE html>
<html>
<head>
<title>Webページ練習</title>
</head>
<body>
ここが1行目です。<br>
改行後の2行目です。<br>
3行目です。<br>
4行目です。<br>
ここがみっつめの段落です。<br>
間隔開けなどの場合は<br>
pタグ等を使用しましょう。<br>
</body>
</html>

初心者の方向けにbrタグを編集していきましたが、いかがでしたか?

brタグはWebサイトを作成する上で基本となるタグですので、しっかり基本を抑えてくださいね!

自宅にいながら、プロのキャリアアドバイザーに無料オンライン相談!

DMM WEBCAMPは転職成功率98%※1の全コースオンライン対応の転職保証型のプログラミングスクールです。短期間で確実にスキルを身につけて、ひとりひとりに寄り添った転職サポートで、未経験からのエンジニア転職を叶えます!

外出自粛期間中でも、自宅にいながらオンライン学習でスキルを高めることができます。

キャリアに迷ったら、まずはビデオ通話で無料キャリア相談を受けてみませんか?

自宅で過ごす時間が増えた今こそキャリアアップを目指しましょう!この機会を活用し、ぜひDMM  WEBCAMPの無料カウンセリングをご利用ください。

オンラインで実施中/
【無料】キャリア相談の日程を見る

※ 1 2020年4月時点