<head>

対応:		HTML 4（1997）

『<head>』要素はHTMLドキュメントのメタ情報を格納するコンテナです。ブラウザのタブに表示されるタイトルや文字コード、CSSファイルの読み込みなど、ページの表示には直接関係しない情報を記述します。

構文

<head>
  <meta charset="UTF-8">
  <title>ページのタイトル</title>
  <base href="https://example.com/">
  <link rel="stylesheet" href="style.css">
</head>

head内で使用するタグ一覧

タグ	概要
<title>	ページのタイトルを指定します。ブラウザのタブや検索結果に表示されます。
<meta>	文字コード・ページの説明・ビューポートなどのメタ情報を指定します。
<link>	外部CSSファイルやfaviconなどの外部リソースを紐付けます。
<style>	HTMLファイル内にCSSを直接記述します。
<script>	JavaScriptを記述または外部ファイルを読み込みます。
<base>	ページ内のすべての相対URLの基準となるURLを指定します。

サンプルコード

sample_head.html

<!-- 基本的なhead -->
<!DOCTYPE html>
<html lang="ja">
<head>
  <!-- 文字コードの指定 -->
  <meta charset="UTF-8">

  <!-- ビューポートの指定（スマートフォン対応） -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ページの説明 -->
  <meta name="description" content="このページの説明文です。">

  <!-- ページタイトル -->
  <title>サンプルページ | サイト名</title>

  <!-- 外部CSSの読み込み -->
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <p>ページの本体はここに記述します。</p>
</body>
</html>

<!-- faviconとOGPを追加した実践的なhead -->
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="HTMLとCSSを基礎から学べるチュートリアルサイトです。">

  <title>HTML入門 | プログラミング学習サイト</title>

  <!-- favicon -->
  <link rel="icon" href="/img/favicon.ico" type="image/x-icon">

  <!-- OGP（SNSシェア時のタイトル・画像・説明） -->
  <meta property="og:title" content="HTML入門">
  <meta property="og:description" content="HTMLとCSSを基礎から学べるチュートリアルサイトです。">
  <meta property="og:image" content="https://example.com/img/ogp.png">
  <meta property="og:url" content="https://example.com/html/">
  <meta property="og:type" content="website">

  <!-- 外部CSS -->
  <link rel="stylesheet" href="style.css">

  <!-- JavaScriptは通常bodyの末尾に記述するが、deferを使えばheadでも可 -->
  <script src="main.js" defer></script>
</head>

<!-- baseタグで相対URLの基準を設定する例 -->
<head>
  <meta charset="UTF-8">
  <title>サブディレクトリのページ</title>

  <!-- すべての相対URLが https://example.com/ を基準にする -->
  <base href="https://example.com/">

  <!-- /style.css ではなく style.css と書くだけで読み込まれる -->
  <link rel="stylesheet" href="style.css">
</head>

実行結果

『<head>』内の記述はページ上には表示されませんが、ブラウザのタブには『<title>』で指定したタイトルが表示され、指定したCSSファイルのスタイルがページに適用されます。

サンプルページはこちら

概要

『<head>』内に記述する内容はページ上には表示されませんが、SEOやページの表示速度、スマートフォン対応において非常に重要な役割を担っています。

『<title>』タグの内容は検索エンジンの検索結果にも表示されるため、ページの内容を端的に表す適切なタイトルを設定することが大切です。

『<base>』タグはページ内に1つしか置けません。相対URLの基準パスを一括で変更できる便利なタグですが、使い方を誤るとリンクやリソースの参照先がすべてずれてしまうため、使用する場合は十分に注意してください。

各タグの詳細については『meta』・『link』のページも合わせてご覧ください。

本番サイトで使う完全なhead構成テンプレート

実際のWebサイトに必要な要素をすべて含んだ、そのまま流用できるテンプレートです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <!-- 1. 文字コード（必ず最初に記述） -->
  <meta charset="UTF-8">

  <!-- 2. ビューポート（スマートフォン対応に必須） -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- 3. SEO -->
  <title>ページタイトル | サイト名</title>
  <meta name="description" content="120〜160文字でページ内容を説明します。">
  <link rel="canonical" href="https://example.com/page/">

  <!-- 4. OGP（SNSシェア用） -->
  <meta property="og:title" content="ページタイトル | サイト名">
  <meta property="og:description" content="SNSシェア時に表示される説明文。">
  <meta property="og:image" content="https://example.com/img/ogp.png">
  <meta property="og:url" content="https://example.com/page/">
  <meta property="og:type" content="website">
  <meta name="twitter:card" content="summary_large_image">

  <!-- 5. favicon -->
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="icon" href="/favicon.png" type="image/png">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">

  <!-- 6. パフォーマンス（フォントの先読み） -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preload" href="/fonts/main.woff2"
        as="font" type="font/woff2" crossorigin>

  <!-- 7. スタイルシート -->
  <link rel="stylesheet" href="/css/style.css">

  <!-- 8. JavaScript（defer推奨） -->
  <script src="/js/main.js" defer></script>
</head>
<body>
  <!-- コンテンツ -->
</body>
</html>

番号順に記述することで、ブラウザが正しく解析・表示できます。特に『charset』と『viewport』は必ず先頭近くに記述してください。

JavaScriptによるheadの動的操作

JavaScriptを使って、ページ表示後にタイトルや各種メタ情報を動的に変更することができます。SPAなどのシングルページアプリケーションでよく使われるパターンです。

// ページタイトルを変更する
document.title = "新しいタイトル | サイト名";

// descriptionを動的に変更する
var metaDesc = document.querySelector('meta[name="description"]');
if (metaDesc) {
  metaDesc.setAttribute("content", "動的に変更した説明文");
}

// metaタグを新たに追加する
var meta = document.createElement("meta");
meta.setAttribute("name", "robots");
meta.setAttribute("content", "noindex");
document.head.appendChild(meta);

// 外部CSSを動的に読み込む
var link = document.createElement("link");
link.rel = "stylesheet";
link.href = "/css/theme-dark.css";
document.head.appendChild(link);