雛形を完成させよう

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

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

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

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

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

書き足して土台の完成

英語の案内を作るなら、言語の属性は次のように変わります。開始タグだけを取り出した例です。

<html lang="en">

文字コードは表示する言語とは別の設定です。head に置く meta は次の1行です。

<meta charset="UTF-8">

タブの名前には、ページの用途が分かる言葉を書きます。表示中の h1 とは別に設定します。

<title>図書室の開館案内</title>

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

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