ヘッダー部分 <head>〜</head>
ヘッダー部分は、ホームページの情報を記入する場所です。
ホームページの情報というのは、「このホームページにはこんな内容の事が書かれていますよ」というのを、検索エンジンに教えてあげる為のものです。
検索エンジンで有名な”google”や”yahoo”などは「ロボット検索」といって、世界中に何億・何十億もあるホームページをコンピューターが一つ一つチェックして内容をインデックスしています。
それだけの数のホームページを検索して並べていくには、ひとつのサイトを細かいところまでチェックして判断していたら、とてもじゃないけど間に合いません。
そこで、このヘッダー部分の記述を見てホームページのおおまかな内容や、何について記入しているページなのかを判断しています。
また、<head>〜</head>内では、そのページが使用するスタイルシートやJavaScriptなどの宣言(リンク設定)なども行います。
それでは、<head>タグ内で使われる主なタグについて紹介します。
ページタイトル
【記述例】
<title>よく分かるホームページの作り方</title>
そのページのタイトルのことです。
<title>〜</title>の間に自分で考えたそのページのタイトルを記入すると、ブラウザで表示した時にウィンドウの左上部分にページタイトルが表示されます(このページでいうと『ヘッド部分 <head>〜</head>について』というタイトルになっていると思います)。
この部分は、検索エンジンで上位に表示させる為の「SEO対策」で最も重要な要素のひとつです。
SEO対策は抜きにしても、ホームページを見てくれている人に対して、このホームページが何について書かれているのかを一目で分かるようにできるものなので、必ず全ページにタイトルを付けるのをオススメします。
文字コードの宣言
【記述例】
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
このページは○○という文字コードを使って記述されています、ということを宣言する為のタグです。
これを記述していない場合、文字化けを起こして何を書かれているのか全く分からないホームページになってしまう可能性があります。
上記の記述例の場合は「このページは『shift_jis』という文字コードを使用しています」という意味になりますが、この他にも「EUC_jp」や「UTF-8」等の文字コードもあります。
各文字コードによって細かい違いがありますが、
普通にホームページを作るだけなら、『shift_js』か『UTF-8』に設定
しておけば問題なくホームページを表示させることができます。
検索キーワード
【記述例】
<meta name="keywords" content="ホームページ,簡単,HTML"/>
そのページが何について書かれているのかをキーワード形式で表示します。
例えば、トヨタのハイブリッドカー「プリウス」について紹介しているページだとしたら、【プリウス,トヨタ,車,ハイブリッド,燃費】などといったプリウスという車から連想されるようなキーワードを記入します。
ただし、そのページ内容と全く関係の無い内容や、全く使用していないようなワードを記入すると”スパム”として認識されてしまい、検索エンジンの評価が下がってしまうので注意してください。
また、ページごとにキーワードを設定するようにして、あまりに多数のキーワードは記入せず、多くても10〜15個くらいにとどめておきましょう。
description (ディスクリプション)
【記述例】
<meta name="description" content="ホームページの作り方について紹介しているサイトです。HTMLやCSSについて初心者の方でも分かりやすく説明しています。これで、あなたもサイトオーナーに!!"/>
ディスクリプションとカタカナで書くと何だか分かりにくいですが、要はそのページの内容を簡単に説明している文章です。
これも、SEO対策として有効な部分ですので、そのページを紹介しながら上手くキーワードを散りばめるのが効果的です。
また、この部分は検索エンジンの検索結果であなたのホームページの紹介文として表示されます。「このホームページを覗いてみようかな」って思ってもらえるようなキャッチコピーを考えてみてくださいね。
外部スタイルシートの読み込み
【記述例】
<link rel="stylesheet"type="text/css" href="スタイルシート(CSS)名" />
ホームページは、HTMLという言語で作られていることはお話ししましたが、一般的に”HTML”で骨組みを形成して”CSS(スタイルシート)”で詳細表示の設定、例えば行間隔や文字の大きさ等の調整をしたりします。
CSS(スタイルシート)についてはCSSについてで紹介しますが、ここではその外部CSSをページに読み込む記述を紹介しています。
外部JavaScriptの読み込み
【記述例】
<script src="javascriptのファイル名" type="text/javascript"></script>
javascriptというのは、ホームページを動的に変化させることのできるプログラム言語です。
例えば、メニューボタンにカーソルを乗せると色が変わったり(ロールオーバー効果)、現在の時刻を表示させたり、他にもたくさんの効果を付けることが出来ます。
ただ、javascript言語を勉強して自分で作成するのはなかなか難しいと思います。そこで、インターネット上では色々なjavascriptプログラムが無料で公開されています。インターネット上でダウンロードしてきたプログラムを読み込んでそのページで使用するには上のような記述を行います。
もちろん、自分でプログラムを作って呼び込む時も同じようにして読み込みます。