HTMLファイルの骨組み

01 / 06

いままで書いていたのは「中身」

ここまでの演習では、見出しや段落だけを書いてきた。じつはあれは、HTMLファイル全体の一部分だったんだ。

本物のHTMLファイルには、その外側を囲む決まった形がある。

02 / 06

下がHTMLファイルまるごとの形。3つの入れ物が入れ子になっているよ。

<!DOCTYPE html><html>  <head>  </head>  <body>  </body></html>

03 / 06

<head> に書いたものは画面に出ない。ページの名前や文字の種類など、ブラウザに教える情報を置く場所だよ。

<body> に書いたものが画面に出る。これまで書いてきた見出しや段落は、全部 <body> の中身だったんだ。

<head>  <title>まなびや食堂</title></head><body>  <h1>まなびや食堂</h1></body>

04 / 06

<title> に書いた文字は、ブラウザのタブに出る名前になる。検索結果に出る見出しにもなるよ。

ページの中には表示されないので、<h1> とは別に書く必要がある。同じ文字でもいいし、変えてもいい。

<title>まなびや食堂 | おしながき</title>

05 / 06

<meta charset="utf-8"> は「この文書の文字の種類」を伝えるタグ。これが無いと日本語が文字化けすることがある。

<meta> は <img> と同じ終了タグのないタグ。<head> の中でいちばん先に書くのがならわしだよ。

<head>  <meta charset="utf-8">  <title>まなびや食堂</title></head>

06 / 06

この演習では <!DOCTYPE html> から <body> までの外わくは用意してある。中に入れるタグだけを書けばいいよ。

<title> や <meta> は画面に出ないので、プレビューには何も増えないように見える。それでもちゃんと書けているかは、下の判定で確かめられるよ。