6日でできる新HTML入門｜タグの基本と改行

タグの役割を知れば、HTMLの文章はもっと分かりやすく、思い通りにブラウザへ伝えられます。

HTMLは、Webページの文章や構造をブラウザに伝えるための言語です。文章を書くだけでWebページが完成するわけではなく、どこが文書全体なのか、どこがページ設定なのか、どこが画面に表示される本文なのかを、タグを使って示していきます。

HTMLを学び始めたときに、特につまずきやすいのが改行の扱いです。HTMLファイルの中で文章を改行して書いても、ブラウザではその改行がそのまま表示されない場合があります。これは、HTMLがソースコード上の見た目ではなく、タグによって文書の構造や表示の意味を判断しているためです。

ここでは、改行を指定する を中心に、タグの基本的な書き方、開始タグと終了タグ、終了タグを持たない空要素、HTML文書の基本構造、head要素で使う代表的なタグについて、サンプルHTMLを使いながらやさしく解説していきます。

HTMLではソースコードの改行がそのまま表示されるとは限らない

HTMLファイルを作成するとき、見やすくするために文章を複数行に分けて書くことがあります。しかし、HTMLではソースコード内の改行や連続したスペースが、ブラウザ上でそのまま反映されるとは限りません。

たとえば、HTMLファイルの中で文章を3行に分けて書いたとしても、ブラウザでは1行につながって表示されることがあります。これはブラウザが、ソースコードの見た目よりも、HTMLタグによって指定された意味や構造を優先して表示するためです。

そのため、ブラウザ上で明確に行を変えたい場合は、改行を指定するためのタグを書く必要があります。その代表的なタグが です。

図1：HTMLソースとブラウザ表示の違い

この図から分かること

HTMLでは、ソースコード上で文章を改行しても、ブラウザ上の表示にそのまま反映されるとは限りません。ブラウザに「ここで改行して表示してほしい」と伝えるには、 のようなタグを使って明示する必要があります。

つまり、HTMLでは人間が見やすいように書いた改行と、ブラウザに表示させるための改行は別のものとして考えることが大切です。

改行を指定する の基本

は、HTMLで文章の途中に改行を入れるためのタグです。改行したい位置に を書くと、ブラウザはその場所で行を変えて表示します。

たとえば、短い案内文を数行に分けたい場合や、住所のように行ごとに意味を分けたい場合に便利です。

は、文章の途中で強制的に改行したいときに使います。段落を作るためのタグではなく、あくまで行を変えるためのタグです。そのため、文章全体のまとまりを表したい場合は、今後学ぶ段落用のタグを使うほうが自然です。

は便利ですが、見た目の余白を作るために何度も続けて使うものではありません。余白や配置などの見た目の調整は、CSSに関する記事以降で解説する内容です。ここでは、まずHTMLだけで改行の仕組みを理解していきましょう。

は終了タグを書かない空要素

HTMLの多くのタグは、開始タグと終了タグを組み合わせて使います。開始タグで要素の始まりを示し、終了タグで要素の終わりを示します。

たとえば、title要素は、開始タグの <title> と終了タグの </title> でページタイトルの文字を囲みます。

一方、 は終了タグを必要としません。 は、タグそのものが「ここで改行する」という意味を持っているため、文章や別の要素を囲む必要がありません。

このように、終了タグを持たず、単独で役割を持つ要素を空要素と呼びます。 のほかに、<meta> や <img> なども空要素として扱われます。

種類	書き方の考え方	例
開始タグと終了タグを使う要素	内容をタグで囲む	<title>ページタイトル</title>
空要素	タグ単体で役割を持つ	<br>
空要素	設定情報などを単独で指定する	<meta charset="UTF-8">

に のような終了タグを書く必要はありません。HTMLを書き始めたばかりのころは、すべてのタグに終了タグが必要だと思いやすいですが、タグによって書き方が異なることを覚えておきましょう。

を使ったHTMLファイルの例

ここでは、 を使って改行を入れるHTMLファイルを作成してみます。内容は、HTML学習のチェックメモをブラウザに表示するシンプルなページです。

ファイル名： Lesson2-1.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>改行の練習ページ</title>
</head>
<body>
  今日のHTML学習メモ<br>
  タグはブラウザに文書の意味を伝えるために使います。<br>
  改行したい場所にはbrタグを記述します。<br><br>
  確認するポイント<br>
  ・HTMLファイルを作成する<br>
  ・brタグで改行を入れる<br>
  ・ブラウザで表示を確認する
</body>
</html>

このHTMLでは、body要素の中に文章を書き、改行したい位置に を入れています。1つの で1回改行されます。また、 のように2つ続けて書くと、1行分空いたような表示になります。

ただし、 をたくさん使って余白を作る書き方は、HTMLの使い方としてはあまり望ましくありません。ここでは改行の働きを分かりやすく確認するために使用しています。見た目の余白調整はCSSで行う内容なので、後の記事で扱うと考えてください。

ブラウザの表示例

