Of ChaichanPapa-World !

Home/Menu

ストリクトなHTMLの基礎講座

ヘッド要素(title,metaタグ等)の概説

◆ はじめに

本ページは、ヘッド要素をまとめてみました。

ヘッド要素は、その文書の最重要要素タイトルや本文以外の付属的情報を記述した要素を適切なタグでマークアップしたものです。

あと、要素ではありませんが、HTML文書の一行目に必ずドキュメントタイプ宣言が必要です。

ドキュメントタイプ宣言

説明

ヘッド要素ではありませんが、HTML文書の一行目に必ずドキュメントタイプ宣言が必要です。
そして、ストリクト(厳格)な論理マークアップ致しましょう!

 ストリクト(厳格)とは
本講座で説明するタグ以外は使わなく、正しいマークアップをすること。
 論理マークアップとは
一部のブラウザの物理的表示効果に依存しない、意味的なマークアップ。

ストリクトな宣言

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
   :
</html>
説明

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">を左から順に...。

<!
SGMLの「マーク宣言(markup declaration)」で、マーク宣言開始区切り子です。(HTMLはSGMLに含まれます。)
DOCTYPE
文書型宣言であることを示しています。<! の後に空白を入れることは許されず、半角のアルファベットで記述してください。
HTML
「文書型名」です。本文書のルート要素名を示します。
PUBLIC
外部識別子です。外部に公開されている文書参照を示します。
"-//W3C//DTD HTML 4.01//EN"
これは参照する文書を特定する「公開識別子」です。
-//W3C
所有者識別子で、その外部文書の所有者を表します。ちなみにマイナスは所有者への未登録で、プラスは登録済みです。
//DTD HTML 4.01//EN
文識別子で、DTDは「公開文種別」、HTML 4.01は「公開文記述」、//は区切り子 、ENは公開文言語となっています。ちなみに、この EN(英語) は参照先の DTD の言語を示しています、本文書の言語ではありません。また、公開文種別や公開文言語の指定は大文字で行わなくてはなりません。
>
マーク宣言終了区切り子で、宣言を閉じます。

フレームセットな宣言

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html>
<head>
<title>フレームのテスト</title>
</head>
<frameset COLS="50%,50%">
   :
</frameset>
</html>

head要素

説明

以下で説明されている、要素を配置します。
文書そのものでなく、付属情報的なものを記述しますが、重要な要素(title要素)も含みます。

title要素

説明

文書のタイトルを記述します。(<head>〜</head>のヘッダ要素のみ記述)
<title>〜</title>で〜に対応する所にその文書の内容を端的に表す文字列(タイトル)を書きます。タイトルはブラウザのタイトルバーに表示されるだけではなく、「お気に入り」や「履歴」に表示されたり、検索エンジンの結果として表示されたりしますので、必ず記述するようにしましょう。

meta要素

説明

いろいろな目的で使用されます。(<HEAD>〜</HEAD>のヘッダ要素のみ記述)

属性

属性説明
name="..." 名前を指定します。どんな名前を指定するかは使用例を参照してください。
http-equiv="..." HTTPのヘッダ情報の付加情報を示します。使用例を参照してください。
content="..." nameやhttp-equivで指定したキーワードの値を指定します。

使用例

【著者の明記】

次の例では文書の著者を明示しています。画面上では表示の変化はありません。

<meta name="Author" content="chaichan">
【キーワードの宣言】

次の例ではこの文書に関連するキーワードを指定しています。検索ロボットの中にはこのキーワードを解釈してくれるものがあります。

<meta name="Keywords" content="HTML,CGI,SSI">
【説明の明記】

次の例ではこの文書に関連する説明(description)を指定しています。検索ロボットの中にはこのキーワードを解釈してくれるものがあります。

<meta name="Description"
      content="HTML/CGI/SSIについて説明します。">
【定期的再表示】

次の例では文書を10秒毎に再描画します。この機能をクライアントプルと呼びます。NN2.0/IE3.0以上でサポートされています。

<meta http-equiv="Refresh" content="10">
【別のページに自動ジャンプ】

次の例では10秒後にURL=...で指定したURLにジャンプします。ホームページの移動の際に用いている例がありますね。NN2.0/IE3.0以上でサポートされています。

<meta http-equiv="Refresh"
      content="10;URL=http://xyz.com/">
【文字コードの指定】

次の例では文書の漢字コードがシフトJISであることを宣言します。

