HTMLの head と header タグの意味と違いを理解しよう！

HTMLのタグには、<head> と<header>という非常に似ている名前のタグが存在します。名前は似ていますが、意味と役割は全く違うのできちんと区別しましょう。

結論から言えば、<head>はブラウザのため、<header>はユーザーのためのものです。フロントエンドエンジニアの面接でも、よく聞かれる項目です。

Contents

HTMLの<head>の意味と使用方法
HTMLの<header> の意味と使用方法

HTMLの<head>の意味と使用方法

まず、<head>内のコンテンツはページに表示されませんので、ここに追加する情報というのは、WEBページを訪問してきたユーザーのためではなく、HTMLのメタデータを記述する場所です。

<html>と<body>タグの間に配置します。<body>の外です。
基本的に<head>内には、メタデータを設定します。例えば、以下のように。

<html>
 <head>
  <meta charset="utf-8">
  <title>HTMLの head と header タグの意味と違いを理解しよう！</title>
  <meta name="description" content="ページの内容を要約した文章">
  <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
 <body>
  ...省略
 </body>
</html>

よく使用される<head>内に記載するタグをいくつか説明します。

キャラクターエンコーディングを指定する<meta charset=”utf-8″>

文書のキャラクターエンコーディングを指定している。utf-8とは、多くの言語に対応しているのキャラクターセットのパッケージのようなものなので、そのページが英語でも、日本語でも、フランス語でも、きちんと表示することができます。

SEOで重要なページのタイトル<title></title>

ブラウザのタブや、検索エンジンの検索結果画面や、ユーザーの利用するブラウザのブックマーク欄に使用されます。
SEOの観点からも重要なタグとされ、ページのキーワードを含めるべきとされています。分かりやすく書くことは大切ですが、短ければ良いというわけではありません。

ページの題名は55-60文字が良いとされいます。それより長くても、検索結果に表示されないからです、また、ターゲットキーワードをページタイトルの先頭の方に配置させるのが良いとされています。

メタディスクリプション<meta name=”description” content=”ページの内容を要約した文章”>

ページの内容を要約した文章を書きます。自分のサイトのページには表示されませんが、検索結果のタイトルの下に記載されます。スペースも限られていることから、検索結果をみるユーザーに分かりやすいように、端的に書くことがポイントです。

モバイル端末でのビューポート設定<meta name=”viewport” content=”width=device-width, initial-scale=1″>

モバイル端末でのビューポートの初期サイズを設定します。
この例では、widthプロパティをdevice-widthに指定しています。これは、ページの幅を、ユーザーのモバイル端末の画面の幅に自動調整するという意味です。もちろん、width=300というようにピクセルを指定することもできますが、あまり使用しないでしょう。