HTMLで改行【brタグ・pタグ・preタグ】

はじめに

技術広報のyayawowoです。

Webサイトを作成する上で欠かせないのがHTMLのスキルです。
エンジニアの皆様にとっては、必ずと言っていいほど学習はされてきた方が多いのではないのでしょうか？

今回以下の方向けに、HTMLの基本からHTMLで改行する方法をご紹介したく、ブログにまとめさせていただきました。
◆ HTMLを初めて触る方
◆ HTMLにこれからチャレンジしたい方
◆ HTMLの基本を見直したい方

本ブログをご確認いただくだけで、基本を振り返る内容としていますので是非ご参考いただけますと幸いです！

はじめに
HTMLとは
HTMLのタグとは
- Webページの構成
HTMLで改行する方法
HTMLで改行する際の注意点
まとめ

HTMLとは

HTMLとは、Hyper Text Markup Language（ハイパーテキストマークアップランゲージ）の略称です。
HTMLの言語は、Webページを作成するために開発されました。

皆さんが利用しているWebページのほとんどが、HTMLとCSSで見た目や色等を構成していると言っても過言ではありません。
え？本当にHTMLで構成されてるの？と、疑問に思った方は皆さんが利用しているWebページ上でソースを表示し、確認してみてください。

HTMLのタグとは

Webページを作成するために開発された言語であるHTMLは、コンピュータに理解するための言語でもあります。
ただし、コンピュータに理解してもうためには文章構造を作ってあげないといけません。
そこで、登場するのがHTMLタグです。
HTMLタグは、< >（大なり小なり）の記号で、文章をその意味ごとに囲んで作成します。
基礎的なの書き方は以下の通りです。

HTMLタグ
- <タグ名属性名=”属性値”>記述内容</タグ名>
 - ＜タグ名＞は開始タグ
 - ＜/タグ名＞は終了タグ

HTMLタグを駆使することで、コンピュータに文章構造を理解させ、Webページを作成していきます。

Webページの構成

HTMLのWebページのタグ構成をご紹介します。
基礎的な構成は以下の通りです。

See the Pen ExWrLog by yasuko (@yayafu_) on CodePen.

上記に記載したHTMLタグについて解説します。

!DOCTYPE html

<!DOCTYPE html>とは、文書の解釈に使う文書型の定義をするものです。
簡単に言えば、「このテキストファイルにHTMLを書いていくよー！」ということ。
<!DOCTYPE html>は、正確に言えばHTMLのタグではないのですが、HTMLを作成するとき、HTMLタグよりもまず書くべきものですので忘れないようにしてください。
また、記述しているテキストファイルは、拡張子をHTML（.html）にして「HTMLファイル」にすることも忘れてはいけません。

html lang=”ja”

<html lang=”ja”>とは、言語の指定を行う定義です。
上記の場合、"ja"としまいますので日本語のWebページであると定義しています。
主な言語のコードは以下の通りです。

コード	言語
ja	日本語
en	英語
zh	中国語
ko	韓国語
it	イタリア語
es	スペイン語
fr	フランス語
de	ドイツ語
pt	ポルトガル語

head

<head>とは、文書のヘッダ部分を指定するタグです。
<head>タグで囲まれた内容は、Webサイトには表示されません。
<head>内では、文字コード指定、<title>タグ、<meta>タグ、<link>タグなど、HTMLファイルのさまざまな情報を記載します。
外部ファイル化したCSSやJavaScriptを、<head>タグの中に記述して読み込ませることもあります。

meta charset=”UTF-8″

<meta charset=”UTF-8″>とは、文字コードの指定です。
一般的に使われている文字コードは、”UTF-8”が多い印象です。

body

<body>とは、実際にブラウザの画面上に表示される内容を指定するタグです。
<body>タグの中に書かれたテキストや画像などがブラウザの画面上に表示されます。

簡単ではありますが、HTMLのタグ構成について解説させていただきました。
では、ここからはHTMLでの改行方法に特化し、ご説明したいと思います。

