SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

HTMLのheadタグとは？属性・使い方・ブラウザー互換性と活用例の解説動画

再生時間 8:10動画を別のタブで開く ↗
動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

  1. 0:00こんにちは。
  2. 0:00エイチティーエムエル、リファレンス解説です。
  3. 0:03エイチティーエムエルタグ編の六十九本目は、ヘッド、タグです。
  4. 0:08このタグは、ページそのものについての情報をまとめる場所です。
  5. 0:12たとえば、ブラウザーのタブに表示されるタイトルや、文字コード、シーエスエスの読み込み先などがここに入ります。
  6. 0:19変わっているのは、ここに書いた内容のほとんどが、画面にはそのまま表示されないことです。
  7. 0:25見出しや文章といった、読み手に見せる内容はボディに入れ、ヘッドはそれを支える裏側の設定を担当します。
  8. 0:32この見えないけれど大切な役割を、今回しっかり押さえましょう。
  9. 0:36地味に見えるかもしれませんが、ページの土台を決める重要な部分なので、最初に全体像をつかんでおくことが上達への近道になります。
  10. 0:45基本の書き方を確認します。
  11. 0:47ヘッドは、開始タグと終了タグを両方書く、入れ物型の要素です。
  12. 0:51置き場所は決まっていて、エイチティーエムエル要素の直下で、ボディよりも前に置きます。
  13. 0:57画面の例のように、ページ全体はエイチティーエムエルで囲み、その中にヘッドとボディを並べるのが、
  14. 1:02すべてのページに共通する骨組みです。
  15. 1:07この教材では、開始タグと終了タグを省略せず、きちんと明示します。
  16. 1:12まずはこの位置関係を覚えることが第一歩です。
  17. 1:15ヘッドの中身は次から順番に見ていきます。
  18. 1:18この骨組みは、どんなに大きなサイトでも変わりません。
  19. 1:22小さなページから、同じ形で書き始める習慣を付けておきましょう。
  20. 1:27ヘッドの中に入れられるものを整理します。
  21. 1:30代表は五つです。
  22. 1:31ページの名前を示すタイトル、文字コードや説明文を伝えるメタ、外部のシーエスエスやアイコンとの関係を示すリンク、
  23. 1:37ページ内にシーエスエスを書くスタイル、そしてスクリプトを読み込むスクリプトです。
  24. 1:44このほか、相対ユーアールエルの基準を示すベースなども置けます。
  25. 1:48共通点は、どれも本文そのものではなく、本文の表示や読み込みを助ける情報だということです。
  26. 1:54見出しや段落のような、画面に見せる要素はヘッドには入れません。
  27. 1:59つまりヘッドは、ページの名刺や説明書のような存在です。
  28. 2:02中身をひとつずつ理解すれば、読み込みの仕組みも自然と見えてきます。
  29. 2:07中でも重要なタイトルについて見ます。
  30. 2:10タイトル要素はヘッドの中に一つ置き、そのページの名前を書きます。
  31. 2:14この名前は、ブラウザーのタブや、検索結果の一覧、お気に入りの名前として使われます。
  32. 2:20つまり、ページを開く前に読み手が最初に目にする情報です。
  33. 2:24注意したいのは、本文の見出しであるエイチワンとは別物だということです。
  34. 2:28役割が近いので同じ文言になることも多いですが、置き場所も用途も違います。
  35. 2:33また、すべてのページに同じタイトルを複製するのは避け、ページごとに内容が伝わる名前を付けましょう。
  36. 2:40短くても、内容がひと目で分かる名前を目指してください。
  37. 2:44検索結果でほかのページと並んだときの違いが、ここで生まれます。
  38. 2:48次にメタタグです。
  39. 2:50メタは、属性を使ってさまざまな情報を伝える要素で、終了タグはありません。
  40. 2:55まず、キャラクターセットでユーティーエフ八を指定すると、文字コードが明確になり、
  41. 2:59文字化けを防げます。
  42. 3:03これはヘッドのなるべく早い位置に書くのが基本です。
  43. 3:06次に、ディスクリプションはページの短い説明で、検索結果に表示される候補になります。
  44. 3:13そしてビューポートは、スマートフォンで画面幅に合わせて表示するための土台です。
  45. 3:18この三つは、今のサイト作りではほぼ定番の組み合わせとして覚えておきましょう。
  46. 3:24特にビューポートを忘れると、スマートフォンで文字が極端に小さく表示されることがあります。
  47. 3:31公開前の確認項目に入れておきましょう。
  48. 3:34見た目の準備もヘッドの仕事です。
  49. 3:36リンク要素を使うと、外部のシーエスエスファイルや、タブに表示される小さなアイコンなど、
  50. 3:41ほかのリソースとの関係を宣言できます。
  51. 3:46ページ内の移動リンクを作るエー要素とは別物なので、混同しないでください。
  52. 3:51一方、スタイル要素は、そのページの中に直接シーエスエスを書くためのものです。
  53. 3:57ちょっとした試行には便利ですが、複数ページで共通する見た目は外部シーエスエスに分けた方が管理しやすくなります。
  54. 4:05読み込みの指定はヘッド、実際の文章や画像はボディ、と分けて考えましょう。
  55. 4:11なお、スクリプトの読み込みをヘッドに置く場合は、表示の速さへの影響にも目を向けると、
  56. 4:16より実践的な判断ができるようになります。
  57. 4:20記事の活用事例を読み解きます。
  58. 4:23例では、ヘッドの中に、文字コードを指定するメタ、ページ名のタイトル、そして説明文のメタが並んでいます。
  59. 4:31たった数行ですが、文字化けの防止、タブでの識別、検索結果での紹介という、
  60. 4:35ページの第一印象がこの中で決まっています。
  61. 4:40ポイントは、三つとも画面の本文には現れないのに、読み手がページへたどり着くまでの案内になっていることです。
  62. 4:48試すときは、練習用ファイルのヘッドにこの形を写し、保存して再読み込みし、
  63. 4:53タブの表示と、開発者ツールのエレメンツで入れ子を確認してください。
  64. 4:59例中の文章は説明用のものです。
  65. 5:01自分のページでは、実際の内容に合わせてタイトルと説明文を必ず書き換えてください。
  66. 5:07属性について確認します。
  67. 5:09ヘッドには、この要素だけの専用の属性はありません。
  68. 5:13覚えるべき必須の属性もないので、その点は気楽です。
  69. 5:17必要があれば、どの要素にも使える共通の属性を使えますが、実際の制作でヘッド自体に属性を付ける場面はほとんどありません。
  70. 5:25むしろ大切なのは、中に入るメタやリンクが持つ属性と混同しないことです。
  71. 5:30キャラクターセットやコンテンツといった属性は、あくまで子要素側の指定です。
  72. 5:36データ属性に秘密情報を置かない、という注意もあわせて覚えておきましょう。
  73. 5:41属性が少ない分、ヘッドで大切になるのは、中に入れる要素の選び方と書き方です。
  74. 5:46そちらに意識を向けるのが上達のコツです。
  75. 5:49初心者が最もつまずく、ヘッダーとの違いを整理します。
  76. 5:53名前はとても似ていますが、役割ははっきり違います。
  77. 5:57ヘッドは画面に表示されない設定情報の入れ物で、ボディの前に置きます。
  78. 6:02一方、ヘッダーはロゴやサイト名など、画面に実際に見える導入部分をまとめる要素で、
  79. 6:06ボディの中に書きます。
  80. 6:10綴りを読み比べると、ヘッドはエイチ、イー、エー、ディー。
  81. 6:14ヘッダーはそこにイー、アールが付きます。
  82. 6:18迷ったら、その情報が画面に見えるかどうかで判断してください。
  83. 6:22見えるものはボディ側、見えない設定はヘッドです。
  84. 6:26この区別がつくだけで、コードを読むときの迷いが大きく減ります。
  85. 6:31ファイルを編集する前に、まず場所を確認する癖を付けましょう。
  86. 6:35ブラウザー互換性を確認します。
  87. 6:37記事が参照するエムディーエヌのデータでは、ヘッド要素は、クロームが一以降、
  88. 6:44エッジが十二以降、ファイアフォックスが一以降、サファリが一以降と、主要ブラウザーで非常に古くから対応しています。
  89. 6:51そのため、ヘッド自体が使えない環境を心配する必要はまずありません。
  90. 6:56ただし、中に入れる新しい要素や属性は話が別で、それぞれ対応状況を確認するのが安全です。
  91. 7:03仕上げに、タイトルや説明文がページの目的に合っているか、狭い画面でも表示が崩れていないかもあわせて点検しましょう。
  92. 7:11新しい指定を入れるときほど、対象のブラウザーで実際に開いて確かめる習慣が役立ちます。
  93. 7:18記録と実機確認を組み合わせましょう。
  94. 7:20最後に、よくある間違いとまとめです。
  95. 7:23間違いの代表は三つです。
  96. 7:25一つ目は、見出しや文章など、画面に見せる内容をヘッドに入れてしまうこと。
  97. 7:31二つ目は、すべてのページに同じタイトルや説明文を複製すること。
  98. 7:36三つ目は、文字コードの指定を忘れて文字化けさせることです。
  99. 7:41まとめます。
  100. 7:42ヘッドは、タイトル、文字コード、説明文、シーエスエスの読み込みなど、本文の表示を支える情報をまとめる場所です。
  101. 7:51設定はヘッド、内容はボディ。
  102. 7:53この分け方を身につけて、自分のページのヘッドを見直してみてください。
  103. 7:59お疲れさまでした。
  104. 8:00まずは今あるページのヘッドを開いて、タイトルと文字コードが入っているかを点検するところから始めてみてください。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

headタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。タイトルやCSSの読み込みなど、本文の表示を支える情報をまとめます。

解説記事・サンプルコードを読む：HTMLのheadタグとは？属性・使い方・ブラウザー互換性と活用例 →