HTMLを書き始めたばかりの方にとって、<head>タグが何のためにあるのか、
そしてそこに何を書けばいいのか、ちょっと難しく感じるかもしれませんよね。
実際、タグはHTMLページの「見えない部分」をコントロールする、とても重要な役割を持っています。
この記事では、タグに書くべきことを丁寧に解説し、具体的なコード例を交えながら理解を深めていきます。
ゆっくり一緒に学んでいきましょう！
おねしゃす
<head>タグって何をするところ？
まず、HTMLの構造を思い浮かべてみましょう。HTMLは大きく分けて二つの部分に分かれています。
- <head>タグ … HTMLページの「裏側」の情報を記述するところ。ページの見た目には直接影響しないけれど、ブラウザや検索エンジンに大切な情報を伝えます。
- <body>タグ … 実際にブラウザに表示される部分（見た目やコンテンツ）。見える部分ですね。
HTMLページを支える、見えないけれど大事な部分、それが<head>タグの役割です。
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- ここが<head>タグです -->
</head>
<body>
<!-- ここが<body>タグです -->
<h1>こんにちは！</h1>
</body>
</html>
このように、<head>タグの中にはページの表示には直接関わらない情報が入りますが、
それがページ全体の動作にとても影響を与えます。
<head>タグに何を書けばいいの？
<head>タグには、**メタデータ**やページの設定情報を記述します。これには、ページのタイトル、文字コードの指定、外部ファイル（CSSやJavaScript）のリンク、SEOに関する情報などが含まれます。順番に見ていきましょう。
ページのタイトルを設定する – <title>タグ
<head>タグの中に、まず必ず入れたいのが<title>タグです。
このタグに書かれた内容は、ブラウザのタブに表示されるタイトルとして使われます。
<head>
<title>私の初めてのウェブページ</title>
</head>
例えば、上のように<title>タグを使うと、ブラウザのタブに「私の初めてのウェブページ」と表示されます。
短く、ページの内容を簡潔に表現することがポイントです。
2. ページの文字コードを指定する – <meta charset>
次に設定するのが、ページで使用する文字コードです。
現代のウェブでは、文字コードを「UTF-8」に設定するのが一般的です。
これは、ほとんどの言語で問題なく文字を表示できるようにするためのものです。
<head>
<meta charset="UTF-8">
</head>
このタグを使うことで、特殊な文字や日本語などが正しく表示されます。
3. ページの説明を追加する – <meta name=”description”>
<head>タグの中には、ページの説明を入れることもできます。
検索エンジンがページを表示する際に、この説明文が使われることが多いため、
SEO（検索エンジン最適化）にとってかなり重要です。
<head>
<meta name="description" content="このページは、HTMLのheadタグについて解説しています。">
</head>4. 外部のスタイルシートやスクリプトを読み込む
ページのデザインを指定するCSSや、動きをつけるためのJavaScriptは、headタグの中でリンクを貼ることができます。これにより、外部ファイルを読み込んでページの見た目や動作をコントロールします。
CSSを読み込む場合
<head>
<link rel="stylesheet" href="styles.css">
</head>
JavaScriptを読み込む場合
<head>
<script src="script.js" defer></script>
</head>
<link>タグを使うと外部のスタイルシート（CSS）を、
<script>タグを使うと外部のJavaScriptファイルを読み込めます
。deferはページが完全に読み込まれてからJavaScriptを実行するための属性です。
5. レスポンシブ対応 – <meta name=”viewport”>
スマートフォンやタブレットなど、さまざまな画面サイズに対応するために、
<meta name=”viewport”>タグを追加します。
これによって、ページが異なるデバイスでも正しく表示されるように設定できます。
これを忘れて「レスポンシブ用のCSSを書いてるのに動かない！」ということがよくあるので
ちゃんと書けているか確認しておきましょう。
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
これにより、画面の幅に応じてページが調整され、特にスマホでの閲覧に適した表示になります。
まとめ
<head>タグは一見、見えない部分に思えるかもしれませんが、
ページの動作や検索エンジンとの連携において重要な役割を果たしています。
ページのタイトル、文字コード、説明文、CSSやJavaScriptのリンク、そしてレスポンシブ対応など、
ここで紹介した基本をしっかり押さえておくと、より良いウェブページを作成できるようになります。
HTMLを書くときは<head>タグの中に何を書くべきかを思い出しながら丁寧に書いていきましょうね。
どんな小さな疑問も、少しずつ解決していけば大丈夫です！
あざした
