どんなタグ？
メタデータ（ドキュメント全般の情報）を
包む要素
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8″/>
<meta name="viewport" content="width=device-width, initial-scale=1.0″ />
<title>Shibajuku公式サイト</title>
</head>
<body>
<h1>headサンプル</h1>
</body>
</html>head 要素は、メタデータ（ドキュメント全般の情報）を<head> 〜 </head> タグで包むことで宣言することができます。
記載する箇所はhtmlタグの後、bodyタグの前になります。
head要素で包むメタデータに関しては、対象ドキュメントに関する著者情報や説明文、タイトル、キーワード、スタイルシート等、数多くあります。
また、<title> 〜 </title>で指定するタイトル箇所以外の情報は、基本的にブラウザ上には表示されません。
タイトル箇所については、ブラウザのタイトルバーに表示されます。
- どのカテゴリに属しているの？
- headタグはどこのカテゴリにも属していないタグです。
- 梱包できるタグは？
- headタグに梱包できる要素（コンテンツ・モデル）は、メタデータ・コンテンツ※<title>要素を１つ内包しなければならない。ただし、iframe要素のsrcdoc属性に指定したドキュメントの場合や、より高いレベルのプロトコルにタイトルがある場合は、title要素を内包しなくてよい。 です。
ブラウザには表示されないけど、重要な情報を包むタグです。
どうやって使うの？
metaタグなどドキュメント情報を、
<head> タグで包みます。
headタグは<head> 〜 </head> の中に、metaタグなどドキュメント情報を囲んで使用します。
headタグの中にドキュメント情報を記載することによって、検索エンジンやブラウザに対象ページの情報を正確に伝えることができます。
- 使い方
-
<html> <head> titleタグ、metaタグ、linkタグなどドキュメント情報 </head> <body></body> </html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8″/>
<meta name="viewport" content="width=device-width, initial-scale=1.0″ />
<title>Shibajuku公式サイト</title>
</head>
<body>
<h1>headサンプル</h1>
</body>
</html>https://codehero.shibajuku.net/html/head/sample01/
- どこでも使えるの？
-
headタグは
<html>要素の最初の子要素 として使えます。 - 気をつけることは？
-
終了タグ
</head>は省略可能ですが、直後に空白文字かコメントがある場合は、省略できません。
headタグ内によく記述するタグは、titleタグ、metaタグ、linkタグの３つです。
使える属性は？
グローバル属性のみ使えます。
<haed> タグには、どの要素にでも使えるグローバル属性のみ使えます。
以前はprofile属性が使えましたがHTML5からは、グローバル属性のみ使えます。
使えるのはグローバル属性のみです。
サンプルが見たい
<head>タグを使ったサンプルを
いくつか紹介。
<head> タグを使ったサンプルを紹介します。
基本的な<head>タグのサンプル
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8″/>
<meta name="viewport" content="width=device-width, initial-scale=1.0″ />
<title>Shibajuku公式サイト</title>
</head>
<body>
<h1>headサンプル</h1>
</body>
</html>https://codehero.shibajuku.net/html/head/sample01/
スタイルシートを読み込ませる際の<head>タグのサンプル
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8″/>
<meta name="viewport" content="width=device-width, initial-scale=1.0″ />
<link rel="stylesheet" href="/style.css">
<title>Shibajuku公式サイト</title>
</head>
<body>
<h1>headサンプル</h1>
</body>
</html>https://codehero.shibajuku.net/html/head/sample02/
サイト訪問者に直接は見えないけど重要なタグです
デフォルトスタイルは？
非表示です。
一般的なブラウザで head要素を表示した場合、下記のCSSと同等のスタイルが適用されています。
head { display: none; }とくに表示に影響することはありません。
対応ブラウザは？
基本的にどのブラウザでも大丈夫。
<head>タグは主に以下のブラウザが対応しています。
headタグが省略された場合、HTML5互換のブラウザではhead要素を自動的に生成します。
- Internet Explorar
- Internet Explorar 有り
- Edge
- Edge 有り
- Google Chrome
- Google Chrome 有り
- Firefox
- Firefox 有り
- Safari
- Safari 有り
- Opera
- Opera 有り
どのブラウザでも問題ありません。