HTMLで改行する方法

HTMLで改行する方法として、以下3種類のタグを利用します。

 タグ
タグ
<pre>タグ

まずは、上記3種類について解説します。

① brタグ

 とは、BReak（改行）の略です。
テキストの改行したい位置で を記載すると、改行します。
また、 タグに（終了）タグは必要ありません。

活用例は以下の通りです。

改行前

See the Pen GRWzwzE by yasuko (@yayafu_) on CodePen.

改行後

See the Pen GRWzwLv by yasuko (@yayafu_) on CodePen.

② pタグ

とは、Paragraph（段落）の略です。
で囲まれた内容は、1つの段落扱いとなります。
段落をいくつか作成することにより、改行と同じ扱いをすることができます。

改行前

See the Pen vYxbvEZ by yasuko (@yayafu_) on CodePen.

改行後

See the Pen RwpvEGj by yasuko (@yayafu_) on CodePen.

③ preタグ

<pre>とは、preformatted text（整形済みテキスト）の略です。
<pre>で囲まれた内容は、整形済みテキストとして表示されます。
整形済みテキストとは、その名の通り整形してあるテキストのことで、ソース中のスペースや改行などをそのまま等幅フォントで表示します。
ただし、以下のような文字は特殊文字として認識されてしまいますので実態参照に置き換えるのをお忘れなく。

「<」：<
「>」：>
「&」：&

改行前

See the Pen OJpdrxo by yasuko (@yayafu_) on CodePen.

改行後

See the Pen RwpvExM by yasuko (@yayafu_) on CodePen.

HTMLで改行する際の注意点

HTMLで改行するにあたり、3種類のタグを説明させていただきました。
ただし、注意しなくてはならに点もありますので以下をご参考いただけますと幸いです。

① 改行タグはバージョンによって異なる

どの言語にも共通していますが、HTMLも時代の変化に合わせバージョンアップされています。
以前までは、HTML4やXHTMLが使われてきましたが、現在はHTML5が主流となっています。

例えば、 は、 を使うことがあります。
HTML4とHTML5では を使うことができますが、XHTMLは ではなく を使うので気を付けましょう。
また、brと/の間には半角空白が必要なのでこちらもお忘れなく。

② 改行タグを連続利用しない

私も初めの頃やりがちだったのが、 の連続利用です。
もし、連続で を利用すると、Webページ上では1行分の空白行ができたような表示になります。
これは上述した（段落）を使用した際と見た目は同じです。
段落分けをしたい箇所にはを、改行したい箇所には をと、目的に合わせて使い分けするようにしましょう。

③ 改行タグはデバイスによって表示範囲が異なる

 は、単純に改行を目的しているタグです。
そのため、閲覧者が使用しているブラウザによってはおかしな箇所で改行されることになってしまい、かなり読みにくい文章になってしまいます。
もし、主題毎に文章をまとめたい場合は（段落）を利用することで、自然な折り返しを実現することができますので、目的に合わせてタグを使い分けましょう。

まとめ

今回は、初心者向けにHMTLの基本から、改行タグに絞って解説させていただきました。
HTMLは、テキストエディタがあれば簡単に実践ができるものでもありますので、本内容を見ながら是非実践してみてください。
また、デザイン性のある動的なWebページを作成するにはCSSとJavaScriptの知識も必要ですので日々学習に努めていただければと思います。

最後ではありますが、本内容が皆様にとって1つでもお役に立てていれば幸いです。
最後までお読みいただきありがとうございました。

エンジニア中途採用サイト
ラクスでは、エンジニア・デザイナーの中途採用を積極的に行っております！
ご興味ありましたら是非ご確認をお願いします。

https://career-recruit.rakus.co.jp/career_engineer/
カジュアル面談お申込みフォーム
どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。
以下フォームよりお申込みください。
rakus.hubspotpagebuilder.com
ラクスDevelopers登録フォーム

https://career-recruit.rakus.co.jp/career_engineer/form_rakusdev/
イベント情報
会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください！