headタグは、HTMLで作成された文章に関するメタ情報を記述するためのタグです。
ページのタイトルなど、実際にページに表示されることはないものの、ページ全体で保持するデータを定義するためのタグなので重要なタグと言えます。
<!DOCTYPE html>
<html>
<head>
<title>タイトル名</title>
</head>
<body>
<!-- ここに本文を記述 -->
</body>
</html>
このページではheadタグが持つ意味と役割、重要性についてわかりやすく解説します。
Webエンジニアを目指す方であれば知らないと恥ずかしい超・基本知識の１つです。是非最後までご覧ください。
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：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ページであれば基本的に埋め込まれている情報を大きく３つに分類して解説していきます。
- 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>
参考 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"が指定されています。
参考 MIMEタイプとは？
Webエンジニアになりたい方は→完全無料のHTMLロードマップ
Webエンジニアを目指す方にとって避けては通れないベースとなる超・重要知識の１つがHTMLです。
以下のページでは、そもそもHTMLって何？何のために学習するの？という疑問に回答しつつ、HTMLを学習するためのロードマップ（全20記事）を整理しています。
以下のページの内容をマスターすればHTMLの基本はOK。Webエンジニアを目指す方に、完全無料でかつ短時間で理解できるようにまとめましたので是非ご覧ください。
