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

　HTMLではソースコード中の改行やスペースをそのまま表示せず、要素の開始と終了を示す「タグ」で文書構造や表示方法を指定します。ここでは、テキストの改行に使う <br> タグを中心に、タグの基本的な記述ルールや HTML 文書の骨組みをサンプルとともに解説します。

１．改行を指定する <br>

1.1. <br> タグの基本

  • 改行したい位置に <br>（空要素）を記述すると、その箇所で強制的に改行されます。
  • 終了タグ </br> は不要です。

1.2. サンプルコード（lesson02-1.html）

以下は「改行サンプル」を示す HTML ファイルの一例です。タイトルには絵文字を入れてあります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>📝 改行サンプル</title>
</head>
<body>
  HTMLの改行はデフォルトで無視されます。<br>
  そのため、改行したい箇所に<br>を挿入する必要があります。<br><br>
  次のようなポイントを確認しましょう。<br>
  ・タグの基本を理解する<br>
  ・改行の方法を試す<br>
  ・ブラウザ表示で確かめる
</body>
</html>

1.3. ブラウザでの表示例

1.4 HTML構文の解説

  • <!DOCTYPE html>：文書が HTML5 であることを宣言
  • <html lang="ja">：文書のルート要素。言語を日本語（ja）に設定
  • <head>…</head>：メタ情報をまとめる領域
  • <meta charset="UTF-8">：文字エンコーディングを UTF-8 に指定
  • <title>…</title>：ブラウザのタイトルバーやタブに表示される文字列
  • <body>…</body>：画面に表示する本文を記述
  • <br>：改行を挿入する空要素

２．タグ記述のルール

2.1. タグは半角文字で記述

  • < や > を含むすべての文字は半角で記述します。

2.2. タグ名は大文字・小文字どちらも許容

  • <BR> や <br> のようにどちらの表記でもブラウザは解釈しますが、実務では小文字が一般的です。

2.3. 開始タグと終了タグ

  • 通常、要素は <要素名>…</要素名> の組み合わせで記述します。
  • 例：<p>段落</p>, <div>領域</div>

2.4. 終了タグ不要な要素

  • <br> や <meta>、<img> のように終了タグを持たない「空要素」が存在します。

３．HTML文書の基本構造

3.1. DOCTYPE宣言

  • 文書の最上部に必ず記述。HTML5では <!DOCTYPE html> と簡潔です。

3.2. html要素、head要素、body要素

<!DOCTYPE html>
<html lang="ja">
  <head>…</head>
  <body>…</body>
</html>
  • <html>：文書全体を囲む最上位要素
  • <head>：文字コードやタイトル、外部ファイルの読み込みなどを指定
  • <body>：実際にブラウザに表示する内容を記述

４．head要素の代表的なタグ

4.1. <title> タグ

  • ブラウザのタブやタイトルバーに表示される文字列を指定します。

4.2. <meta charset="…"> タグ

  • ページの文字エンコーディングを指定し、文字化けを防ぎます。
  • 一般的に UTF-8 が推奨されます。

まとめ

　ここでは、改行を実現する <br> タグを起点に、タグの記述ルールや HTML 文書の基本構造、head 要素内の主要タグを解説しました。これらを理解することで、HTML ファイルの見た目と意味を正しくブラウザに伝えられるようになります。

使用したタグ一覧

タグ説明
<!DOCTYPE html>文書が HTML5 であることを宣言
<html lang="ja">文書のルート要素。言語を日本語に設定
<head>…</head>メタ情報をまとめる領域
<meta charset="UTF-8">文字エンコーディングを UTF-8 に指定
<title>…</title>ブラウザのタイトルバーやタブに表示される文字列
<body>…</body>ブラウザに表示する本文を記述
<br>改行を挿入する空要素