HTML入門 - head と body の役割
HTMLを包む4つの役割
本当の HTML ファイルには最初から決まった型があります。手紙に宛名と本文の欄があるのと同じで、置く場所が決まっています。
中は2つに分かれます。head は設定を書く場所、body は画面に出す中身を書く場所です。
先頭の1行は「これは今の HTML です」という宣言です。その下の html が、ページ全体を包む一番外側の入れ物になります。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>山田 太郎</h1>
</body>
</html>
1 / 4
HTML入門 - head と body の役割
head と body の振り分け
1行ずつどちらの区画に置くか切り替えて、画面とタブの名前がどう変わるか見てください。
- 読む人に見せたいものは body、ブラウザへの申し送りは head
- title と meta は head に置く行で、画面に文字としては出ない
- h1 や p は head に置けない行。書いてもブラウザが body へ送る
2 / 4
考えてみよう外しても進めます
名前の h1 をうっかり head の中に書いてしまいました。画面はどうなりますか。
選ぶと、この枚の中で答えと理由を確かめられます。
3 / 4
HTML入門 - head と body の役割
完成したかを3か所で確かめる
見た目がほぼ同じでも、構造は書き換わっています。今回の課題と採点が見る場所を順に確認します。
ブラウザは置き場所の間違いを直して表示することがあります。見た目だけでなく、コードの入れ子も確認してください。
| 確認する場所 | 完成の目印 |
|---|---|
| ファイル全体 | 先頭が DOCTYPE で、html の中に head と body がある |
| body の中 | 名前の h1 があり、表示する中身が設定と分かれている |
| 画面の見た目 | style が無くなり、名前がブラウザ既定の黒に戻る |
4 / 4