HTMLで扱うヘッダー情報について詳しく解説

ヘッダーはブラウザのために用意する事前情報

HTMLのソースコードにおける「ヘッダー」とは、<head>の開始から終了の間に書かれる内容の事を指します。ヘッダー情報は、画面に直接映し出されるわけではありませんが、ブラウザが<body>に書かれた内容を正しく解読し、表示するために必用なものです。

基本的には、そのウェブページが何を意味するのか、どのような言語が使われているのか、と言った「メタ情報」を埋め込んだり、外部ファイルの読み込みを制御するために記述します。メタ情報は、実態のある物事に対して認識や解釈を補う概念です。例えば、数字の羅列を示して、それが日付けなのか、時間なのか、通貨を表すのかは、メタ情報によって定義されます。

HTMLを覚えたての頃は、何を書いたら良いのか分かりにくいと思いますが、最初のうちは必要最低限の内容を記述しておけば問題ありません。理解が進んでくれば、自ずと不足している部分が見えてくるはずです。

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

実はヘッダーを書かなくてもウェブページは表示されます。なぜなら、ウェブページを取得したブラウザがドキュメントに書かれた内容を、ある程度自動で解読してくれるからです。

HTMLはウェブブラウザに読まれることを前提としており、ウェブブラウザはHTMLを解読することを前提としているため、この関係性が成り立ちます。

それでも、極力ヘッダー情報は記述した方が良いとされます。デジタル上のドキュメントは、人間が見る時に必要な情報さえ書かれていればそれで良いというわけではありません。ウェブページにアクセスした時、最初にその情報を読むのは人間ではなくコンピューターです。人間には必要ない情報でも、コンピュターが解読するために必要な情報が含まれていなければ、そのページを正しく表示してくれる保証はありません。

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

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

よく使うヘッダー情報

<head>の中には、少なくとも１つの<meta>と<title>を配置しなければなりません。ここでは、一般的なウェブページで使える要素を紹介します。

タイトル（title）

「タイトル」は、HTMLドキュメントの題名を表します。<title>の開始から終了までの間に必要な内容を記述します。文字数は短すぎず長すぎず、2〜30文字程度が適切とされます。

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

タイトルは、そのページを代表する重要な文字列です。検索結果やブックマークの見出し、RSSやSNSに引用される文字候補として、最も目立つ形で扱われます。


<title>文書の表題です</title>

ディスクリプション（description）

「ディスクリプション（description）」は、そのページについての要約を与えるものです。<meta>のname属性にdescriptionを指定し、content属性に内容を記述します。適切な量は120文字程度とされています。

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


<meta name="description" content="ドキュメントの概要や簡単な説明文を書きます。">

キーワード（keywords）

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

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


<meta name="keywords" content="HTML,meta,keywords">

文字コード

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

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

あなたが作ったウェブサイトを色々なデバイス、色々なブラウザで閲覧して、文字化けが起こらないか確認してみて下さい。文字コードの理解は、作業中にトラブルがあった場合に、改めて掘り下げてみましょう。


<meta charset="UTF-8">

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

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

ヘッダー情報のまとめ

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

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


<html>
<head>
	<meta charset="UTF-8">
	<title>ページのタイトル</title>
	<meta name="description" content="ドキュメントの概要や説明文。">
	<meta name="keywords" content="キーワード,キーワード,キーワード">
</head>
<body>

	<h1>文書の見出し</h1>
	<p>画面に表示される内容。</p>
	<p>画面に表示される内容。</p>
	<p>画面に表示される内容。</p>

</body>
</html>

HTMLって何？初心者が最初に学ぶべき基礎知識

HTMLの書き方をわかりやすく解説

HTMLファイルの作り方

最初に覚えるべきHTMLタグ

ヘッダー情報について

ハイパーリンクについて理解する

改行や半角スペースを連続で表示させる方法

グローバル属性の一覧

コンテンツ・モデルとコンテンツ・カテゴリ

文書のアウトライン

ディレクトリの意味と使い方を詳しく解説

HTMLとXHTMLの違い