【HTML】headタグ：意味と使い方・重要性を１分で解説

headタグは、HTMLで作成された文章に関するメタ情報を記述するためのタグです。

ページのタイトルなど、実際にページに表示されることはないものの、ページ全体で保持するデータを定義するためのタグなので重要なタグと言えます。

<!DOCTYPE html>
<html>
  <head>
    <title>タイトル名</title>
  </head>
  <body>
    <!-- ここに本文を記述 -->
  </body>
</html>

このページではheadタグが持つ意味と役割、重要性についてわかりやすく解説します。

このページで学べる内容

headタグの意味と役割
headタグの使い方・書き方
headタグの中に記述するべき内容は？

Webエンジニアを目指す方であれば知らないと恥ずかしい超・基本知識の１つです。是非最後までご覧ください。

HTML：headタグとは？
headタグの使い方・書き方
HTML：headタグの中に記述する内容
Webエンジニアになりたい方は→完全無料のHTMLロードマップ

HTML：headタグとは？

HTMLの<head>タグは、ウェブページのメタデータを定義するための重要な要素です。

メタデータは、ウェブページの情報を表すデータで、ブラウザや検索エンジンに対してそのページの概要や設定を伝えます。

具体的には "ページのタイトル" や "言語" 、"ページを書いた人の情報" などが含まれます。

HTMLの全体構成は以下の通り、ブラウザに表示されない「文書のメタデータ」を示す部分と、実際のコンテンツを示すbody部分に分かれます。

<!DOCTYPE html>
<html>
  <head>
<!-- ページ全体の情報 -->
  </head>  
  <body>
    <!-- ページコンテンツ -->
  </body>
</html>

headタグは、このページ全体の情報のうち、読む人の目に入るコンテンツではなく、ページ全体の情報（前提となる情報）を定義していく役割を持ちます。

headタグの使い方・書き方

<!DOCTYPE html>
<html>
  <head>
<!-- ページ全体の情報 -->
  </head>  
  <body>
    <!-- ページコンテンツ -->
  </body>
</html>

headタグは通常、htmlタグの後 / bodyタグの前に記述します。

参考　HTMLの書き方：基本ルール

HTML：headタグの中に記述する内容

以下に一般的な＜head＞タグの使用例を記載します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ウェブページのタイトル</title>
  <meta name="description" content="このページの簡潔な説明">
  <meta name="keywords" content="キーワード1, キーワード2, キーワード3">
  <link rel="stylesheet" href="styles.css">
  <link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
  <!-- ここにページのコンテンツが入ります -->
</body>
</html>

ここでは、一般的なWebページであれば基本的に埋め込まれている情報を大きく３つに分類して解説していきます。

覚えておきたい「headタグ内に記述する３つのタグ」

titleタグ ⇒必須タグ（超・重要）
metaタグ
linkタグ

titleタグ（タイトルタグ）

titleタグは、その名の通りタイトルを示すタグです。別の言葉言えば、ページの「題名」を定義するタグです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <title>ウェブページのタイトル</title>
</head>
<body>
  <!-- ここにページのコンテンツが入ります -->
</body>
</html>

titleタグは、必須タグなので必ずページ内に一つ設置する必要があります。

使い方は一般的なタグと同様です。属性などは特に指定する必要はありません。このtitleタグで囲ったテキストはブラウザのタブに表示されるようになります。

また、ページ全体の内容を一言で表した内容として認識されるため、Googleの検索エンジンがページの内容を把握するためにも用いられるようです。これらを踏まえ、titleタグは「headタグ内に必ず１つだけ設置する」ようにしましょう。

metaタグ（メタタグ）

以下は、一般的なHTMLドキュメントの<head>タグ内で使用される一連のmetaタグのサンプルコードです。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="This is a sample meta description.">
    <meta name="keywords" content="sample,meta,tags,html">
    <meta name="author" content="Your Name">
    <title>Sample HTML Document</title>
  </head>
  <body>
    <!-- HTML document body goes here -->
  </body>
