【HTML】headタグの場所を見つけて意味を理解する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でも見てみます。編集するテーマを選択header.php「header.php」を開いてショートカットキーで<head>をハイライトすれば簡単に<head>と</head>の場所は分かります。<head>と</head>の前後をみると、先に説明したHTML文書の順番で<head>タグがある場所が分かると思います。Advertisementheadタグ内の意味や使う要素は?さて<head>の場所が分かりましたが、<head>タグ内の意味や使うmetaタグ(meta要素)は何があるのかも覚えておきたいと思います。description>を除いて普通は表示されません。descriptionは検索結果のタイトル下に表示されるので見えない部分といっていいのか分からないので。charset="utf-8">head内に置くことでHTML文書をブラウザで表示するときの文字コードの指定です。head内に置く<title>内の文字も対象なので<title>タグの上に文字エンコードは書いてあります。(タイトル名)】<title>タイトル</title>これはページのタイトル部分になります。<title>と</title>の間の文章がタイトルとして検索結果に表示されます。head内のtitleタグは検索エンジンが重要視する部分でもあります。content="....">ページの説明文になる部分です。先ほどの、<title>タグではページのタイトルを検索結果に表示しますが、メタディスクリプションは検索結果の表示でタイトルの下に説明が表示されます。この説明文は検索順位には影響はないですが、検索ユーザーが記事を把握しやすくなります。content="...">スマホやタブレットで表示した時のレスポンシブデザインにするためにviewport設定を<head>内に置いておきます。href="style.css">head内でlink要素を読み込むと外部ファイルを読み込むことが出来ます。スタイルシートへのリンクによく使用されていますが、アイコンなどにも使用できます。場所」で検索すると見かける事が多いアドセンス広告コードを貼り付けるときのScriptタグ。「アドセンスコードは<head>タグ内に貼り付けます」となっていますが細かく言うと<head>の直下ですね。例としてアドセンスコードを出しましたが、これ以外にもhead内でScriptの外部リソースを読み込むときがありますが、このことでやっぱり目にする事が多い「Scriptの読み込みが遅い」みたいな流れから「Scriptは<body>に置くのが良い」ということを多く見る事があります。AdvertisementHTMLタグ内の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タグの場所についても記事を書いているので参考にしてみてください。投稿一覧WordPressとWeb関係のことを趣味的に学んでます。独学なので記事で間違ってることがあればご指摘ください。記事が少しでも誰かの参考になればと思います。2018.10.26WordPressでショートカットキーの便利な使い方があったので使い方と活用する方法について。2018.12.31WordPressのカテゴリー設定で構造を階層化するとサイトのページ情報が分かりやすい構造にできて訪問者にもSEOにもサイトを向上することができます。2019.11.27WordPressテーマをワードプレスにインストールするやり方は一つではなく大きく分けて2種類のやり方があります。2019.06.19Atomは「Mac」「Windows」「Linux」に対応しているのでMacとWindowsの両方にAtomエディタをインストールしてみました。WordPress.。