HTMLを学ぶ。改行を学ぶ。

HTMLを学ぶ。改行を学ぶ。

今回のポイント

テキストエディター上で改行されても、ブラウザ上では改行されて表示されることはありません。
記事を書いた際に、ユーザーにとって適切な改行があると非常に読みやすい文章となります。
では今回は改行について解説していきます。

改行を表す要素(brタグ)

brタグは改行を表す要素となります。
ではbrタグについて少し詳しく解説していきます。

brタグの意味と役割

brタグはline breakの略で、改行であることを表します。

brタグのカテゴリ

  • フロー・コンテンツ
  • フレージング・コンテンツ

brタグのコンテンツ・モデル

なし(空要素)

brタグを実際に記述してみる

では実際にbrタグを使用した例を紹介します。
いつものように、以下のような記事があったとします。

〒1234-○○○○東京都○○区〇〇1-1-1

今回は郵便番号の後に改行を入れたいと思います。
ではこちらは文章なので、P要素で記述していきます。

</p>〒1234-○○○○東京都○○区〇〇1-1-1</p>

そして改行を入れたい郵便番号の後にbrタグを挿入します。
ここでbrタグがP要素内で利用できるかは、以前紹介した記事(下記リンク先)で確認しでおきましょう。

HTMLを学ぶ。コンテンツ・モデルと要素について知る。

</p>〒1234-○○○○<br>東京都○○区〇〇1-1-1</p>

これで完了です。
では出来栄えを確認してみましょう。

いかがでしょうか。改行(brタグ)は使いやすいと思います。
しかし、以下のようにbrタグを使って空白を開ける行為は絶対にやめましょう。

<p>○○○○○</p>
<br>
<br>
<br>
<p>○○○○○</p>

HTMLは文章や文字の装飾の為に使用することは、ウェブサイトのレイアウト崩れに繋がってしまいます。
文章や文字については、CSSを使用して装飾していきましょう。

今回の内容はここまでです。
brタグは多様するタグですので、必ず覚えておきましょう。

次の記事

前回の記事

HTMLを学ぶ。シリーズはこちら

HTMLカテゴリの最新記事