<head> ヘッダー情報

取り扱い 現行の標準
カテゴリ なし
親にできる要素 <html>
子にできる要素 <title>を含む一個以上のメタデータ・コンテンツ
対応ブラウザ caniuseで確認

<head>タグの説明

<head>は、ブラウザに表示されない領域で、その文章についてのメタデータや、スクリプトやスタイルシートなどの外部のファイルを呼び出すために使用します。

ここに書かれた内容は画面には映りません。主に、人間が読むための情報ではなく機械が処理するために必要な情報を与えます。<head>の範囲内には、最低限<title>と一つ以上の<meta>が必要となります。

この要素は、HTMLドキュメントを構成する上で最も基礎的なタグとなります。<html><body>と合わせて早い段階で覚えておきましょう。

<head>を使いこなすには、「メタ(meta)」という概念を把握する必要があります。「meta」という言葉自体は単体で使用するものではなく、英語の接頭辞で「高次の〜」「超〜」を表します。何らかの物事を対象にした概念的な情報、それがメタデータとなります。

個人で言えば、個人情報は全てメタデータです。HTMLドキュメントでは<body>の中に記述される文章に与える間接的な情報がメタデータとなります。ちなみに、HTMLはハイパーテキストを記述するためのメタ言語の一種です。

<head>タグの特徴

  • 直接画面には表示されません。表示される内容に間接的に寄与します。
  • この要素は、<body>の中に記述される文章にメタデータを与えます。
  • 原則として<html>の直後に設置します。条件付きで省略も可能ですが、推奨しません。
  • 同一のページ内に複数使うことはできません。ただし、フレームなどの埋め込みコンテンツの中に含まれる事があります。

<head>に指定できる主な属性

グローバル属性
全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。

<head>の使い方とサンプル

ヘッダーのマークアップは以下のように行います。

HTML
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>タイトル</title>
</head>
<body>
	<article>
	<h1>HTMLドキュメント</h1>
	<p>シンプルな文章の例。シンプルな文章の例。</p>
	<p>シンプルな文章の例。シンプルな文章の例。</p>
	</article>
</body>
</html>

<head>に関連するHTMLタグ

ヘッダー情報を構成する要素
<title> ウェブページのタイトルを指定する
<meta> ドキュメントに関するメタ情報を追加する
<link> 外部ファイルへのリンクを埋め込む
<base> ページの基準となるURLを指定する
<style> スタイルシートをドキュメントの中で指定する