head
初級読み方：ヘッド｜英語：Head
ページの設定情報（タイトル・文字コード・CSSの読み込みなど）を書く場所で、画面には表示されないよ。いつ使う？ HTMLファイルを作るとき、<html>の中に必ず<head>を書くよ。<title>や<meta charset="UTF-8">、CSSファイルの<link>タグはここに入れるよ。間違いやすいポイント: headの中に書いた文字は画面に出ないよ。「あれ、文字が表示されない！」と思ったら、bodyではなくheadに書いていないか確認しよう。
やさしい説明
head（ヘッド）タグは、ページの「裏側の設定」を書く場所です。ここに書いた内容は画面には表示されません。
本に例えると、headは「奥付（おくづけ）」のようなものです。本のタイトル、著者名、出版社などの情報が書いてありますが、物語の本文ではありませんよね。headも同じで、ページのタイトルや文字コードなどの「設定情報」を書きます。
ブラウザのタブに表示されるページ名は、headの中の <title> タグで決まります。SNSでリンクをシェアしたときに出る画像や説明文も、headの中で設定します。
CSSファイルの読み込みもheadで行います。headに書いた設定が、bodyの見た目や動作に影響を与えるんです。
図解：headとbodyの役割
具体例・使い方
headの中に書く代表的なものを紹介します。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文化祭のページ</title>
<link rel="stylesheet" href="style.css">
</head><meta charset="UTF-8">→ 日本語を正しく表示するための文字コード設定<meta name="viewport"...>→ スマホ対応の設定<title>→ ブラウザのタブに表示される名前<link rel="stylesheet"...>→ CSSファイルの読み込み
いつ使う？
HTMLファイルを作るたびに必ず書きます。ページのタイトルを決めたいとき、CSSを読み込みたいとき、スマホ対応させたいとき——すべてheadの中で設定します。
間違いやすいポイント
❌ headの中に表示したい文章を書いてしまう
<!-- ❌ これは画面に表示されない -->
<head>
<p>こんにちは</p>
</head>
<!-- ✅ 表示したい内容はbodyに書く -->
<body>
<p>こんにちは</p>
</body>❌ charsetの指定を忘れて文字化けする
<meta charset="UTF-8"> を書き忘れると、日本語が「ã‚ã„ã†ãˆãŠ」のように文字化けすることがあります。
よくある疑問
Q: headの中身は画面に表示されない？
A: はい。headの中身はブラウザの設定に使われ、画面には表示されません。画面に表示したいものはbodyに書きます。
Q: headに書くべきものは？
A: <title>（タブに表示されるタイトル）、<meta charset="UTF-8">（文字コード）、<link>（CSS読み込み）、<meta name="viewport">（スマホ対応）が基本です。
Q: headを書かないとどうなる？
A: ブラウザが自動で補完しますが、文字化けしたり、CSSが読み込まれなかったりします。必ず書きましょう。
関連用語
📖 関連レッスン
レッスンを見る →