正しいHTMLの形

head と body の役割

HTML には決まった型がある

ここまでは1行だけだったので、タグを置くだけで表示できました。でも本当の HTML ファイルには、最初から決まった型があります。手紙に宛名と本文の欄があるのと同じで、置く場所が決まっています。

<!DOCTYPE html> <html> <head> </head> <body> <h1>山田 太郎</h1> </body> </html>

1行目の <!DOCTYPE html> は「これは今の HTML です」という宣言で、必ず先頭に書きます。<html> はページ全体を包む一番外側の入れ物です。

その中は2つに分かれます。<head> はページの設定をブラウザに申し送る場所で、画面に中身を出す場所ではありません。<body> は画面に出す中身を書く場所です。名前の見出しは読む人に見せたいものなので body の中に入ります。なお h1 や p は head に置けない要素なので、うっかり head に書いてもブラウザが body へ送り、画面にはそのまま出てしまいます。見た目では気づけないぶん、置き場所は自分で意識して分けてください。

style は今回でいったん外す

前回書いた <style> のかたまりは、今回で消してください。CSS は次のコースで style.css という専用ファイルに分けて書き直すので、その準備としてここで HTML を素の状態に戻します。色が黒に戻れば正しく外せています。

書き直したあとも画面に出る文字は名前だけです。見た目が変わらなくても、中身はきちんとした1枚のページになっています。

課題

  1. DOCTYPE 宣言から始まる html・head・body の形に書き直す
  2. 名前の h1 は body の中に置く
  3. 前回書いた style のかたまりを削除する

ヒント

index.html
プレビュー

できているか

  • 名前の見出しが body の中にある
  • 見出しの名前がそのまま残っている
  • style のかたまりを外して、文字の色が元に戻っている