HTMLの骨組みを1行ずつ読む — 最初のファイルに何を書くか

エディタで空のファイルを開いたものの、1文字目が打てない。学び始めのころ、わたしもそうでした。入門書の最初に出てくる「型」をとりあえずコピペしたけれど、あの数行が何をしているのかは分からないまま——という状態は、けっこう長く続きます。この記事では、その型を1行ずつほどいていきます。読むだけでなく、途中のデモを実際に書き換えながら進んでみてください。

1. いちばん小さいHTML

先に結論を言うと、ブラウザに文章を表示するだけなら、たった2行でも動きます。HTMLは「ここは見出し」「ここは段落」と、文章に名札を付けていく言語です。その名札のことをタグと呼びます。

h1 は「大見出し」、p は「段落」という意味です。同じ文字を打っても、どのタグで囲むかによって、ブラウザの見せ方が変わります。太さや大きさを自分で指定していないのに見出しが大きく表示されるのは、ブラウザが最初からそういう見せ方を持っているためです。

2. タグは「入れ子」になる

タグは、中に別のタグを入れられます。箱の中に箱を入れるイメージです。この「入れ子」の関係が、あとでCSSを当てるときの土台になります。開いたタグは、内側から順に閉じるのがルールです。

3. 本物のHTMLファイルの「型」

ここまでのデモは、説明のために中身だけを抜き出したものでした。実際に自分のパソコンで index.html というファイルを作るときは、次の形から始めます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>はじめてのページ</title>
</head>
<body>
  <h1>はじめてのHTML</h1>
  <p>この文章は、書き換えられます。</p>
</body>
</html>

1行ずつ、何をしているかを見ていきます。

• DOCTYPE html … 「これはHTMLで書かれた文書です」という宣言。必ず1行目に書きます
• html lang="ja" … このページ全体を包む、いちばん外側の箱。日本語のページであることを伝えます
• head … 画面には出ない情報を入れる場所。ページの設定を書く控え室のようなものです
• meta charset="UTF-8" … 文字の種類の指定。これが抜けると日本語が文字化けすることがあります
• meta name="viewport" … スマホで見たときに、勝手に縮小されないようにする指定
• title … ブラウザのタブに出る名前。検索結果の見出しにもなります
• body … 画面に表示される中身を入れる場所。ここまでのデモで書いてきたのは、全部この中身です

つまり、head は「ページの設定」、body は「ページの中身」です。文章を書き足したいのにブラウザに何も出てこないときは、body の外に書いてしまっていないかを疑ってみてください。

4. つまずきやすいのは「閉じ忘れ」

書き始めのつまずきで、いちばん多いのが閉じタグの書き忘れです。やっかいなのは、エラーが出ずに「なんとなく表示される」ところ。閉じ忘れた影響は、その後ろの文章にまで広がります。

他にも、書き始めの時期に出会いやすいものを挙げておきます。

• 全角のスペースや記号が紛れ込んでいる（見た目がほぼ同じなので気づきにくい）
• ファイル名が index.html.txt になっている（拡張子が二重になり、ブラウザで開けない）
• タグのつづり違い（<p> を <P> と書いても動きますが、小文字で統一するのが一般的です）

まとめ

• HTMLは、文章に「これは見出し」「これは段落」と名札を付けていく言語
• タグは入れ子にできる。開いたら、内側から順に閉じる
• head はページの設定、body はページの中身

骨組みが書けるようになったら、次は見た目を変えるCSSです。ただ、CSSは「書いたのに効かない」でつまずきやすいところでもあります。先に確認の手順を知っておくと、詰まる時間がぐっと短くなります。