HTML の基礎

タグの基礎知識

< と > に囲まれた <body> などをタグと呼びます．タグの多くは <body> のような開始タグと，開始タグに / を付けた </body> のような終了タグがペアで利用されます．

タグを記述するときは，必ず半角文字を使います．大文字でも小文字でも構いませんが，小文字で統一することが一般的になっています．タグに全角文字を使ったり，< body> のように < の後にスペースがあってはいけません．なお，タグの < や > といった記号をキーボードから入力する際は，日本語入力モードの [ や ]キーから漢字変換で目的の記号を探すのではなく，直接入力（英語入力）モードの Shift + , や Shift + . で入力するように心がけてください．

index.html
<!DOCTYPE html>
<html lang="ja">
<HEAD>     <<<<<<------- 大文字でも構わない
  <meta charset="utf-8">
  ＜ＴＩＴＬＥ＞ホームページ＜／ＴＩＴＬＥ＞   <<<<<<------- 全角文字は不可
</HEAD>
< body>   <<<<<<------- < の後のスペースは不可
  ホームページを作ってみます。
</body>
</html>

また，改行を意味する <br> や区切り線を表示する <hr>，画像を表示する <img> のように閉じタグがなく単独で利用する要素もあります．このような要素は空要素と呼ばれています．

タグの包含関係

開始タグは終了タグとペアで利用されますが，タグペアの中にさらに別のタグペアを記述することができます．このとき，包含関係が満たされるように注意しよう．例えば，次のコードのように <html lang="ja"> と </html> のペアの中に，<head> ... </head> と <body> ... </body> のように記述することができます．

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>ホームページ</title>
</head>
<body>
  ホームページを作ってみます。
</body>
</html>

タグの包含関係は次の図を参照して理解すると良いでしょう．繰り返しになりますが，<html lang="ja"> と </html> のペアの中に，<head> ... </head> と <body> ... </body> が配置されることに注意してください．

しかしながら，次のような例では，</body> が </html> の外に記述され，タグの包含関係が崩れています．このような記述では意図しない結果になる可能性があります．

index.html（エラー）
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>ホームページ</title>
</head>
<body>
  ホームページを作ってみます。
</html>
</body>

また HTML に慣れない段階では </html> より後ろに本文の内容を記載してしまうというミスも起こりがちです．もちろんこのような記述も意図しない結果になる可能性があるので，本文は必ず <body> と </body> の間に記述することを意識しよう．

index.html（エラー）
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>ホームページ</title>
</head>
<body>
  ホームページを作ってみます。
</body>
</html>
ここに本文を入力してはなりません。

« 戻る次へ »

目次

HTML の基礎

タグの基礎知識

タグの包含関係