【HTML Living Standard】head要素の使い方
head要素の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
headオブジェクトは、HTMLドキュメントのメタデータを表すオブジェクトです。これは、ウェブページのコンテンツ自体ではなく、ドキュメントに関する様々な情報を格納する重要な役割を持っています。
このオブジェクトには、ブラウザのタブやウィンドウに表示されるページのタイトルを定義する<title>要素、ページの文字エンコーディング、説明、キーワード、ビューポート設定などの情報を指定する<meta>要素が含まれます。また、外部スタイルシート（CSSファイル）やファビコンといったリソースを読み込むための<link>要素、JavaScriptコードや外部スクリプトファイルを読み込む<script>要素、そしてページ固有のスタイルを直接記述する<style>要素などもこのhead要素内に記述されます。
これらの情報は、ウェブページがブラウザによってどのように表示されるか、また検索エンジンがそのページをどのように理解し、インデックスするかを決定する上で非常に重要です。例えば、<title>要素は検索結果のリンクテキストとして利用され、<meta name="description">は検索結果のスニペットに表示されることがあります。
headオブジェクト内に記述された内容は、通常、ユーザーが直接ウェブページ上で目にするものではありませんが、ウェブページの動作、表示、検索エンジン最適化（SEO）に不可欠な要素です。システムエンジニアを目指す方にとって、このheadオブジェクトの適切な設定は、ウェブページの品質と発見性を高める上で基本的な知識となります。
構文(syntax)
1<head> 2 <meta charset="UTF-8"> 3 <title>ページのタイトル</title> 4</head>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTML head 要素でメタデータ設定を行う
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <!-- head要素は、ブラウザには表示されないドキュメントのメタデータや設定を定義します。 --> 5 <!-- 例: ドキュメントのタイトル、文字エンコーディング、ビューポート設定など --> 6 7 <!-- ドキュメントの文字エンコーディングを指定します。通常はUTF-8を使用します。 --> 8 <meta charset="UTF-8"> 9 <!-- デバイスの幅に合わせてビューポートを設定し、レスポンシブデザインを可能にします。 --> 10 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 11 <!-- ブラウザのタブやウィンドウのタイトルバーに表示されるドキュメントのタイトルを設定します。 --> 12 <title>My Web Page Title</title> 13</head> 14<body> 15 <!-- body要素には、実際にブラウザに表示されるコンテンツを記述します。 --> 16 <h1>ようこそ、私のウェブページへ！</h1> 17 <p>このページは、head要素の基本構造を示すサンプルです。</p> 18</body> 19</html>
HTMLのhead要素は、ウェブページの基本的な情報や設定を定義するための要素です。この要素に記述された内容は、通常、ブラウザの画面には直接表示されません。ブラウザがページを適切に表示したり、検索エンジンが内容を理解したりするために必要な「メタデータ」と呼ばれる情報が格納されます。
具体的には、<meta charset="UTF-8">のように文字エンコーディングを指定したり、<meta name="viewport" content="width=device-width, initial-scale=1.0">のようにデバイスの幅に合わせて表示を調整し、様々な画面サイズに対応するレスポンシブデザインの設定を行います。また、<title>My Web Page Title</title>でブラウザのタブやウィンドウのタイトルバーに表示されるページの題名を設定します。
このように、head要素はウェブページの「頭脳」とも言える部分で、ページの表示や動作に関する基礎的な設定を管理します。このhead要素自体には、特定の引数や戻り値はありません。中に含まれる個々の要素（例: meta, title）がそれぞれ独自の属性を持ち、具体的な設定を定義します。HTML文書の冒頭で定義され、ウェブページが正しく機能し、ユーザーに適切に表示されるための土台を築く非常に重要な要素です。
head要素は、ブラウザに直接表示される内容ではなく、ウェブページのタイトルや文字エンコーディング、表示設定などの重要な情報を定義する場所です。この部分の設定は、検索エンジンの認識や、様々なデバイスでの表示、文字化けの防止に大きく影響します。特に<meta charset="UTF-8">は、文字化けを防ぐためhead要素の冒頭に記述することが推奨されます。また、<title>要素はブラウザのタブや検索結果に表示されるため、内容を正確に表すように設定しましょう。<meta name="viewport">は、スマートフォンなどの多様な画面サイズに対応するために不可欠な設定です。これらの設定を適切に行うことで、ウェブページはより広く、正しく利用されるようになります。
HTMLのhead要素でページ設定を行う
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <!-- head要素は、Webブラウザには直接表示されない、文書のメタ情報（設定）を定義します。 --> 5 <!-- 主にページのタイトル、文字エンコーディング、ビューポート設定、外部スタイルシートやスクリプトのリンクなどが含まれます。 --> 6 7 <!-- 文字エンコーディングをUTF-8に設定。これにより文字化けを防ぎます。 --> 8 <meta charset="UTF-8"> 9 <!-- レスポンシブデザインのために、ビューポートの幅をデバイスの幅に合わせ、初期ズームレベルを設定します。 --> 10 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 11 <!-- ブラウザのタブやウィンドウのタイトルバーに表示されるページのタイトルです。 --> 12 <title>HTMLサンプルページ</title> 13 14 <!-- 例: 外部CSSファイルを読み込む場合 --> 15 <!-- <link rel="stylesheet" href="style.css"> --> 16 17 <!-- 例: 外部JavaScriptファイルを読み込む場合（通常はbody要素の最後で読み込むことが多いですが、head内でも可能です） --> 18 <!-- <script src="script.js"></script> --> 19</head> 20<body> 21 <!-- body要素内に、Webブラウザに表示される実際のコンテンツを記述します。 --> 22 <h1>ようこそ、HTMLの世界へ！</h1> 23 <p>このページは、head要素の基本的な構造と役割を示すサンプルです。</p> 24</body> 25</html>
head要素は、HTML文書の冒頭に配置される重要な要素です。この要素内には、Webブラウザには直接表示されない、文書のメタ情報（設定）が記述されます。具体的には、ページのタイトル、文字エンコーディング、ビューポートの設定、外部スタイルシートやスクリプトの参照などが含まれます。head要素自体に引数はなく、特定の値を戻す機能もありません。
サンプルコードでは、まず<meta charset="UTF-8">で文字エンコーディングをUTF-8に設定し、Webページでの文字化けを防いでいます。次に<meta name="viewport" content="width=device-width, initial-scale=1.0">は、レスポンシブデザインを実現するために、ページの表示領域（ビューポート）の幅をデバイスの幅に合わせ、初期のズームレベルを設定する役割を持っています。そして、<title>HTMLサンプルページ</title>は、ブラウザのタブやウィンドウのタイトルバーに表示されるページの題名を定義します。
これらのhead要素内の情報は、Webページの表示や挙動を制御し、検索エンジン最適化（SEO）にも影響を与えるため、Webサイト制作において不可欠な設定を担っています。ユーザーが直接目にするコンテンツは<body>要素に記述されますが、head要素はWebページの基盤となる重要な情報を提供しているのです。
head要素は、Webブラウザには直接表示されない、文書の重要なメタ情報（設定）を定義します。まず、<meta charset="UTF-8">で文字エンコーディングを正しく設定し、文字化けを防ぐことが非常に重要です。また、<title>タグでブラウザのタブに表示されるページのタイトルを必ず記述しましょう。現代のウェブ開発では、スマートフォンなど多様なデバイスでの表示に対応するため、<meta name="viewport" ...>の設定も欠かせません。外部CSSは<link>で、JavaScriptは<script>で読み込みますが、JavaScriptはページの読み込み速度を考慮し、通常は<body>要素の閉じタグ直前に配置することが推奨されます。これらの設定は、Webページの見た目だけでなく、検索エンジン最適化（SEO）にも影響するため、適切に記述するよう心がけてください。