HTML <head>タグ


ヘッドセクション内に<title>タグが付いた単純なHTMLドキュメント:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Title of the document</title>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

以下の「自分で試してみてください」の例をもっと見てください。


定義と使用法

この<head>要素はメタデータ(データに関するデータ)のコンテナーであり、<html>タグと<body>タグの間に配置されます。

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

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

次の要素を要素内に入れることができます<head>


ブラウザのサポート

Element
<head> Yes Yes Yes Yes Yes


グローバル属性

この<head>タグは、HTMLのグローバル属性もサポートしています。


その他の例

<base>タグ(ページ上のすべてのリンクのデフォルトURLとターゲットを指定)は<head>内にあります。

<html>
<head>
  <base href="https://www.w3schools.com/" target="_blank">
</head>
<body>

<img src="images/stickman.gif" width="24" height="39" alt="Stickman">
<a href="tags/tag_base.asp">HTML base Tag</a>

</body>
</html>

<style>タグ(ページにスタイル情報を追加する)は<head>内に入ります

<html>
<head>
  <style>
    h1 {color:red;}
    p {color:blue;}
  </style>
</head>
<body>

<h1>A heading</h1>
<p>A paragraph.</p>

</body>
</html>

<link>タグ(外部スタイルシートへのリンク)は<head>の内部に入ります

<html>
<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>

<h1>I am formatted with a linked style sheet</h1>
<p>Me too!</p>

</body>
</html>

関連ページ

HTMLチュートリアル:HTMLヘッド

HTML DOMリファレンス:ヘッドオブジェクト


デフォルトのCSS設定

ほとんどのブラウザは<head>、次のデフォルト値で要素を表示します。

head {
  display: none;
}