ここまでで、タグと属性——文章の“中身”を書く道具がそろいました。でもその前に、ひとつ大事なこと。じつは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> | 画面に見える中身を書く部屋 ←★ここが主役 |
lang=“ja”は「日本語のページです」の宣言
<html lang="ja"> の lang="ja" は、前回学んだ属性です。「このページは日本語（ja＝japanese）で書かれています」という宣言で、ブラウザや読み上げソフト、検索エンジンへの申し送りになります。英語のページなら lang="en"。日本語のページを作るなら、ja と書いておきましょう。
字下げで「入れ子」を見やすく
基本の型をよく見ると、<head> や <h1> の行が少し右にずれて書かれています。これはインデント（字下げ）といって、「このタグは、どのタグの中に入っているか」を見た目でわかるようにする書き方です。
<head>と<body>は、<html>の中 → 一段さげる<title>や<h1>は、さらにその中 → もう一段さげる
字下げしなくても表示は同じです。でも、箱の中に箱が入る入れ子の形が一目でわかるので、閉じタグの書き忘れにもすぐ気づけます。VSCodeなら改行するたびに自動でそろえてくれるので、その形をくずさずに書いていけば大丈夫です。
2つの部屋の役割分担
大事なのは、<head> と <body> の役割のちがいです。
<head>（ヘッド）……ページの設定や裏方の情報。画面には出ません。<body>（ボディ）……実際に画面に映る中身。見出しも段落も画像も、ぜんぶここ。
これまで覚えてきた <h1> や <p>、これから出てくる画像やリンクも、すべて <body> の中に書きます。
このレッスンのまとめ
- HTMLファイルは
<html>の中に<head>と<body>を持つ <head>は裏方（画面に出ない）、<body>は表舞台（画面に出る）- 見出し・段落・画像などの中身は、すべて
<body>の中に書く lang="ja"で「日本語のページ」だと宣言し、字下げで入れ子を見やすく