雛形を完成させよう

head に足す 3 行

head はブラウザへの申し送り

前回、head を空のまま残しました。head は読む人ではなくブラウザに向けた説明を書く場所です。ここに3つ入れると、ページの土台が完成します。

1つ目は lang です。html タグに lang="ja" と足すと、このページは日本語だと伝わります。読み上げソフトや翻訳機能がこれを見ます。

2つ目は文字コードの指定です。文字コードとは、文字をコンピュータ用の番号に置きかえる決まりのことです。指定を書かないと日本語が読めない記号の羅列になることがあります。<meta charset="UTF-8"> の1行で防げます。

3つ目は <title> です。ブラウザのタブや検索結果に出る名前で、画面の中には出ません。

書き足して土台の完成

<html lang="ja"> <head> <meta charset="UTF-8"> <title>山田 太郎のプロフィール</title> </head>

これで第1章は終わりです。ここまでで、ブラウザが読める正しい1枚のページができました。中身はまだ名前だけですが、次の章からこの body の中に自己紹介や趣味を足していきます。土台さえきちんとしていれば、あとは中身を積むだけです。

課題

  1. html タグに lang="ja" を足す
  2. head の中に meta charset="UTF-8" を書く
  3. head の中に title を書き、ページの名前を入れる

ヒント

index.html
プレビュー

できているか

  • 日本語のページだと lang で伝えられている
  • 文字コードの指定がある
  • タブに出るページ名が付いている