HTML <head> タグ

定義と使用方法

<head> 要素は、メタデータ（データに関するデータ）のコンテナで、以下に位置します： <html> タグ および <body> タグ の間。

メタデータは、HTML ドキュメントに関するデータです。メタデータは表示されません。

メタデータは、通常、ドキュメントのタイトル、文字セット、スタイル、スクリプト、他のメタ情報を定義します。

以下の要素は、以下に配置できます： <head> 要素内：

詳細な説明

<head> タグは、ドキュメントのヘッダを定義し、すべてのヘッダ要素のコンテナです。<head> の要素は、スクリプトを参照、ブラウザにスタイルシートの場所を指示、メタ情報を提供などを行います。

ドキュメントのヘッダは、ドキュメントの属性や情報を説明します。これには、ドキュメントのタイトル、Web上の位置、他のドキュメントとの関係などが含まれます。ほとんどのヘッダに含まれるデータは、読者に実際に表示される内容ではありません。

すべての HTML ドキュメントは、head 要素を含む必要がありますが、head 要素には以下のものを含む必要があります： title 要素。

<title> タグ ドキュメントのタイトルを定義し、それは head 部分で唯一必須の要素です。

も参照してください：

HTML 教程：HTML ヘッダ

HTML DOM リファレンスマニュアル：Head オブジェクト

例

例 1

シンプルで完全な HTML ドキュメントであり、head 部分には <title> タグがあります：

<!DOCTYPE html>
<html lang="zh">
  <head>
    <title>ドキュメントのタイトル</title>
  </head>
  <body>
    <h1>これはタイトル</h1>
    <p>これは段落です。</p>
  </body>
</html>

自分で試してみる

例 2

<base> タグ（ページ上のすべてのリンクのデフォルトの URL とターゲットを指定する），<head> 内に：

<html>
  <head>
    <base href="https://www.codew3c.com/" target="_blank">
  </head>
<body>
  <img src="pic/tree.png" width="150" height="161" alt="Tree">
  <a href="tags/tag_base.asp">HTML base タグ</a>
</body>
</html>

自分で試してみる

例 3

<style> タグ（ページにスタイル情報を追加する），<head> 内に：

<html>
  <head>
    <style>
      h1 {color:red;}
      p {color:blue;}
    </style>
  </head>
  <body>
    <h1>一つのタイトル</h1>
    <p>一段。</p>
  </body>
</html>

自分で試してみる

例 4

<link> タグ（外部のスタイルシートにリンクしている）、<head> 内にあります：

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="styles.css">
  </head>
  <body>
    <h1>私はリンクスタイルシートを使用してフォーマットしました。</h1>
    <p>私もです！</p>
  </body>
</html>

自分で試してみる

グローバル属性

<head> タグは以下のグローバル属性をサポートしています HTMLのグローバル属性。

デフォルトの CSS 設定

ほとんどのブラウザは以下のデフォルト値を使用して表示します <head> 要素：

head {
  display: none;
}

ブラウザのサポート

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
サポート サポート サポート サポート サポート