headタグ -メタ情報を記述するセクション｜HTML辞典
<head>タグとは？
<head>タグは、HTML文書のメタ情報（ページタイトル、文字エンコーディング、外部ファイルの読み込みなど）を記述するセクションです。
このタグ内の内容は、ブラウザの表示画面には直接影響しませんが、ページの機能やSEOに大きな影響を与えます。
基本情報
コンテンツモデル
メタデータコンテンツ（Metadata Content）
ページの情報を提供し、ブラウザや検索エンジンが適切に解釈できるようにする要素を含みます。
閉じタグの有無
<head>は開始タグ（<head>）と閉じタグ（</head>）の両方が必要です。
この中には、通常、<meta>、<title>、<link> などのメタデータ要素を含めます。
基本的な記述方法
<head>タグは、HTML文書の冒頭に記述し、ページの設定情報をまとめます。
以下は、HTMLの基本構造における<head>の使用例です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>サンプルページ</title>
<link rel="stylesheet" href="styles.css">
<script src="script.js" defer></script>
</head>
<body>
<h1>こんにちは、世界！</h1>
</body>
</html>
使用できる主な要素
<head>タグ内で使用される頻度の高い要素を紹介します。
| タグ | 説明 | 例 |
|---|---|---|
<title> | ページのタイトル（タブに表示） | <title>ホームページ</title> |
<meta> | 文字コードやSEO情報を設定 | <meta charset="UTF-8"> |
<link> | 外部ファイル（CSS・ファビコンなど）を読み込む | <link rel="stylesheet" href="styles.css"> |
<script> | JavaScriptを読み込む | <script src="script.js" defer></script> |
<style> | ページ固有のCSSを記述 | <style> body { background: #eee; } </style> |
使用上の注意点
✅ <title> タグは必ず含める
<title>はページのタイトルとしてブラウザのタブに表示されるだけでなく、検索エンジンの検索結果にも影響を与えます。
✅ <meta charset="UTF-8"> を指定する
- 文字エンコーディングを指定しないと、日本語の文字が正しく表示されない場合があります。
- ほとんどの現代のWebサイトでは、
UTF-8が標準です。
✅ <meta name="viewport"> を設定する
- モバイル対応を考慮し、
<meta name="viewport" content="width=device-width, initial-scale=1.0">を設定すると、スマホやタブレットでも適切に表示されます。
✅ CSS・JavaScriptは適切に読み込む
関連タグ
<html>– HTML文書のルート要素<body>– ページのメインコンテンツを含むセクション<meta>– 文字エンコーディングやページ情報を指定<title>– ページタイトルを指定<link>– CSSや外部ファイルを読み込む
まとめ
<head>タグは、HTML文書のメタデータを管理する重要なセクション です。
ページの適切な表示やSEO対策、ユーザー体験を向上させるために、必要な情報を正しく設定しましょう。
特に <title>、<meta charset="UTF-8">、<meta name="viewport"> の3つは必須 なので、記述を忘れないようにしましょう。
