HTMLファイルの基本構造（DOCTYPE・head・body）

ここまでは <h1> を1行だけ書きました。でも本物のHTMLファイルには、じつは決まった型（テンプレート）があります。「タグをどこに書けばいいの？」——その答えが、ここでスッキリします。

これが基本の型

どんなHTMLファイルも、だいたいこの形から始まります。丸暗記しなくて大丈夫。まずは「こういう外枠があるんだ」と眺めてください。

<!DOCTYPE html>
<html>
  <head>
    <title>わたしのページ</title>
  </head>
  <body>
    <h1>はじめてのページ</h1>
    <p>ここに本文を書きます。</p>
  </body>
</html>

いっぱいタグがありますが、役割ごとに見ればかんたんです。

タグ	役割
`<!DOCTYPE html>`	「これはHTMLの書類だよ」という最初のあいさつ（おまじないとして必ず1行目に）
`<html>`	ページ全体を包む、いちばん外側の箱
`<head>`	裏方の情報を書く場所（ページのタイトルなど。画面には出ない）
`<body>`	画面に見える中身を書く場所 ←★ここが主役

ここが今日いちばん大事なところ。見出し <h1>、段落 <p>、そして <div> のような「画面に見せたいもの」は、すべて <body> の中に書きます。

<body>
  <h1>大きな見出し</h1>
  <p>ふつうの文章。</p>
  <div>ひとかたまりのブロック。</div>
</body>

「<div> ってどこに書くの？」の答えは、<body> の中。逆に言うと、<head> の中に見出しを書いても画面には出てきません。見せたいものはbody、裏方の情報はhead——この住み分けさえつかめば、もう書く場所に迷いません。