<head>タグの解説
<head>は、ブラウザに表示されない領域で、その文章についてのメタデータや、スクリプトやスタイルシートなどの外部のファイルを呼び出すために使用します。
ここに書かれた内容は画面には映りません。主に人間が読むための情報ではなく、機械が処理するために必要な情報を与えます。<head>の範囲内には、最低限ひとつの<title>要素と、ひとつ以上の<meta>要素を配置しなければなりません。
この要素は、HTMLドキュメントを構成する上で最も基礎的なタグとなります。<html>、<body>と合わせて早い段階で覚えておきましょう。
<head>を使いこなすには、「メタ（meta）」という概念を把握する必要があります。「meta」という言葉自体は単体で使用するものではなく、英語の接頭辞で「高次の〜」「超〜」を表します。何らかの物事を対象にした概念的な情報、それがメタデータとなります。
個人で言えば、個人情報は全てメタデータです。HTMLドキュメントでは<body>の中に記述される文章に与える間接的な情報がメタデータとなります。ちなみに、HTMLはハイパーテキストを記述するためのメタ言語の一種です。
<head>タグの特徴
- 直接画面には表示されません。表示される内容に間接的に寄与します。
- この要素は、
<body>の中に記述される文章にメタデータを与えます。 - 原則として
<html>の直後に設置します。条件付きで省略も可能ですが、推奨しません。 - 同一のページ内に複数使うことはできません。ただし、フレームなどの埋め込みコンテンツの中に含まれる事があります。
<head>要素に指定できる属性
- グローバル属性
- 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
<head>要素の使い方とサンプルコード
この要素の最も基本的な書き方は以下の通りです。<head>要素には必ずひとつの<title>要素と、ひとつ以上の<meta>要素を配置します。charset属性の値がUTF-8なのは、ブラウザが採用している文字エンコーディング方式のスタンダードだからです。
<head>
<meta charset="UTF-8">
<title>タイトル</title>
</head>
通常のウェブ制作を想定したヘッダーのマークアップは以下のように行います。特に追記するものがなければ、この内容をコピーしてテキストエディタに貼り付ければ、作業を開始できます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
</head>
<body>
<h1>HTMLドキュメント</h1>
<p>シンプルな文章の例。シンプルな文章の例。</p>
<p>シンプルな文章の例。シンプルな文章の例。</p>
</body>
</html>
慣れてきたら、色々な企業のサイトのソースコードを開いて、ヘッダーにどのような情報が含まれているか確認してみましょう。多くの場合、パソコンとスマートフォンなど様々な大きさの画面に対応するための指定や、SNSの共有に必要な情報、外部ファイルの読み込みなどが記述されています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>タイトル</title>
<meta name="description" content="このページの概要を表す内容です。">
<!--=== OGP Data ===-->
<meta property="og:url" content="page-url">
<meta property="og:title" content="タイトル">
<meta property="og:description" content="このページの概要を表す内容です。">
<meta property="og:site_name" content="Site Name">
<meta property="og:type" content="website">
<meta property="og:image" content="og_image/URL">
<!--/=== OGP Data ===-->
<link rel="canonical" href="page-url">
<link rel="icon" href="favicon-96x96.png">
<link rel="apple-touch-icon" href="favicon-192x192.png">
<link rel="stylesheet" href="/style/main.css">
<script src="/js/script.js" defer></script>
</head>
<body>
<h1>HTMLドキュメント</h1>
<p>シンプルな文章の例。シンプルな文章の例。</p>
<p>シンプルな文章の例。シンプルな文章の例。</p>
</body>
</html>