head
初級読み方：ヘッド｜英語：Head
ページの設定情報（タイトル・文字コード・CSSの読み込みなど）を書く場所で、画面には表示されないよ。
やさしい説明
head（ヘッド）タグは、ページの「裏側の設定」を書く場所です。ここに書いた内容は画面には表示されません。
本に例えると、headは「奥付（おくづけ）」のようなものです。本のタイトル、著者名、出版社などの情報が書いてありますが、物語の本文ではありませんよね。headも同じで、ページのタイトルや文字コードなどの「設定情報」を書きます。
ブラウザのタブに表示されるページ名は、headの中の <title> タグで決まります。SNSでリンクをシェアしたときに出る画像や説明文も、headの中で設定します。
CSSファイルの読み込みもheadで行います。headに書いた設定が、bodyの見た目や動作に影響を与えます。
図解：headとbodyの役割
具体例・使い方
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文化祭のページ</title>
<link rel="stylesheet" href="style.css">
<script src="main.js" defer></script>
</head><meta charset="UTF-8">— 日本語を正しく表示するための文字コード設定<meta name="viewport"...>— スマホ対応の設定（レスポンシブ必須）<title>— ブラウザのタブに表示される名前<link rel="stylesheet"...>— CSSファイルの読み込み<script src="..." defer>— JavaScriptファイルの読み込み（deferで本文読込後に実行）
headに書けるタグ一覧
<title>— ページタイトル（タブ・検索結果に表示）<meta charset>— 文字コード（UTF-8 を指定するのが現代の標準）<meta name="viewport">— スマホ表示の制御<meta name="description">— 検索結果に出る説明文（SEO）<link rel="stylesheet">— 外部CSSの読み込み<link rel="icon">— ファビコン（タブに表示される小アイコン）<script>— JavaScriptの読み込み（defer推奨）<meta property="og:...">— SNSシェア時の画像・タイトル設定（OGP）
VS Code で ! + Tab を押すと、charset・viewport・title が入った雛形が自動生成されます。これがほぼすべての head の出発点です。
いつ使う？
HTMLファイルを作るたびに必ず書きます。ページのタイトルを決めたいとき、CSSを読み込みたいとき、スマホ対応させたいとき——すべてheadの中で設定します。
間違いやすいポイント
❌ headの中に表示したい文章を書いてしまう
head の中に書いた <p> や <h1> などは画面に表示されません。表示したい内容は必ず <body> の中に書きましょう。
<!-- ❌ これは画面に表示されない -->
<head>
<p>こんにちは</p>
</head>
<!-- ✅ 表示したい内容はbodyに書く -->
<body>
<p>こんにちは</p>
</body>❌ charsetの指定を忘れて文字化けする
<meta charset="UTF-8"> を書き忘れると、日本語が「ã‚ã„ã†ãˆãŠ」のように文字化けすることがあります。head の一番先頭に書くのがルールです。
よくある疑問
Q: headの中身は画面に表示されない？
A: はい。headの中身はブラウザの設定に使われ、画面には表示されません。画面に表示したいものはbodyに書きます。
Q: headに書くべきものは？
A: <title>（タブに表示されるタイトル）、<meta charset="UTF-8">（文字コード）、<link>（CSS読み込み）、<meta name="viewport">（スマホ対応）が基本です。
Q: headを書かないとどうなる？
A: ブラウザが自動で補完しますが、文字化けしたり、CSSが読み込まれなかったりします。必ず書きましょう。
関連用語
📖 関連レッスン
レッスンを見る →