</html>

<meta charset="UTF-8">
このメタタグは、HTMLドキュメントのエンコーディング（文字コード）を指定するために使用されます。ここではUTF-8が指定されています。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
このメタタグは、デバイスのビューポートの設定を指定するために使用されます。ここでは、デバイスの幅をビューポートの幅と同じにし、初期スケールを1.0に設定しています。これにより、デバイスの画面に最適な表示が可能になります。
<meta name="description" content="This is a sample meta description.">
このメタタグは、HTMLドキュメントの説明を提供するために使用されます。検索エンジンは、この説明を使用して、HTMLドキュメントの内容を要約するために使用します。
<meta name="keywords" content="sample,meta,tags,html">
このメタタグは、HTMLドキュメントのキーワードを提供するために使用されます。これらのキーワードは、検索エンジンがHTMLドキュメントをインデックス化する際に使用されます。ここでは、サンプル、メタ、タグ、およびHTMLがキーワードとして指定されています。
<meta name="author" content="Your Name">
このメタタグは、HTMLドキュメントの著者を提供するために使用されます。これは、ドキュメントが公開された場合に、著者の識別に役立ちます。

参考　HTMLタグの属性

linkタグ

HTMLの<link>タグは、HTMLドキュメント内で外部ファイル（CSSファイルやファビコンなど）を読み込むために使用されます。以下は一般的な<link>タグのサンプルコードです。

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
    <link rel="icon" type="image/png" href="favicon.png">
    <title>Sample HTML Document</title>
  </head>
  <body>
    <!-- HTML document body goes here -->
  </body>
</html>

<link rel="stylesheet" href="style.css">
この<link>タグは、HTMLドキュメントにスタイルシートを適用するために使用されます。href属性には、スタイルシートファイルへのパスが指定されます。rel属性には、このリンクがHTMLドキュメントとスタイルシートファイルの間の関係を定義するために使用されます。ここでは、rel="stylesheet"が指定されています。

関連　CSSを読み込む方法

<link rel="icon" type="image/png" href="favicon.png">
この<link>タグは、HTMLドキュメントにファビコンを追加するために使用されます。
ファビコンは、Webサイトのタブやブックマークバーなど、ブラウザの各種場所に表示される小さなアイコンです。href属性には、ファビコンへのパスが指定されます。type属性には、ファビコンのMIMEタイプが指定されます。ここでは、PNG形式のファビコンであることを示すため、type="image/png"が指定されています。

headタグの意味と重要性

ウェブページのタイトル
<head>タグの中には、<title>タグを使用してページのタイトルを指定します。タイトルはブラウザのタブやブックマーク、検索エンジンの結果ページで表示されるため、ユーザーがページの内容を理解しやすくする役割があります。
キャラクターセットの指定
<head>タグ内で、<meta charset="UTF-8">のように指定することで、ページで使用される文字のエンコーディングを設定できます。これにより、ブラウザが正しい文字セットでコンテンツを表示できるようになります。
メタタグによるSEO対策
検索エンジン最適化（SEO）に重要な役割を果たすメタタグも<head>タグ内に配置されます。これには、<meta name="description">タグでページの説明を指定したり、<meta name="keywords">タグで関連キーワードを設定したりできます。
リンクタグによる外部リソースの参照
<head>タグ内で、<link>タグを使用してCSSファイルやファビコン（ブラウザのタブに表示される小さなアイコン）などの外部リソースを参照できます。これにより、ページのデザインや構造を制御することができます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ウェブページのタイトル</title>
  <meta name="description" content="このページの簡潔な説明">
  <meta name="keywords" content="キーワード1, キーワード2, キーワード3">
  <link rel="stylesheet" href="styles.css">
  <link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
  <!-- ここにページのコンテンツが入ります -->
</body>
</html>