head 要素は「ページの設定・プロフィールを書く場所」
まずイメージからいきます。
<head> は、
「画面に直接は見えないけれど、ページにとって超重要な情報」
を書く場所です。
タイトル
文字コード
スマホ向けの設定
検索エンジン向けの説明
CSS や JavaScript の読み込み指定
こういった「ページの中身そのものではない情報」を
まとめて入れておく“コントロールルーム”が <head> です。
画面に見える本文は <body>、
その前にある「裏方の設定」が <head>、
と覚えるとスッと入ります。
head 要素の基本的な位置と形
HTML 全体の中での head の場所
最小構造の中で見ると、こうなります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプルページ</title>
</head>
<body>
<h1>こんにちは</h1>
<p>これはサンプルです。</p>
</body>
</html>
<head> は必ず <html> の中、
そして <body> よりも前に書きます。
ここに書くのは「設定・メタ情報」であって、
見出しや本文などの「コンテンツ」は入れません。
<h1> や <p> を <head> に書くのは NG です。
それらは必ず <body> の中に置きます。
文字コードを決める meta 要素は最優先レベルで重要
<meta charset="UTF-8"> はほぼ必須の一行
<head> の中で、
まず真っ先に書くべきなのがこれです。
<meta charset="UTF-8">
これは
「この HTML は UTF-8 という文字コードで書いてあります」
という宣言です。
これがないと、日本語が文字化けしたり、
ブラウザが誤った文字コードで解釈してしまうことがあります。
現代の Web では、
文字コードはほぼ UTF-8 一択なので、
「HTML を書くときは、<head> の最初に<meta charset="UTF-8"> を入れる」
と指に覚えさせてしまって大丈夫です。
title 要素は「タブの名前」であり「ページの名前」
画面には出ないけれど、ユーザーが一番よく見る文字
<title> はこう書きます。
<title>はじめての HTML ページ</title>
これは、
ブラウザのタブに表示される文字
ブックマークしたときの名前
検索結果に出るページタイトル
などに使われます。
画面の本文には直接出てきませんが、
ユーザーが「今どのページを見ているか」を判断する
とても重要な情報です。
ここで大事なのは、
ページごとに意味のあるタイトルを付けること です。
悪い例：
<title>無題</title>
<title>ホーム</title>
良い例：
<title>My Cafe - ホーム</title>
<title>My Cafe - メニュー</title>
<title>My Cafe - アクセス</title>
「サイト名＋ページの内容」が分かるタイトルにすると、
タブがたくさん開いていても迷いにくくなります。
CSS や JavaScript の読み込み指定も head の大事な仕事
CSS は link 要素で読み込む
外部の CSS ファイルは、
通常 <head> の中で読み込みます。
<head>
<meta charset="UTF-8">
<title>スタイル付きページ</title>
<link rel="stylesheet" href="styles.css">
</head>
<link rel="stylesheet"> は
「このページは styles.css というスタイルシートを使います」
という宣言です。
これを <head> に書いておくことで、
ブラウザは HTML を描画するときに
CSS の情報も一緒に考慮してくれます。
JavaScript は昔は head に、今は body 終了前に置くことが多い
JavaScript も <head> で読み込めます。
<head>
<meta charset="UTF-8">
<title>スクリプト付きページ</title>
<script src="app.js"></script>
</head>
ただし、この形だと
HTML を読み込む前に JavaScript が実行されるため、
DOM 操作のタイミングに注意が必要です。
最近は、
<body> の一番最後で読み込む
または <script defer> を使う
といった書き方が主流です。
例（defer を使う）：
<head>
<meta charset="UTF-8">
<title>スクリプト付きページ</title>
<script src="app.js" defer></script>
</head>
defer を付けると、
「HTML の解析が終わってからスクリプトを実行する」
という動きになるので、
DOM 操作がしやすくなります。
スマホ向け表示を整える meta viewport
スマホで“ちゃんと”見せるための一行
スマホ対応のページでは、
ほぼ必須の一行がこれです。
<meta name="viewport" content="width=device-width, initial-scale=1">
これは、
画面の幅をデバイスの幅に合わせる
初期の拡大率を 1 にする
という設定です。
これがないと、
スマホで開いたときに
全体が縮小されて小さく表示される
文字が読みにくい
意図しないズーム状態になる
といったことが起きます。
<head> にこの一行を入れておくことで、
「スマホで見たときの基本的な見え方」 が整います。
検索エンジンや SNS 向けの meta 情報も head に書く
description でページの説明を書く
検索結果に出る「説明文」の候補になるのが<meta name="description"> です。
<meta name="description" content="My Cafe は東京にある小さなカフェです。自家焙煎コーヒーと手作りスイーツが人気です。">
これは画面には表示されませんが、
検索エンジンがページの内容を理解する助けになります。
「このページは何についてのページか」を
一文で説明するつもりで書くと良いです。
SNS 用の情報（OGP など）もここに置く
Twitter や LINE で URL を貼ったときに出る
タイトル・説明・サムネイル画像なども、
多くは <head> の中の <meta> で指定します。
例（ざっくりイメージ）：
<meta property="og:title" content="My Cafe - ホーム">
<meta property="og:description" content="自家焙煎コーヒーが楽しめるカフェです。">
<meta property="og:image" content="https://example.com/og-image.jpg">
これも「ページの中身」ではなく
「ページについての情報」 なので、<head> に書くのが正しい場所です。
head に“入れてはいけないもの”も理解しておく
コンテンツ（見出し・本文）は絶対に入れない
<head> は設定・メタ情報の場所なので、
次のようなものは入れてはいけません。
<h1> や <h2> などの見出し<p> などの本文<img> などのコンテンツ画像
これらはすべて <body> の中に置きます。
悪い例：
<head>
<meta charset="UTF-8">
<title>テスト</title>
<h1>こんにちは</h1> <!-- NG -->
</head>
正しい形：
<head>
<meta charset="UTF-8">
<title>テスト</title>
</head>
<body>
<h1>こんにちは</h1>
</body>
「ユーザーが画面で見るべきものか？」
と自分に問いかけて、
そうなら <body> に、
そうでないなら <head> に、
と分ける感覚を持てると一気に整理されます。
初心者として「head 要素」で掴んでほしいこと
<head> は、
「ページの中身」ではなく「ページの設定・プロフィール」
を書く場所です。
文字コード（<meta charset="UTF-8">）で文字化けを防ぐ
タイトル（<title>）でタブ名・ページ名を決める
CSS（<link rel="stylesheet">）や JS（<script>）の読み込みを宣言する
スマホ向けの表示（<meta name="viewport">）を整える
検索エンジンや SNS 向けの説明（<meta name="description"> など）を書く
見出しや本文などのコンテンツは絶対に入れず、必ず <body> に置く
あなたが HTML を書くときに、
「これはユーザーが見る中身？ それともページの設定？」
と一度立ち止まって、
設定なら <head>、中身なら <body> に分けられるようになったら、
もう HTML の“設計者”としての感覚が育ち始めています。