ブラウザ上では、 という文字そのものは表示されません。 は画面に見せる文字ではなく、ブラウザへ改行を指示するためのタグだからです。

このように、HTMLでは「表示したい文字」と「ブラウザに意味を伝えるタグ」を組み合わせてページを作成します。タグの役割を理解すると、なぜブラウザでそのように表示されるのかが分かりやすくなります。

HTML構文の基本を確認する

先ほどのサンプルHTMLには、HTML文書を作るための基本的な構造が含まれています。それぞれの役割を順番に見ていきましょう。

記述	役割
<!DOCTYPE html>	この文書がHTML5で書かれていることをブラウザに伝える
<html lang="ja">	HTML文書全体を囲む要素。lang="ja"で日本語のページであることを示す
<head>	ページの設定情報をまとめる領域
<meta charset="UTF-8">	文字コードをUTF-8に指定し、日本語の文字化けを防ぐ
<title>	ブラウザのタブやタイトルバーに表示されるページタイトルを指定する
<body>	ブラウザ画面に表示する本文を記述する領域
<br>	文章の途中で改行を入れる空要素

HTML文書は、ただ本文を書くだけではなく、文書の種類、言語、文字コード、ページタイトル、画面に表示する内容を整理して記述します。最初は決まりごとが多く感じるかもしれませんが、この基本形は多くのHTMLファイルで共通して使われます。

タグは半角文字で書く

HTMLタグを書くときは、記号や英数字を半角で入力します。特に、< と > はタグを表すために欠かせない記号です。

全角の＜や＞を使ってしまうと、ブラウザはHTMLタグとして認識できません。その場合、タグとして動作せず、画面にそのまま文字として表示されたり、思った通りに改行されなかったりします。

HTMLを書いていて表示がうまくいかないときは、まずタグの記号が半角になっているか確認してみましょう。日本語入力を使っていると、見た目が似ている全角記号が混ざってしまうことがあります。

確認するポイント	内容
記号	< と > は半角で書く
タグ名	br、html、head、bodyなどは半角英字で書く
属性	lang="ja" や charset="UTF-8" も半角で書く
入力ミス	全角記号が混ざるとタグとして認識されないことがある

タグが正しく動かない場合、内容そのものが間違っているのではなく、全角と半角の違いが原因になっていることもあります。

タグ名は小文字でそろえる

HTMLでは、タグ名を大文字で書いてもブラウザが解釈できる場合があります。たとえば、 のように書いても改行として処理されることがあります。

しかし、現在のWeb制作では、タグ名は小文字で書くのが一般的です。 、<html>、<head>、<body> のように小文字で統一すると、HTML全体が読みやすくなります。

特に学習段階では、書き方を統一することが大切です。大文字と小文字が混ざっていると、自分で見直すときにも読みにくくなります。ほかの人がコードを確認するときにも、小文字で統一されているほうが分かりやすくなります。

書き方	説明
<br>	小文字で統一された一般的な書き方
<BR>	ブラウザが解釈できる場合はあるが、現在の学習では小文字がおすすめ
<Body>	大文字と小文字が混ざるため、読みやすさの面では避けたい

HTMLを学ぶときは、まず小文字で書く習慣を身につけておくと安心です。

図2：タグを書くときの基本ルール

この図から分かること

HTMLタグを書くときは、半角文字を使うことが基本です。また、タグ名は小文字でそろえると、HTML全体が読みやすくなります。

さらに、多くの要素は開始タグと終了タグを使って内容を囲みますが、 のように終了タグを持たない空要素もあります。タグごとの書き方を確認しながら記述すると、ミスを減らしやすくなります。

開始タグと終了タグの役割

HTMLの多くの要素は、開始タグと終了タグで内容を囲んで使います。開始タグは要素の始まりを示し、終了タグは要素の終わりを示します。

たとえば、title要素では、<title> が開始タグ、</title> が終了タグです。その間に書いた文字が、ページタイトルとして扱われます。

終了タグには、タグ名の前に / が付きます。この / があることで、ブラウザは「ここでこの要素が終わる」と判断できます。

要素	開始タグ	終了タグ	役割
html要素	<html>	</html>	HTML文書全体を囲む
head要素	<head>	</head>	ページの設定情報を囲む
title要素	<title>	</title>	ページタイトルを囲む
body要素	<body>	</body>	画面に表示する本文を囲む

開始タグと終了タグの組み合わせを正しく書くことで、ブラウザは文書の構造を理解しやすくなります。どこからどこまでがhead要素なのか、どこからどこまでがbody要素なのかが明確になるためです。

終了タグが不要なタグもある

すべてのタグに終了タグが必要なわけではありません。 のように、単独で機能するタグもあります。

は、文章を囲むためのタグではなく、その場所で改行するためのタグです。そのため、開始タグと終了タグのセットではなく、 だけで使います。

同じように、<meta charset="UTF-8"> も単独で使うタグです。これは文字コードを指定するためのタグで、head要素の中に記述します。