<meta http-equiv="Content-type"
      content="text/html; charset=Shift_JIS">
文字コード説明
iso-2022-jpJISコードであることを示す。
Shift_JISシフトJISであることを示す。ただし、これを指定すると、NN2.0で文字化けが発生する可能性がある。
x-sjisシフトJISであることを示す。Shift_JISが正式採用される前に仮に使用されていた名前。これを指定するとLynxなどのブラウザでは文字化けが発生する。
euc-jpEUCであることを示す。
x-euc-jpEUCであることを示す。euc-jpが正式採用される前に仮に使用されていた名前。
【キャッシュ有効期限の指定】

次の例ではこの文書がキャッシュから消去されるべき時刻を指定しています。ブラウザによりサポート状況は異なります。

<meta name="Expires"
      content="Tue, 20 Aug 1996 14:25:27 GMT">
【キャッシュ制御】

次の例では文書がブラウザ側にキャッシュされるのを防ぎます。これにより、アクセスする度に最新のページを読み込ませる事ができます。(サポート状況はブラウザによって異なります)

<meta http-equiv="Pragma" content="no-cache">
【基準言語の指定】

次の例では文書中のonClick="..."などで呼び出すスクリプトの基準言語を指定します。(LANGUAGE属性で変更可能です。)スクリプトをサポートする大半のブラウザの基準言語はJavaScriptなので、事実上は指定しても指定しなくても大差ないようですが、VBScript(text/vbscript)を使用する時などは便利でしょう。

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

<meta>はこれらの他にもいろいろな使用法がある、汎用的なタグです。

【自動登録の制御】
<meta name="robots" content="index,follow">

トップページ、そこからのリンクともに登録許可します。(無指定と同じ)

<meta name="robots" content="noindex,nofollow">

トップページも、そこからのリンクもに自動登録させません。

<meta name="robots" content="index,nofollow">

トップページは、登録許可しますが、そこからのリンクは、自動登録させません。

<meta name="robots" content="noindex,follow">

トップページは、登録拒否しますが、そこからのリンクは、自動登録させます。

base要素(参照先の文書の位置指定)

説明

このタグ以降に出てくる相対パス表記のURLの基準ディレクトリや基準ターゲットを指定することができます。<head>〜</head>のヘッダ要素に記述します。

属性

属性説明
href="..." 基準ディレクトリをURLで指定します。
target="..." 基準表示先を指定します。

使用例

【HTMLソース】
<html>
 <head>
  <title>XXXXX</title>
  <base href="http://www.xyz.com/">
 </head>
 <body>
  <a href="xxx.html">XXXX</a>
 </body>
</html>

<base>タグにより、現在の基準ディレクトリに関わらず xxx.html は http://www.xyz.com/xxx.html として解釈されるようになります。

link要素(他の文書との関係を表わす)

説明

<HEAD>〜</HEAD>のヘッダ要素に記述します。他の文書(URL)との関係を表わす他、スタイルシートファイルやフォント定義ファイルを読み込んだりするのにも使用されます。

属性

属性説明
rel="..." この文書から見た、href="..."で示したURLとの関係を表わします。
rev="..." href="..."で示したURLから見た、この文書との関係を表わします。
href="..." 読み込むファイルのURLを指定します。
src="..." フォント定義ファイルのURLを指定します。
type="..." href="..."で読み込むファイルのタイプを指定します。スタイルシートの場合は "text/css" を指定します。

使用例

次の例では、スタイルシートの定義ファイルを読み込みます。(NN4〜/IE3〜)

<link rel="stylesheet" TYPE="text/css" href="xx.css">

次の例では、フォント定義ファイルを読み込みます。(NN4〜)

<link rel="fontdef" SRC="xxfont.pfr">

次の例では、この文書が foo@xyz.com によって作成されたことを意味します。

<link rev="made" href="mailto:foo@xyz.com">

次の例では、この文書の次の文書が doc31.htm であることを意味します。

<link rel="Next" href="doc31.htm">

この他にも、Contents(目次)、Index(索引)、Glossary(用語集)、Copyright(著作権情報),Next(次の文書)、Previous(前の文書)、Parent(上の文書)、Help(ヘルプ)、Bookmark(ブックマーク)などが提案されています。しかし、まだ、これらの関係情報を有効に利用しているブラウザは少ないようです。

Home/Menu/HTML概説リファレンス