HTML辞書ホームへ
HTML要素 辞書 by Sentaro
<head>
文書のメタデータ（付加情報）を含む要素。ブラウザには表示されないページに関する設定を行います。
info
概要
<head> 要素は、HTMLドキュメントのヘッダー部分を定義し、ページ自体に関する情報（メタデータ）を格納します。この要素内に記述された内容は、通常、Webページのコンテンツとしては表示されません。
Webページのタイトル、文字コード、外部CSS・JavaScriptファイルの読み込み、SEOのための説明文、OGP（SNS共有時の表示設定）など、ドキュメントの処理に必要な情報や設定はすべてこの中に記述します。
play_circle
デモ (静的表示: headの内容は直接表示されません)
HTML (Source)
<head>
<meta charset="UTF-8">
<title>ページのタイトル</title>
<link rel="stylesheet" href="style.css">
<meta name="description" content="このページの簡単な説明">
</head>
<body>
<h1>これはbodyの内容です</h1>
</body>
Preview (Result)
<head>タグの内容はここに直接表示されません。
ブラウザのタブや検索結果、外部ファイルの読み込みに使われます。
list
主要な内包要素 (Elements in head)
<head> 要素には、以下の要素を配置するのが一般的です。
| 要素名 | 説明 |
|---|---|
| <title> | **必須要素**。ブラウザのタブや検索結果に表示されるドキュメントのタイトルを指定します。 |
| <meta> | 文字コード、ビューポート設定、SEO用の説明、OGPなどのメタデータを指定します。 |
| <link> | 外部リソース（主にCSSファイル、ファビコンなど）との関連付けを行います。 |
| <style> | ドキュメントに直接CSSスタイルを記述します。 |
| <script> | JavaScriptコードの埋め込みや外部JavaScriptファイルの読み込みに使用します。 |
| <base> | 相対URLの基準となるURLを設定します。 |
code
実用例
1. 基本的なドキュメント情報
<head>
<meta charset="UTF-8"> <!-- 文字コード設定 (必須) -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- レスポンシブ対応 -->
<title>これはページのタイトルです</title>
</head>
2. SEOと外部ファイルの読み込み
<head>
<meta name="description" content="検索エンジン向けの説明文">
<link rel="stylesheet" href="/css/style.css"> <!-- 外部CSS -->
<script src="/js/main.js" defer></script> <!-- 外部JS -->
</head>
3. OGP（Open Graph Protocol）設定
<head>
<meta property="og:title" content="OGP用のタイトル">
<meta property="og:description" content="SNSでシェアされる時の説明">
<meta property="og:image" content="https://example.com/share.png">
</head>
lightbulb
知っておくべき重要事項
priority_high
必須要素と配置
<head> 要素は、**<html> の直下、<body> の直前** に配置する必要があります。また、子要素として <title> と <meta charset="..."> は、現代のHTML文書にはほぼ必須とされています。
accessibility_new
<title> の重要性
<title> 要素はアクセシビリティにとって極めて重要です。スクリーンリーダーのユーザーはタイトルを基にページの内容を把握します。簡潔かつ具体的に、ページの内容を正確に表すタイトルを設定してください。