ここまでで、タグと属性——文章の“中身”を書く道具がそろいました。でもその前に、ひとつ大事なこと。じつはHTMLファイルには、中身を書き込む決まった外枠があります。「じゅんび」で一度チラッと見た、あの型です。ここでちゃんと自分のものにしておきましょう。
これが基本の型
まっさらなHTMLファイルは、いつもこの形から始まります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>しまちゃんのホームページ</title>
</head>
<body>
<h1>しまちゃん</h1>
<p>ここに中身を書いていきます。</p>
</body>
</html>パーツごとに見れば、こわくありません。
| 部分 | 役割 |
|---|---|
<!DOCTYPE html> | 「これはHTMLの書類だよ」という最初のあいさつ（1行目のおまじない） |
<html> | ページ全体を包む、いちばん外側の箱 |
<head> | 裏方の情報を書く部屋（タイトルなど。画面には出ない） |
<body> | 画面に見える中身を書く部屋 ←★ここが主役 |
2つの部屋の役割分担
大事なのは、<head> と <body> の役割のちがいです。
<head>（ヘッド）……ページの設定や裏方の情報。画面には出ません。<body>（ボディ）……実際に画面に映る中身。見出しも段落も画像も、ぜんぶここ。
これまで覚えてきた <h1> や <p>、これから出てくる画像やリンクも、すべて <body> の中に書きます。
このレッスンのまとめ
- HTMLファイルは
<html>の中に<head>と<body>を持つ <head>は裏方（画面に出ない）、<body>は表舞台（画面に出る）- 見出し・段落・画像などの中身は、すべて
<body>の中に書く