HTML

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

HTML, CSS, JavaScript

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

結論から言えば、<head>はブラウザのため、<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というようにピクセルを指定することもできますが、あまり使用しないでしょう。

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

名前は似ていますが、全く違う役割を担うのが、<header>タグです。こちらの方が、初心者にもイメージしやすいタグだと思います。

ヘッダーという名の通り、このタグには、ナビゲーションや、サイトや会社のロゴ、検索フォームなどを記載します。
同じページ内に複数の<header>を使用することができますが、<header><footer>タグや、別の<header> と入れ子にしていけません.

ABOUT ME
Wata
30歳で営業職からエンジニアに転職した者のブログです。 大手海運業→総合商社→ソフトウエアエンジン。現在は、オーストラリアにてエンジニアとして働いています。 未経験からのエンジニアへの転職、フロントエンド周りの技術、エンジニアの仕事環境、趣味の旅行、JAL修行、オーストラリアの情報などを発信しています!

COMMENT

メールアドレスが公開されることはありません。 が付いている欄は必須項目です