■ ヘッダ

文書情報を埋め込みます。ヘッダ部には、文書のタイトルを示す title要素、利用するスタイルシートの読み込み、サーチエンジン向けのキーワードや要約説明など、文書に関する情報を記述します。

文書のタイトルを除いて、そのほとんどはブラウザに表示されることがありません。

文字コードの設定

HTMLで使用する文字コードは必ずヘッダ部で設定しなければなりません。

<meta http-equiv="Content-Type" content="text/html; charset=Shift_Jis">

なお、日本語の場合には、非アスキー文字(2バイト文字コード)が出現する前に記述しなければなりません。下記の利用法は間違いです。

<title>初心者のためのホームページ作り</title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_Jis">

日本語の文字コードはこの他に、JISである ISO-2022-JP や、UNIX系で利用される ECU-JP が挙げられます。文字コードの設定がない場合には、ブラウザによっては UTF-8 に自動設定されることが期待されますが、文字化けする可能性もあります。

文書のMIMEタイプ

HTMLの内容を HTTPサーバや、ユーザエージェントに伝えるための MIMEタイプを設定します。

<meta http-equiv="Content-Type" content="text/html; charset=Shift_Jis">

このテキストが HTML文書であることを示しています。その他に text/css text/javascript などが挙げられます。

<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

ここで記述される多くは、ブラウザに対してのMIMEタイプであるといわれています。

タイトルの設定

文書のタイトルを設定します。このテキストは、「お気に入り」あるいは「ブックマーク」で取り込まれる文字列となります。また、多くのサーチエンジンでもページタイトルを収集して検索に利用されますので、文書内容が誰でもわかるよう簡潔に記述することが求められます。

<title>初心者のためのホームページ作り</title>

文書のタイトルは必ず、title要素で囲まれます。また、この要素内には他のタグは一切配置することができません。

スタイルシートの設定

ヘッダ内でスタイルシートを設定する場合は、style要素を用います。逆な言い方をすれば、この要素はヘッダ部以外では使うことができません。必ずヘッダ部で記述します。

<style type="text/css">
<!--
body { background-color: #fff }
-->
</style>

スタイルシートの設定には必ずコメントタグ <!-- 〜 --> を用いて、この中に記述することが求められています。ブラウザによってはスタイルシートに対応していないものがあるための処置です。

外部スタイルシートの読み込み

ヘッダ部で style要素を使ってスタイルシートを設定する以外に、外部スタイルシートを利用する場合には、以下のように記述します。

<link rel="stylesheet" href="banbansheet.css" type="text/css">

文書で利用する文字コードと異なる文字コードを利用して記述したスタイルシートは、charset 属性を利用することができます。また、外部スタイルシートの冒頭に @charset "ECU-JP"; などと記述してある場合はこの限りではありません。

サーチエンジン向けの記述

検索サーチサイトが世界中の Webページを巡って取得するページ情報の要約とキーワードをヘッダに埋め込んで取得してくれることが期待できます。

<meta name="description" content="ヘッダ部に記述する内容">
<meta name="keywords" content="head,html,CSS,ばんばん">

description には、ページ内容の要約を、keywords には、ページ内のキーワードとなる言葉を半角カンマで区切って、幾つでも設定できます。ただし、サーチエンジンすべてに対応しているわけではなく、あくまで期待に過ぎません。

文書の前後関係を示す

現在の文書から見た他の文書との関係を示します。特に非視覚系ブラウザに対しては、リンクの代わりとなるもので、W3Cでは、アクセシビリティの観点からも次の文書との関係を記述することを強く求めています。

<link rel="prev" href="prev.html">
<link rel="next" href="next.html">

なお、link要素におけるリンクタイプの記述に関する詳しい解説は、メールマガジンの 第21号 をお読みください。

自動的に文書を再読み込みさせる

文書が常に更新されている場合には、有効であろうといわれていますが、実際にはあまり意味を持ちません。確かに、1度読み込まれた文書はブラウザにキャッシュされるため、更新部分が表示されない危険性はあるものの、HTMLの記述内容の工夫によって可能な場合があります。いずれにしても、HTML側で再読み込みさせる手法は、ユーザビリティの観点からもお勧めできるものではありません。

<meta http-equiv="refresh" content="URL">

URLには、再読み込みさせるページを指定します。

自動的に他のページに移動する

いわゆるスプラッシュページと呼ばれるもので、数秒後に違うページへ移動する手法です。

<meta http-equiv="refresh" content="5,URL=another.html">

これは、5秒後に他のページに移動する記述ですが、ブラウザによっては対応していないものがあります。意味のないスプラッシュページは厳に慎みたいところです。



This Page is HTML4.01 Valid! 初版更新日 2003年1月4日
Copyright(C) 2002-2004 banban@scollabo.com