タグ	終了タグ	説明
<br>	不要	改行を入れる
<meta charset="UTF-8">	不要	文字コードを指定する
<img>	不要	画像を表示する

空要素は、内容を囲む必要がないため終了タグを書きません。タグを書くときは、そのタグが内容を囲むタイプなのか、単独で働くタイプなのかを意識すると分かりやすくなります。

HTML文書の基本構造

HTML文書には、基本となる骨組みがあります。どのようなページを作る場合でも、最初にこの構造を理解しておくと、HTMLファイル全体の流れが見えやすくなります。

HTML文書は、大きく見ると次のような構成になっています。

部分	役割
<!DOCTYPE html>	HTML5の文書であることを宣言する
html要素	HTML文書全体を囲む
head要素	ページの設定情報を書く
body要素	ブラウザに表示する内容を書く

<!DOCTYPE html> は、HTMLファイルの一番上に書きます。これはタグではなく、文書がHTML5であることをブラウザに伝える宣言です。

html要素は、HTML文書全体を囲む最上位の要素です。html要素の中には、head要素とbody要素が入ります。

head要素には、文字コードやページタイトルなど、ページそのものに関する設定を書きます。head要素の中に書いた内容の多くは、本文として画面に直接表示されません。

body要素には、ユーザーがブラウザで見る内容を書きます。文章や画像、リンクなど、画面に表示する内容は基本的にbody要素の中に記述します。

図3：HTML文書の基本構造

この図から分かること

HTML文書は、ただ文章を並べるのではなく、決まった構造に沿って作成します。最初にDOCTYPE宣言を書き、その下にhtml要素を配置します。html要素の中には、ページ設定を書くhead要素と、画面に表示する内容を書くbody要素があります。

は、body要素の中で本文を改行したいときに使います。HTML文書全体の構造を理解しておくと、タグをどこに書けばよいか判断しやすくなります。

head要素に書く代表的なタグ

head要素は、ページの設定情報を書く場所です。ここでは、HTMLの基本として特に重要な <meta charset="UTF-8"> と <title> を確認します。

<meta charset="UTF-8">で文字コードを指定する

日本語を含むHTMLファイルでは、文字コードの指定が正しくないと、文字化けが起きることがあります。文字化けとは、日本語が意味の分からない記号や文字列に置き換わって表示されてしまう状態です。

UTF-8は、現在のWeb制作で広く使われている文字コードです。日本語を含むページを作成するときにも扱いやすいため、HTMLファイルでは基本的に <meta charset="UTF-8"> をhead要素内に書きます。

<title>でページタイトルを指定する

<title> は、ページのタイトルを指定するタグです。ここに書いた文字は、ブラウザのタブやタイトルバーに表示されます。

たとえば、学習用のページなら「改行の練習ページ」のように、ページの内容が分かる名前を付けるとよいです。title要素の内容は、ユーザーが複数のタブを開いているときにもページを見分ける手がかりになります。

ただし、title要素に書いた文字は、通常の本文としてページ内に大きく表示されるわけではありません。ブラウザの画面内に表示したい文章は、body要素の中に記述します。

body要素に表示内容を書く

body要素は、ユーザーがブラウザで実際に見る内容を書く場所です。サンプルHTMLでは、body要素の中に学習メモの文章を書き、その途中に を入れて改行しています。

body要素の中に書かれた文字は、ブラウザ画面に表示されます。一方、 は文字として表示されるのではなく、改行として働きます。

HTMLでは、同じbody要素の中でも、表示したい文字と、表示を指示するタグが一緒に書かれます。最初は少し不思議に感じるかもしれませんが、タグはブラウザへの合図だと考えると分かりやすくなります。

を使う場面と注意点

は、行を変えたい場所にすぐ入れられる便利なタグです。特に、短い案内文や住所、詩のように、行ごとの区切りに意味がある場合に向いています。

たとえば、住所では都道府県、市区町村、番地、建物名を行ごとに分けて表示したいことがあります。このような場合、 を使うと自然に改行できます。

一方で、長い文章を読みやすくするために何度も を入れる方法は、あまりおすすめできません。文章のまとまりを表したい場合は、段落として構造を作るタグを使うほうが適しています。

また、ページの余白を広げたい、文字の位置を調整したい、デザインを整えたいといった目的で を大量に使うのも避けたい書き方です。見た目の調整はHTMLではなくCSSの役割です。CSSについては、CSSに関する記事以降で解説します。

使用したタグ一覧

タグ	説明
<!DOCTYPE html>	HTML5の文書であることを宣言する
<html lang="ja">	HTML文書全体を囲み、ページの主な言語が日本語であることを示す
<head>	文字コードやタイトルなど、ページの設定情報をまとめる
<meta charset="UTF-8">	文字コードをUTF-8に指定し、文字化けを防ぐ
<title>	ブラウザのタブやタイトルバーに表示されるページタイトルを指定する
<body>	ブラウザ画面に表示する本文を記述する
<br>	文章の途中で改行を入れる空要素

6日でできる新HTML入門｜タグの基本と改行