HTMLのタグには、<head> と<header>という非常に似ている名前のタグが存在します。名前は似ていますが、意味と役割は全く違うのできちんと区別しましょう。
結論から言えば、<head>はブラウザのため、<header>はユーザーのためのものです。フロントエンドエンジニアの面接でも、よく聞かれる項目です。
Contents
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というようにピクセルを指定することもできますが、あまり使用しないでしょう。
HTMLの<header> の意味と使用方法
名前は似ていますが、全く違う役割を担うのが、<header>タグです。こちらの方が、初心者にもイメージしやすいタグだと思います。
ヘッダーという名の通り、このタグには、ナビゲーションや、サイトや会社のロゴ、検索フォームなどを記載します。
同じページ内に複数の<header>を使用することができますが、<header>を<footer>タグや、別の<header> と入れ子にしていけません.
