1. はじめに
とある家に入って、ある部屋にバスタブやシャワーが設置されていれば、
「ここは浴室なんだな」
と自然にわかりますよね。
同じく、ガスコンロや冷蔵庫があれば「キッチンだな」と判断できます。
私たちは現実の家では、目に見える家具や設備から「この空間は何のための部屋か？」を判断できます。
でも、Webページ（HTML）ではそうはいきません。
HTMLの世界では、
「このページにはどんな情報があるのか？」
「どういう性質のページなのか？」
といったことを、目に見える場所だけで判断するのは難しいのです。
だからこそ、見えないところで
「このページはこういう内容ですよ」
「こういう目的のページですよ」
といった“ページに関する情報”を、ちゃんと文字として記述してコンピューターへ伝える必要があります。
そのような情報を記録しておく箱が、HTMLの <head> タグです。
前回の記事では、<html> という家の「骨組み」の中に、
<body> タグで「空間」をつくり、
<head> タグで「その空間に関する情報をまとめた書類入れ」を設置しました。
これで、家としての基本的な構造はできあがってきました。
今回は、その「書類入れ」──
つまり <head> タグの中に、具体的にどんな情報を記述していけばよいのか？を見ていきましょう。
この <head> タグに入る情報は、ページの見た目には直接は関係しません。
ですが、ページのタイトルや説明、文字化け防止の設定など、Webサイトにとってとても大切なことがたくさん詰まっています。
「ちょっと地味そう…」と感じるかもしれませんが、実は <head> タグの中身をしっかり整えておくことは、サイトの信頼性や機能性を高めるうえで非常に大切です。
また、今はまだ深く触れませんが、GoogleやYahoo!などで検索したときに自分のWebサイトを検索結果の上位に表示させるための施策にも、この <head> タグの設定が関係しています。
つまり、ここにどんな情報を入れておくかで、検索結果に表示される内容や順位に大きな影響が出ることもあるのです。
「HTMLってそもそも何？」
「その“骨組み”ってどうやって作るの？」
という方は、先に以下の記事をご覧ください。（どちらも無料ご覧いただけます）
2. <head>タグに情報を入れていこう
それでは、前回作成して保存した index.html ファイルを、エディタソフトで開いてください。
開き方はもう覚えましたか？
忘れてしまったという方は、前回の記事に記載している「2-1. 作ったHTMLファイルの開き方」を参考に、もう一度確認してみてください。
開いたら、以下のようなコードが書かれていることを確認しましょう。
<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>
2-1. ページタイトルをつけよう
それでは早速、 <head> タグの中に情報を追加していきます。
どんな情報から追加しましょうか？
うーん、そうですね…。
まずはわかりやすく、ページの「タイトル」から設定してみましょう。
タイトルは <title> タグを使って指定します。
<title> </title>
このように <title> のタグの中に、「このページはこういう名前ですよ」と伝えるためのテキストを入れます。
では、実際に <title> タグを <head> の中に書いてみましょう。
<!DOCTYPE html>
<html>
<head><title></title></head>
<body></body>
</html>
これで <head> タグの中に <title> タグを入れることができました。
マトリョーシカのように、1つの箱の中にさらに小さな箱が入った状態です。
では今度はこの <title> の箱の中に、実際の中身、つまりページタイトルを入れてあげましょう。
タイトルはなんでも良いですが…
ひとまず「はじめてのホームページ」とでもしておきましょうか。
<!DOCTYPE html>
<html>
<head><title>はじめてのホームページ</title></head>
<body></body>
</html>
これでページタイトルが設定できました！！
はい、ページタイトルの設定はこれで終わりです。
次の情報の記述に移ります。
……本当にこれでページのタイトルが設定できたのでしょうか？
なんだか、あまりにもあっさり設定できてしまって少し不安ですね。
では、次の情報を記述する前に、実際にブラウザを使ってタイトルがちゃんと表示されているか確認してみましょう。
2-2. 設定したタイトルを実際に確認しよう
まずは、編集した内容を上書き保存してください。
上書き保存のやり方を忘れてしまった方は、前回の記事に戻って
「2-6. ここまでの内容を上書き保存しよう」をもう一度読んでみてください。
保存ができたら、そのHTMLファイルを保存しているフォルダ（デスクトップやドキュメントなど、自分で設定した場所）を開きましょう。
開けたら、index.html のファイルアイコンをダブルクリックしてください。
すると、Google ChromeやSafariなどのブラウザで、自動的に新しくページが開かれるはずです。
上図の赤枠部分のように、タブに「はじめてのホームページ」と表示されていれば成功です！！🎉
タブの文字が見えない！という方は、他にタブを開きすぎているかもしれません。一旦、他のタブを全部閉じてから、もう一度 index.html のファイルアイコンをダブルクリックしてみてください。
今後も、エディタソフトで記述したコードが実際のWebページでどんな表示になるのか確認する時は、同じ手順でブラウザを開いて確認していきます。
①ここまで編集した内容を上書き保存
②index.htmlを保存している場所を開く
③index.htmlのファイルアイコンをダブルクリック
この3つの手順を忘れないよう覚えておいてくださいね！
2-3. 「meta情報」とは？
無事にページタイトルが設定できたところで、次はその <head> タグの中に、さらに他の情報も追加していきましょう。
ページタイトルの次に重要になってくるのが「meta（メタ）情報」というものです。
「meta」とは「そのページに関する補足情報」を意味します。
たとえば、
「このページは何について書かれたページなのか？」
「どんなルールの文字で書かれているのか？」
といったことを、ブラウザや検索エンジン（Google、Yahoo!など）に伝えるための情報です。
裏側でしっかりと働いてくれる、縁の下の力持ち。
サイトの表には出てきませんが、とても大事な存在なんです。
meta情報を記述するには、以下のような<meta>タグを使います。
<meta>
……おや？何かが足りない気がします。なんでしょう？
ここで、htmlタグの基本をもう一度思い出してみてください。
htmlタグは、開きタグと閉じタグの2つで1組で構成されている、と覚えているかと思います。
・<html> </html>
・<head> </head>
・<body> </body>
・<title> </title>
今まで出てきたhtmlタグは、全てこのルールに則ってきちんと箱のフタと箱の底がありました。
では、metaタグもそのルールに則って<meta> </meta>と表記すべきではないでしょうか？
実は、metaタグには他の多くのタグと違って「フタと底（開始タグと終了タグ）」がありません。
<meta>
これだけで1つのタグとして完結しています。
要するに、閉じタグをつけなくても、これだけで箱のフタと底の両方の要素を持ち合わせている、というイメージです。
このような閉じタグを必要としないタグのことを「空要素（くうようそ）」と呼びます。
metaタグのような空要素は他にもいくつか存在しますが、現段階ではまだ意識しなくても大丈夫です。
今はひとまず、
・通常のHTMLタグは、「開きタグ」と「閉じタグ」のセットで使う（＝箱のフタと底）
・metaタグは「空要素（くうようそ）」と呼ばれる例外（＝フタと底が1つになった特別な箱）
とおぼえておきましょう。
2-4. metaで文字コードを設定しよう
縺ｾ縺壹?譁?ｭ励さ繝ｼ繝峨?險ｭ螳壹°繧牙ｧ九ａ縺ｦ縺?″縺ｾ縺励ｇ縺
縺ｩ縺ｮ繧医≧縺ｫ險ｭ螳壹☆繧九°縺ｯ縺薙?蠕後♀莨昴∴縺励∪縺
……おっと、失礼しました。
何やら意味不明な文字が出てきてしまいましたね。
気を取り直して、ここからは実際に<meta>タグを使ってmeta情報を追加していきましょう。
最初に追加するmeta情報は、「このページはどんな文字のルールで書かれているか？」という情報です。
この情報を記述しなければ、先ほどのようにうっかり意味不明な文字が出力される──つまり、「文字化け」してしまう可能性があります。
Webページというのは、「このページではどんな文字のルールを使っていますよ」という情報を、きちんと宣言しておく必要があります。
たとえば、日本語で手紙を書いて、その手紙をボトルに入れて海に流したとしましょう。
名前も知らないような遠い異国の地で誰かがそのボトルを拾い、中に入っていた手紙を取り出して読もうとします。しかし言葉がわかりません。
そこで、その人は、辞書を使って文章の解読を試みることにしました。
ちょうど手元に、中国語の辞書がありました。
なんとなく書いてある文字の形も似ているように見えるので、きちんと手紙を解読できるはずです！
……そんなわけがありませんね。
日本語で書かれた手紙を、中国語の辞書を使って解読するのは不可能です。
同じ漢字が使われていたとしても、単語の意味が違ったり文法ルールも異なります。
正確に解読してもらうためには、最初に「この手紙は"日本語"のルールに従って書かれています」ということを伝えてあげなければなりません。
Webサイト制作においても、そのページに書かれている文字や文章のルール、つまり「文字コード」を事前に宣言しておいてあげる必要がある、というわけです。
現在最も一般的なのは「UTF-8（ユーティーエフ エイト）」という文字コードです。
他にも色んな種類の文字コードがありますが、今は「文字コードは必ず"UTF-8"で設定しておく」と覚えておいて差し支えないでしょう。
では、この文字コードの設定情報を<meta>タグに記述します。
<meta>
先述した通り、<meta>タグは空要素なので、フタと底が分かれていません。
どのように箱に情報を入れてあげたらいいのでしょうか？
空要素の場合は、タグそのものに"属性"というものをつける形で情報を追加します。
たとえると、箱の中に情報を入れるのではなく、箱の外側にラベルを貼り付けるような感じでしょうか。
文字コードの設定の場合は、以下のようなラベル（属性）を貼ってあげます。
charset="UTF-8"
これをhtmlコードにすると、こんな感じです。
<meta charset="UTF-8">
この「charset（チャーセット）」という文字列は「character set」の略、
つまり「文字（character）集合（set）」という意味です。
「どんな文字が、どのように並べられているか」を定義した
“文字の集合”や“文字体系”のことを指します。
要するに、
文字体系="UTF-8"
という内容のラベルを貼っているわけです。
空要素の場合は、このように < と >の内側に文字列を記述する形で、属性（＝箱に貼るラベル）を追加していきます。
では、この文字体系についてのラベルを貼った<meta>の箱も<head>の箱の中に入れてあげましょう。
コードで書くとこうなります。
<!DOCTYPE html>
<html>
<head><title>はじめてのホームページ</title><meta charset="UTF-8"></head>
<body></body>
</html>
3行目が長くなって少し見づらくなってしまいましたね…。
改行とインデント（字下げ）を使って、もう少し見やすくしましょうか。
<!DOCTYPE html>
<html>
<head>
<title>はじめてのホームページ</title>
<meta charset="UTF-8">
</head>
<body></body>
</html>
これで最初の<meta>タグで文字コードの設定ができました！
2-5. metaでディスクリプションを設定しよう
次に設定するのは、「このページはどんなページなのか？」という説明文です。
これは、Googleなどの検索エンジンで検索したときに、検索結果の下に表示される“ちょっとした紹介文”として使われます。
(c)Google
上図でいうと、「HTMLまたはHyperText Markup Language…」という文章の部分が、今回設定する説明文の箇所にあたります。
……というわけで、この説明文も <meta> タグを使って設定していきます。
説明文の内容はシンプルに「これははじめて作ったホームページです。」などでいいでしょう。
空要素での属性の設定の仕方は、文字コードの設定の時に覚えましたね。
今回は説明文の設定なので、「description（ディスクリプション）」という属性を指定してあげます。
文字コードの設定は「charset="UTF-8"」という書き方だったので…
今回は恐らくこうでしょう。
<meta description="これははじめて作ったホームページです。">
……と思いきや、これは不正解！！
実は、「description」の場合は以下のような書き方をする必要があります。
<meta name="description" content="これははじめて作ったホームページです。">
なんだか長ったらしくなってしまいました。なぜでしょう！？
ひとまず、このコードを整理してみましょう。
name="description"
content="これははじめて作ったホームページです。"
まずは「name」という部分で、今から何の情報を設定するか、ということを指示しています。
今回だと、Webページの説明文（description）を設定したいので、
今から設定する情報（name） ＝ "説明文（description）"
という意味でこの書き方になっています。
次に、「content」の部分で「その情報の内容は何か？」というのを指定しています。
情報の内容（content） ＝ "これははじめて作ったホームページです。"
という意味になっているわけです。
そんな回りくどい書き方をしなくても、charsetのときのように
説明文（description）＝ "これははじめて作ったホームページです"
と直接指定すればいいのに…と思ってしまいますが、
実はcharsetの書き方の方が例外にあたります。
<meta>タグは、descriptionのように
name="◯◯"
content="◯◯"
という形式で書く方が基本なんです。
<meta name="keywords" content="HTML, CSS, Web制作">
<meta name="author" content="作者名">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
今はまだ覚える必要はありませんが、上記のコードはdescription以外の<meta>タグの属性の例です。
全て「name」と「content」を指定する書き方になっています。
「情報＝内容」のように直接指定する形は、むしろcharsetだけなんです。
厳密には他にもありますが、他の例はかなり特殊なコードなので、現段階では
・すべてのmetaは"name"と"content"を指定して記述する
・ただし、charsetだけは唯一の例外
と覚えてしまってOKです。
それでは、最後にこのdescriptionを設定した<meta>タグも、<head>タグの中に入れてあげましょう。
<!DOCTYPE html>
<html>
<head>
<title>はじめてのホームページ</title>
<meta charset="UTF-8">
<meta name="description" content="これははじめて作ったホームページです。">
</head>
<body></body>
</html>
<head>タグの中には他にも色んな設定を詰め込むことが出来ますが、今回はこのへんにしておきましょう。
上書き保存を忘れずに！
3. まとめ
今回の記事では、以下のような内容を学びました。
・<head> タグの中には「見えないけれど大事な情報」を書く
・ページのタイトルは <title> タグで設定する
・<meta>タグは「空要素」と呼ばれる、閉じタグのないタグ
・文字化けを防ぐために <meta charset="UTF-8"> を記述する
・ページの説明文（description）を設定しておくと検索エンジンに役立つ
・<meta> タグは基本的に「name="◯◯"」「content="◯◯"」という形式で属性を指定する（※charsetは例外）
今回は、実際に画面上に表示されるものを構築するのではなく、裏側の設定がメインの内容だったので、少し退屈だったかもしれませんね。
では、<head> タグの設定は一旦ここで区切りにして、次回からは <body> の中に「見える中身」を書いていく方法を解説していきましょう！
ここからは実際に「Webページを作っている！」という実感も強くなってくるはずです。
それでは、今回も読んでくださりありがとうございました。
次回もお楽しみに！
