HTMLのheadタグ内ではブラウザに情報を送信したり指示を出したりするときに、headタグ内に必要なタグを使って書いていきます。
私が初心者の頃は、「ブラウザに指示を出す事が出来るのがheadなんだ」くらいにしか理解してなかったんですが、HTMLの読み込み方やhead内に書くScriptをheadではなくbodyにする意味が分かってからheadタグ内を見ると今までよりも理解できるようになりました。
なのでheadの場所と意味を理解してしまえば、分からないことを検索した時の情報が今まで以上に頭に入ってくるようになるので、少しでも参考になればと思い説明していきます。
HTMLで使うheadタグの場所や意味
まずは下記画像のHTML文書で開始タグの<head>と終了タグの</head>の場所が、どの位置に置いてあるか見ておきます。
HTMLで使う<head>タグの場所は<html>の下に位置しています。
そして終了タグの</head>は<body>の上に位置してます。
これはHTML文書を見たときのheadタグの場所として覚えておきます。
では<head>タグの場所をWordPressでも見てみます。
headタグの場所
WordPressで<head>と</head>のタグの場所までの進み方と見つけ方
- 外観
- テーマ編集
- 編集するテーマを選択
- header.php
「header.php」を開いてショートカットキーで<head>をハイライトすれば簡単に<head>と</head>の場所は分かります。
そして<head>と</head>の前後をみると、先に説明したHTML文書の順番で<head>タグがある場所が分かると思います。
headタグ内の意味や使う要素は？
さて<head>の場所が分かりましたが、<head>タグ内の意味や使うmetaタグ(meta要素)は何があるのかも覚えておきたいと思います。
<head>タグ内は訪問者に見えない部分でブラウザに情報を送信する役割をしてる部分
<head>タグ内の中は<title>タグとmeta description>を除いて普通は表示されません。
<title>はブラウザのタイトルバーに、meta descriptionは検索結果のタイトル下に表示されるので見えない部分といっていいのか分からないので。
そんな<head>タグ内をいくつか挙げると
【文字のエンコード】
<meta charset="utf-8">
head内に置くことでHTML文書をブラウザで表示するときの文字コードの指定です。
head内に置く<title>内の文字も対象なので<title>タグの上に文字エンコードは書いてあります。
【title (タイトル名)】
<title>タイトル</title>
これはページのタイトル部分になります。
<title>と</title>の間の文章がタイトルとして検索結果に表示されます。
head内のtitleタグは検索エンジンが重要視する部分でもあります。
【メタディスクリプション】
<meta name="description" content="....">
ページの説明文になる部分です。
先ほどの、<title>タグではページのタイトルを検索結果に表示しますが、メタディスクリプションは検索結果の表示でタイトルの下に説明が表示されます。
この説明文は検索順位には影響はないですが、検索ユーザーが記事を把握しやすくなります。
【viewport設定】
<meta name="viewport" content="...">
スマホやタブレットで表示した時のレスポンシブデザインにするためにviewport設定を<head>内に置いておきます。
PC、スマホ、タブレットで見るときの画面サイズはどれも違うので、画面サイズに合わせた表示ができるようにviewportの記述が<head>内には必要です。
HTMLの「viewport」とは設定をどのようにすればいいのか覚える
【link (stylesheetなどなど)】
<link rel="stylesheet" href="style.css">
head内でlink要素を読み込むと外部ファイルからCSSを読み込むことが出来ます。
スタイルシートへのリンクによく使用されていますが、アイコンなどにも使用できます。
【Script (headタグ内に置く必要はない)】
<script src="mihon-js-file.js>....</script>
「head タグ 場所」で検索すると見かける事が多いアドセンス広告コードを貼り付けるときのScriptタグ。
「アドセンスコードは<head>タグ内に貼り付けます」となっていますが細かく言うと<head>の直下ですね。
例としてアドセンスコードを出しましたが、これ以外にもhead内でScriptの外部リソースを読み込むときがありますが、このことでやっぱり目にする事が多い「Scriptの読み込みが遅い」みたいな流れから「Scriptは</body>直上に置くのが良い」ということを多く見る事があります。
HTMLタグ内のScript読み込み位置は？
head内で使用するScriptについては、検索したサイトで少し読んだことがあるくらいだったので、headタグに関わるHTMLタグ内の読み込み方も覚えて意味を理解しておこうと思います。
ブラウザはHTMLを上から順番に読み込んでいきます。
2回目の訪問からはキャッシュが効くので早めに表示されますが、新規ユーザーを考えた場合にそれだといけない気がします。
今回は、読み込みが上から順番なんだという事が重要になります。
headでScriptを読み込むと何故よくないのか？
Scriptが<head>内にあって読み込んだ場合、HTMLは上から順番に読み込むためScriptを発見した時点で一度、HTMLの読み込みを中止してScriptタグの評価を開始することになります。
読み込みがhead内で止まってしまうんですね。
head内で使う<title>タグや<link>タグには重要なタグばかりなので、その途中でScriptによってhead内の読み込みが終わるまで止まってると、その下に位置してる<body>でページの表示が遅くなります。
body内はページに表示される部分です。
Scriptタグはbodyの閉じタグ前に書く
それなので、Scriptはheadの読み込みに影響がないようにとか、ページ表示速度が遅くならないように</body>の直前とか直上といわれる位置に配置しておくと良いという意味が理解できます。
そもそも、Scriptタグを置く場所は<head>と</head>ではなくても<body>と</body>内でも大丈夫なのです。
まとめ
headタグの場所を見つけるだけではなくて、HTMLのheadタグの役割や意味、そしてheadタグが読み込まれる順番も分かると、重いタグをheadタグ内で読み込まないようにする理由も理解することができたと思います。
今回のheadタグの場所や意味を理解するときに登場してくれたbodyタグの場所についても記事を書いているので参考にしてみてください。
