ZeroPlus Media > Web制作 > HTML/CSS > 【HTML】headタグとは？初心者でも分かる使い方を紹介

【HTML】headタグとは？初心者でも分かる使い方を紹介

HTML/CSS

2022/08/12

2023/06/02

HTMLで作成したファイルはブラウザで確認することができます。しかしそのファイルに記載した裏側の情報（メタ情報といいます）は、「デベロッパーツール」を使わなければ確認することができません。

メタ情報はheadタグの中に記述します。

見た目には見えない情報であっても、サイト作成において必須の情報になります。そのため、headタグのはたらきと書き方を学ぶことはとても重要です。

また、headタグではlinkタグを使って外部ファイルを読み込んだりファビコンを設定したりすることができます。

この記事では、「HTMLのheadタグの書き方」について解説していきます。

この記事のゴールは「HTMLのheadタグの基本的な書き方について理解し、必要なメタタグを記述できるようになること」です。

いっしょに学習していきましょう。

この記事で身につく内容

HTMLのheadタグの書き方
headタグ内でよく使われるタグ

プログラミング学習でこのような経験はありませんか？

目標に向けて何を学べば良いかわからない
調べても解決策が見つからない
現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

なんでも相談できる専属メンター
いつでも技術相談ができるプロ講師
元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

headタグとは：文書のメタ情報を記述するタグ
- headタグの内容を確認してみよう
headタグでよく使うメタタグ・リンクタグ
headタグの中にmetaタグを記述してみよう
headタグを記述する意味・どんな内容を記述すればいい？
まとめ

headタグとは：文書のメタ情報を記述するタグ

HTMLで作成されたテキストやコンテンツは、ChromeやSafariなどのブラウザで確認することができます。そういった画面上で確認できるものは、HTMLでいうとbodyタグの中に記述されたものが出力されています。

headタグに記述されている情報は、通常画面上で確認することができません。デベロッパーツールを使うと、そのようなWebサイトの裏側の情報を確認することができます。

headタグはbodyタグの上に記述する形になります。以下が基本書式です。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <!-- ここに記述する -->
  </head>
  <body>
  </body>
</html>

headタグの中には、さまざまな目に見えない情報を記述することができます。

headタグの中に記述できる情報例（メタタグ・リンクタグ）

文字コード：HTMLファイルがどの文字コードで保存されているのか指定する。文字化け防止。HTML5ではUTF-8が推奨。
viewport：Webサイトのページが表示される画面の表示領域
title：Webページのタイトル
description：Webページの説明
format-detection：電話番号の自動リンク機能
favicon（ファビコン）: ブラウザのタブに表示されるアイコン
OGP設定：SNSなどでシェアされたときに表示される情報

上記の他にもさまざまな情報をheadタグの中に記述することができます。

headタグの内容を確認してみよう

例えば下のようなHTMLにheadタグを記述してみます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  Hello, World!

</body>
</html>

出力結果

Hello, World!

ブラウザ上ではHello, World! だけ出力されていますが、headタグの中身、例えば<meta charset=”UTF-8”>は出力されていません。

ファイルの構造は下の図のようなイメージです。

<!DOCTYPE html>

<!DOCTYPE html>は、ファイルがHTMLであることを宣言するものです。HTMLのいわゆるおまじない・お約束みたいなものと思ってだいじょうぶです。

<head>～</head>の中の記述は、いわゆるメタタグと呼ばれるものを記述したり、リンクタグを記述してファイルのパス情報などを記載してファイルを読み込んだりなどできます。

ブラウザでは通常見られないさまざまな情報を記述するエリアとなります。メタタグを含めたHTMLのソースコードは、Chromeのデベロッパーツールで確認することができます。

headタグでよく使うメタタグ・リンクタグ

メタタグ・リンクタグを含め、headタグ内でよく使われるタグについて紹介します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>ページタイトル</title>
  <meta name="description" content="ページの説明" />
  <meta name="format-detection" content="telephone=no" />
  <link rel="icon" href="favicon.png" type="image/png" />
  <link rel="icon" href="favicon.svg" type="image/svg+xml" />
  <link rel="apple-touch-icon" href="webclip.png" />
  <meta property="og:site_name" content="ページタイトル" />
  <meta property="og:url" content="URL" />
  <meta property="og:type" content="website or article" />
  <meta property="og:title" content="ページのタイトル" />
  <meta property="og:description" content="ページの説明" />
  <meta property="og:image" content="URL" />
  <meta property="og:locale" content="ja_JP" />
  <meta property="fb:app_id" content="AppID">
  <meta name="twitter:card" content="summary_large_image or summary" />
  <meta name="twitter:site" content="@twitter_id" />
  <meta name="twitter:description" content="ページの説明" />
  <meta name="twitter:image:src" content="URL" />
