htmlのヘッダ領域には何を書く？役割と頻繁に記述される内容を把握しよう！

htmlファイルを作成する際、ヘッダ(head)領域は必ず記述することになりますが、使い方がイマイチ分かっていない方も多くいらっしゃいます。

本記事では、ヘッダ領域の基本的な役割と頻繁に利用される記述方法についてご紹介していきたいと思います。

htmlのヘッダ領域の役割とは

htmlには、最低限必要な要素として「htmlタグ」「headタグ」「bodyタグ」が必要です。

htmlのヘッダ領域(headタグ)に指定する情報は、ホームページを訪れたユーザーに直接見せる情報ではないけれども、ホームページを表示するためにブラウザが必要とする情報を記述するエリアとなります。

htmlのヘッダ領域に指定出来る要素

htmlのヘッダ領域に指定出来る要素としては、下記のようなものが挙げられます。

それぞれの要素の使い方について、順番に説明していきます。

htmlのヘッダ領域指定1：metaタグの使い方

Webページの情報を検索ブラウザ(GoogleChrome・Firefoxなど)に伝えるために利用されます。

頻繁に利用されるmeta情報の指定についてご紹介していきます。

文字コードの指定

ブラウザでWebページを表示する際の文字コードをmetaタグに記述します。

<meta charset="文字コード">

HTML5以前の記述法では下記のように記述されていることが多いですが、HTML5以降からは上記のように簡略化することが可能です。

<meta http-equiv="Content-Type" content="text/html" charset="文字コード" /> 

説明文の指定

Googleなどの検索エンジンで何かを検索すると、タイトルと説明文が表示されるかと思います。

この説明文に表示する内容を決めるのが「メタディスクリプション」です。

name属性に「discription」を指定すると、content属性に設定した文言が説明文として表示されます。

<meta name="discription" content="説明文に表示したい内容">

キーワードの指定

検索エンジンに設定したキーワードの内容で記事を書いていることを伝えるために指定します。

検索結果として上位表示されやすくするため、一般的に1~3つのキーワードを設定するのが一般的です。。

name属性に「keywords」を指定し、キーワードとして設定したい値をcontent属性に「,」区切りで設定します。

<meta name="keywords" content="キーワード1,キーワード2">

ポテパンダの一言メモ

確かな情報とは言い切れませんが、Google検索ではmetaキーワードに設定された値は検索結果の上位表示判定に使用していないとの情報もあります。

htmlのヘッダ領域指定2：titleタグの使い方

titleタグに設定した値は「検索エンジンでの結果」と「ページを開いた際のタブ」に表示されます。

titleタグの記述方法

titleタグの記述方法は下記の通りです。

<title>タイトルとして表示したいテキスト</title>

タグの内側に設定したテキストがタイトルとして表示されます。

title属性の役割

titleタグには、属性として「title=”テキスト”」を表示することが可能です。

title属性に指定したテキストの値は、音声サポートを利用した際に読み上げられます。

htmlのヘッダ領域指定3：styleタグの使い方

styleタグは、HTMLファイルに直接スタイル(CSS)を記述する際に利用します。

styleタグの記述方法

styleタグの記述方法は下記の通りです。

<style>CSSをタグの内側に記述</style>

styleタグを利用する場合、ブラウザによりCSSとして記述した内容がそのままテキストとして表示されてしまうことがあるため、CSS全体を下記のようにコメント化しておく方法が一般的です。

<style><!-- CSSをタグの内側に記述 --></style>

HTML5ではCSSは別ファイルに記述する方法を推奨

styleタグはHTMLファイル上に直接CSSを記述出来る方法ではありますが、HTML5からはCSSを別ファイルに記述して、後述する「linkタグ」で読み込む方法が推奨されています。

styleタグはあくまで記述方法の1つとして認識しておき、実際の利用はlinkタグからCSSを読み込む方法で実装しましょう。

htmlのヘッダ領域指定4：scriptタグの使い方

scriptタグでは、JavascriptやVBscriptを記述してHTMLに動的な処理を加えることが可能です。

scriptタグの記述方法

scriptタグの記述方法は下記の通りです。

<script type="MIMEタイプ">Javascriptなどの処理</script>

scriptタグでもstyleタグ同様に、scriptタグ内部に直接コードを記述する場合、scriptタグ非対応ブラウザでテキストとして表示されないよう全体をコメント化しておきます。

<script type="MIMEタイプ"><!-- Javascriptなどの処理 --></script>

ここで記述したtype属性に関しては、scriptタグの必須属性です。

Javascriptを指定する場合には「type=”text/javascript”」という風に設定します。

src属性で外部ファイルの取り込み

scriptタグの内部に処理を記述することで、スクリプトを実行することは可能ですが、HTML5からはスクリプト処理は別ファイルに記述することを推奨しています。

<script type="text/javascript" src="sample.js"></script>

src属性を利用することで外部ファイルを取り込むことが可能です。

上記の例ではhtmlファイルと同階層にある「sample.js」というJavascrptファイルを読み込むことが可能です。

htmlのヘッダ領域指定5：linkタグの使い方

linkタグの最も一般的な使い方としては外部のCSSファイルを読み込む際に利用されます。

linkタグでは外部ファイルの読み込み以外にも、検索エンジンにページの関係性を伝える際など様々な用途で利用されます。

ポテパンダの一言メモ

本記事のテーマと少し離れてしまうため、今回は外部ファイルの読み込み方法のみご紹介していきます。

CSSの外部ファイル読み込み

HTML5では、デザインは別ファイルとして切り出すことが推奨されています。

linkタグの使い方としても最も多く利用されるのがCSSファイルの読み込みです。

<link rel="stylesheet" href="CSSのファイルパス"></link>

rel属性に「stylesheet」を指定し、href属性にCSSファイルのパスを指定することで、外部のCSSファイルを読み込むことが可能です。

ポテパンダの一言メモ

応用として、href属性にGoogleFontsやFontAwesomeのURLを記述するとWebフォントを読み込むことが可能です。

アイコン画像の読み込み

Webサイトのタブに独自のアイコンを表示させるのもlinkタグを使用して設定します。

<link rel="icon" href="画像のURL" size="サイズ指定"></link>

linkタグのrel属性に「icon」と指定することで、href属性に指定したURLの画像がアイコンとして表示されます。

さいごに：htmlのヘッダ領域で頻繁に利用されるタグの使い方を把握しよう！

本記事では、htmlにおけるヘッダ領域の役割と基本的な使い方についてご紹介してきました。

ヘッダ領域には様々なWebサイトの情報を埋め込むことが可能ですが、全てを覚える必要はありません。

今回ご紹介した基本的な内容を頭の片隅に置いてもらって、html実装の際に調べながら必要な情報をヘッダ領域に組み込めるように理解していきましょう。