ウェブランサー

HTMLで扱うヘッダー情報の解説

ヘッダー領域

HTMLのソースコードにおける「ヘッダー」とは、<head>から</head>の間に書かれる内容の事を指します。ヘッダー情報は、ブラウザで表示した時に画面に現れる訳ではありませんが、そのウェブページが何を意味するのか、どのような言語が使われているのか、と言った「メタ情報」を埋め込んだり、外部ファイルの読み込みを制御するために記述します。

HTMLを覚えたての頃は、何を書いたら良いのか分かりにくいと思いますが、初めは必要最低限の情報を記述しておけば問題ありません。理解度に応じて、必要な情報を増やしていきましょう。

なぜヘッダー情報が必要なのか

実は、ヘッダー情報を書かなくてもウェブページは表示されます。なぜなら、アクセスをリクエストしたドキュメントに書かれた情報は、ウェブブラウザがある程度自動的に解釈して表示してくれるからです。

それでも、極力ヘッダー情報は記述した方が良いとされます。ウェブドキュメントは、人間が見る時に必要な情報さえ書かれていればそれで良いという訳ではないのです。

なぜなら、ウェブページにアクセスした時、最初にその情報を読むのは人間ではなくコンピューターだからです。人間には必要ない情報でも、コンピュターが解読するために必要な情報が埋め込まれていなければ、ウェブページを正しく表示してくれる保証はありません。

人間同士でさえも、初めて会う人には、お互いが自己紹介をする事で、その人が何者なのかを判断しますよね?HTMLファイルも同様に、コンピューターが訪れてきた時に、自身が何者なのか判断出来るように、事前に工夫しておかなければならないのです。

せっかく作ったウェブページを人間の閲覧者に快適に見てもらうには、その前にコンピューターやウェブブラウザに正しく解釈してもらう必要があります。そのために、ウェブ制作者は正しいヘッダー情報を記述できるようにならなければいけないのです。

よく使うヘッダー情報

タイトル(title)

「タイトル」は、HTMLドキュメントの題名を表します。<title>から</title>の間に必要な内容を記述します。内容は2〜30文字程度が適切です。

ブラウザウィンドウの左上を見ると、<title>タグの間に書かれた文字列が表示されているのが確認できるかと思います。タイトルを記述することで、このページを見ている人に、ドキュメント全体のテーマや主題、サイトの名前を伝えることができます。まずは色々なサイトのタイトルを見て、それを参考にしながら、分かりやすいタイトルになるように工夫してみましょう。

タイトルは、そのページを代表する重要な文字列です。検索結果やブックマーク、RSSの見出しや引用する際の文字候補として、最も目立つ形で使われます。長すぎず、短すぎず、簡潔にページの内容を表す言葉として、よく考えて記述しましょう。

HTML
<title>ここにタイトルを記述します</title>

ディスクリプション(description)

「ディスクリプション(description)」は、そのページについての説明文を与えるものです。<meta>タグのname属性にdescriptionを指定し、content属性に内容を記述します。内容は120文字程度が適切です。

ヘッダーにディスクリプションを記述しておくと、検索サイトの検索結果でサイトのタイトルの下に適切な説明文を表示させる事が出来ます。また、ブックマークする際にディスクリプションに書いておいた説明も一緒に保存されるブラウザもあります。

HTML
<meta name="description" content="この部分にドキュメントについての簡単な説明文を書きます。">

キーワード(keywords)

「キーワード」は、そのページがどんな情報について書かれているかを説明する際に代表的な文字列を埋め込むために用います。 <meta>タグのname属性にkeywordsを指定し、content属性に内容を記述します。内容はキーワードごとに「,(カンマ)」で区切ります。

キーワードは必須要素ではありませんが、一般的に良く使われている情報です。ページ全体を通して、テーマの軸となるキーワードを2、3個抜き出して記述しておくと良いでしょう。

HTML
<meta name="keywords" content="キーワード,キーワード,キーワード">

文字コード

「文字コード」は、ウェブブラウザに対して、そのHTMLドキュメントで使用されている文字を形成する形式を宣言します。<meta>タグのcharset属性で指定します。日本語を使う場合には、ひとまず「UTF-8」を設定しておきましょう。

文字コードを正しく設定しないと文字化けを起こすことがあります。これは、HTMLファイルを保存する際に指定した文字コードと、ブラウザで読み込む際に表示させる文字コードが違うために、いわば間違った翻訳をしている状態です。

あなたが作ったウェブサイトを色々なデバイス、色々なブラウザで閲覧して、文字化けが起きないか確認してみてください。文字化けが発生したり、作業中にトラブルがあった場合に、改めて詳しく調べて解決を試みることで文字コードの理解を深めることができるでしょう。

HTML5
<meta charset="UTF-8">
HTML4
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

META情報とは?

さて、ここで改めて上の例を見てみると、<meta>というタグが多く使われていることに気付いたかと思います。「metaタグ」とは、文字通り画面には直接表示されない「メタ情報」をドキュメントに付与することができるタグです。上記で示したサンプル以外にも、様々な情報をドキュメントに追加することができるので、慣れてきたら他の書き方も調べていきましょう。

ヘッダーに記述可能な情報は沢山あります。例えば、<link>タグを使って外部のファイルを呼び出したり、スクリプトを実行するためのプログラムを挿入することもできます。今は「色々できるらしい」というぐらいの認識で大丈夫です。何となく大枠を理解するために先へ進みましょう。

ヘッダー情報のまとめ

HTMLのヘッダーには、画面には表示されない間接的な情報をいくつも与える事が出来るという事が分かって頂けたでしょうか。ヘッダーを書かなければウェブページが表示されないというわけではありません。始めのうちは難しく考えなくても大丈夫です。やりながら、HTMLの理解が深まると共に、ヘッダーの重要性が見えてくると思います。必要に応じて少しずつ学び、何を記述するべきかを覚えていけば良いでしょう。

最後に、上の例をまとめたソースコードを載せておきます。こちらをコピーしてサンプルとして使って下さい。

HTML
<html>
<head>
<meta charset="UTF-8">
<title>このページのタイトル/title>
<meta name="description" content="このページについての説明文を記述する。">
<meta name="keywords" content="キーワード,キーワード,キーワード">
</head>
<body>

<p>
実際に表示される部分
</p>

</body>
</html>

HTMLリファレンス

HTMLって何? 初めての方でも分かる超基礎知識を解説します
HTMLの書き方 HTMLタグの書き方と基本的なルールについて
HTMLファイルの作り方 HTMLファイルを作成してから保存するまで
改行と半角スペース HTMLで改行や半角スペースを扱う際のルール
ハイパーリンクについて ドキュメントをリンクでつないでみましょう
ヘッダー情報について HTMLドキュメントのヘッダー情報について
ディレクトリの意味 「ディレクトリ」という言葉の意味
HTMLとXHTMLの違い XHTMLでWebサイトを作る際の特徴とルール