</head>
<body>
  Hello, World!
</body>
</html>

上記コードを検証ツールで確認すると次のように表示されます。

実際にブラウザには表示されていませんが、記述した情報がきちんと裏に反映されているのがわかります。

以下にいくつかのメタタグとリンクタグを紹介します。

charset（文字コード）：文字コードの指定と文字化け防止

charsetは、このHTMLファイルがどの文字コードで保存されているのか指定する属性で、文字化けを防ぎます。HTML5ではUTF-8が推奨されています。

<meta charset="utf-8">

viewport：Webサイトをレスポンシブ対応するビューポート

viewportは、Webサイトのページが表示される画面の表示領域です。ページを表示するときにどの大きさで表示するかを指定できます。

<meta name="viewport" content="width=device-width,initial-scale=1">

PCとスマートフォンでは画面幅が違うため、ページが小さく表示されてしまったりしますが、viewportを記述することでその問題を解消します。

title：Webページのタイトル指定するタイトルタグ

titleタグは、Webページのタイトルを指定することができます。

<title>ZeroPlus Media</title>

titleタグに設定した内容は、検索エンジンの検索結果、ページを開いているときのブラウザタブ、ページをブックマークした際のデフォルトの名称に反映されます。

description：Webページの説明文を指定するディスクリプション

descriptionは、Webページの説明、概要を設定することができます。記述した文章は検索結果でタイトルの下に表示されます。

<meta
  name="description"
  content="ZeroPlus Mediaは完全0からWebデザイン/プログラミングを始める方向けの学習メディアです。フリーランス特化型プログラミングスクールZeroPlusが運営しています。"
/>

format-detection：電話番号の自動リンク機能の指定

format-detectionは、電話番号の自動リンク機能を制御することができる、スマートフォン向けの設定です。

<meta name="format-detection" content="telephone=no" />

スマートフォンでページを表示中に、Webページ内に電話番号のような記述があると自動的にリンクします。ユーザーが誤ってそのまま架電してしまわないようにするために、この機能で無効化しておきましょう。

この記述をmetaタグに記述すると電話番号にリンクが付くのを防ぐことができます。

特定の電話番号の記述にリンクを付けたい場合は、上記の自動リンク機能を無効化する記述をmetaタグに記述したうえで、下記のように記述します。

<a href="tel:0120123456">0120-123-456</a>

<a href="tel: 電話番号"></a>とすることで、電話番号の自動リンク機能を有効化することができます。

上記のほかにも、ファビコンを設定するタグなどのさまざまなタグがあります。それらのタグについては、下記の記事で詳しく解説しています。

必要なmetaタグを押さえよう

linkタグ：外部ファイル（スタイルシートやスクリプト）を読み込む

rel属性はそのページ、ファイルとの関係性を指定することができます。

下記の場合、外部スタイルシートを参照しているので、この文書から見て「外部の文書（この場合はstyle.css)」との関係性を指定しています。

<link rel="stylesheet" href="css/style.css" />

また、headタグではscriptタグでJavaScriptファイルを読み込むことができます。

<script src="scripts/main.js" ></script>

linkタグでファビコンを設定する

linkタグにrel属性で「icon」を適用するとファビコンを設定することができます。

下記の場合、href属性に表示させたいファビコンの画像、type属性にファイルの種類、sizes属性に表示させるファビコンのサイズを指定しています。

<link rel="icon" href="favicon.png" type="image/png" sizes="16x16"/>

sizes属性の値は「横幅x高さ」のピクセル数で指定します。

linkタグは外部ファイル読み込みやファビコンの設定のほかにも、記述次第でさまざまな情報を載せることができます。

linkタグに関しては、下記の記事で詳しく解説しています。

【HTML】別ファイルを読み込むlinkタグとは？属性についても解説

headタグの中にmetaタグを記述してみよう

headタグ・メタタグの基礎知識を踏まえ、以下のHTMLにメタタグを記述してみましょう。

記述するメタタグの条件は次のとおりです。

文字コード: UTF-8
viewport: content="width=device-width,initial-scale=1"
タイトル: メタタグの記述
概要: メタタグの記述練習です。ここに説明文を記述します。
電話番号の自動リンク機能あり
SNSにシェアはしない
ファビコンの設定はしない

<!DOCTYPE html>
<html lang="ja">
<head>

</head>
<body>
  Hello, World!

</body>
</html>

何が必要で何が不要なメタタグか判断して記述できたでしょうか？

以下は、上記条件に当てはめたメタタグの記述になります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>メタタグの記述</title>
  <meta name="description" content="メタタグの記述練習です。ここに説明文を記述します。">
  <meta name="format-detection" content="telephone=no">

</head>
<body>
  Hello, World!

</body>
</html>