head要素の記述

head要素の記述

HTML文書はhead要素とbody要素とに分けることができます。

body要素には文書の内容や画像・動画など、コンテンツの核となる要素が含まれており、主に利用者(人)のための内容となっています。それに対してhead要素には、文書のタイトルや説明、使用している文字コードなど、主にコンピューターが読み取る内容が記述されており、あまり人の目に触れることはありません。

head要素とbody要素(HTML)

head要素の内容は人の目に触れることが少ないため、内容を軽視し、きちんとした記述をしない人もいます。しかし、ブラウザや検索エンジンなどに正しい情報を伝えるために、head要素はとても重要なものです。人の目に触れることが少ないからと軽視せず、正確な記述をするよう心がけてください。

head要素に記述する内容はWebサイトの内容や仕様によって異なりますが、主に「title要素」「meta要素」「link要素」が一般的に記述されます。

title要素

head要素内で特に重要なのが、title要素です。title要素に記述された内容は、ブラウザのタイトルバーに表示されたりブックマークされたときのサイト名として表示されるほか、検索エンジンの検索結果として表示されます。title要素は1つのページに1つだけ記述することができ、「<title> ~ </title>」の中に表示したいタイトルを記述します。

<head>
  <title>ページのタイトルを記述</title>
</head>

このとき注意したいのが、title要素に記述するのはホームページのタイトルではなく、ページのタイトルを記述するようにします。すべてのページをホームページのタイトルで統一してしまうと、検索エンジンに表示されたときなどに、利用者はどのページなのか区別できなくなってしまいます。内容を端的に表すタイトルをページごとにつけるようにしてください。

meta要素

meta要素には、HTML文書がどのようなものなのかを記述します。具体的には、文書の説明や文字コード、キーワード、著者などを示すことができます。どのような内容を含めるかはWebページの種類、あるいはページごとに異なるので、必要に応じてmeta要素を記述します。それぞれの内容を記述するには、以下のようにコードを記述します。

文字コード

HTML文書がどのような文字コードで保存されているかを指定するには、charset属性を使用し、「<meta charset=”UTF-8″>」のように記述します。現在、HTML5では原則として文字コードに「UTF-8」を使用することになっているため、それ以外の文字コードを指定することはほとんどありません。ただし、特殊な理由でUTF-8以外の文字コードを使用する場合は、それぞれの文字コードに合わせて記述してください。

文字化けを防ぐために、文字コードの指定は日本語の内容が含まれる項目よりも前に記述します。また、HTML5では文字コードの名称を大文字と小文字で区別しないので、「UTF-8」と「utf-8」のどちらでも記述することができます。

<head>
  <!-- 文字コードの指定 -->
  <meta charset="UTF-8">
</head>

文書の説明(概要文)

文書の説明を記述するには、name属性にdescriptionを指定し、content属性に説明を入力します。ここに記述した説明文は検索エンジンの検索結果に表示されることもあるので、利用者がどのようなページなのかがわかる内容を記述します。一般的には検索結果画面で最適に表示されるには120文字以内が良いとされています。(スマホの場合は80文字以内)

<head>
  <!-- 文書の説明 -->
  <meta name="description" content="ここに説明文を入力">
</head>

ページのキーワード

ページのキーワードを設定するには、name属性にkeywordsを指定し、content属性にキーワードをカンマ区切りで必要な数だけ入力します。

キーワードの設定は、以前はSEO(検索エンジン最適化)には重要項目でした。しかし、現在では検索エンジンの仕様変更によりキーワードを設定してもあまり意味のないものとなっています。

<head>
  <!-- キーワードの設定 -->
  <meta name="keywords" content="キーワード1,キーワード2,キーワード3">
</head>

link要素

Link要素は、CSSファイルなどの外部ファイルの読み込みやファビコンの指定などに使用します。

CSSファイルの読み込み

HTML文書とは別に用意したCSSファイルを読み込むには、rel属性にstylesheetを指定し、href属性にCSSの場所を記述します。

<head>
  <!-- CSSの読み込み -->
  <link rel="stylesheet" href="css/style.css">
</head>

レスポンシブサイトでデバイスの種類によって読み込むCSSを変更したい場合は、media属性を使って読み込むメディアを指定することができます。たとえば、デバイスの幅が680pxまでの場合にCSSを読み込みたい場合は次のように記述します。

<head>
  <!-- 680pxまでのデバイスでCSSを読み込む -->
  <link rel="stylesheet" media="(max-width: 680px)" href="css/style.css">
</head>

ファビコンの設定

ファビコンとは、ブラウザのアドレスバーなどに表示される小さなアイコンのことで、これを指定するにはrel属性にiconを指定し、href属性にファビコンのファイルがある場所を記述します。

ファビコンのファイルは「.png」「.ico」「.gif」のフォーマットのものが使用できますが、ico形式のファイルの場合、サーバーのルート直下に配置することでブラウザが自動的に読み込んでくれるためlink要素に記述しなくても表示されます。

<head>
  <!-- ファビコンを指定 -->
  <link rel="icon" href="favicon.ico">
</head>

検索

MENU

サンプルコード集

Webの基礎知識

coming soon…

  • コンテンツ制作中
PAGE TOP