HTML 入門
HTML の基礎をマスターしよう
タグの基礎知識
< と > に囲まれた <body> などをタグと呼びます．タグの多くは <body> のような開始タグと，開始タグに / を付けた </body> のような終了タグがペアで利用されます．
タグを記述するときは，必ず半角文字を使います．大文字でも小文字でも構いませんが，小文字で統一することが一般的になっています．タグに全角文字を使ったり，< body> のように < の後にスペースがあってはいけません．なお，タグの < や > といった記号をキーボードから入力する際は，日本語入力モードの [ や ]キーから漢字変換で目的の記号を探すのではなく，直接入力（英語入力）モードの Shift + , や Shift + . で入力するように心がけてください．
index.html
<!DOCTYPE html>
<html lang="ja">
<HEAD> <<<<<<------- 大文字でも構わない
<meta charset="utf-8">
＜ＴＩＴＬＥ＞Web ページ＜／ＴＩＴＬＥ＞ <<<<<<------- 全角文字は不可
</HEAD>
< body> <<<<<<------- < の後のスペースは不可
Web ページを作ってみます。
</body>
</html>
また，改行を意味する <br> や区切り線を表示する <hr>，画像を表示する <img> のように閉じタグがなく開始タグ単独で利用する要素もあります．このような要素は子ノード（つまり子要素やテキストノード）を持つことができず，空要素 (void element) と呼ばれています．
タグの包含関係
開始タグは終了タグとペアで利用されますが，タグペアの中にさらに別のタグペアを記述できます．このとき，包含関係が満たされるように注意しよう．実際上，HTML の雛形は次のように <html lang="ja"> と </html> のペアの中に，<head> ... </head> と <body> ... </body> が入る構造になっています．
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Web ページ</title>
</head>
<body>
Web ページを作ってみます。
</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>Web ページ</title>
</head>
<body>
Web ページを作ってみます。
</html>
</body>
また HTML に慣れない段階では </html> より後ろに本文の内容を記載してしまうというミスも起こりがちです．もちろんこのような記述も意図しない結果になる可能性があるので，本文は必ず <body> と </body> の間に記述することを意識しよう．
index.html（エラー）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Web ページ</title>
</head>
<body>
Web ページを作ってみます。
</body>
</html>
ここに本文を入力してはなりません。