4-3 HEAD(ヘッダー)要素とは

『1-2-2 HTMLの基本構造』 の「ソースの中身」 でもチラリと書きましたが、HEAD要素とは主に作成したHTML文章の情報をコンピューターや検索エンジン(Yahoo!やGoogle等)に知らせる為に記載致します。

ここで書かれた事柄は直接ページには表示されませんが、文字コードや作者名、文章のタイトル、スタイルシート等の情報を書く事が出来ます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html;charset=Shift_JIS"> (*1)
<link rel="stylesheet" href="common.css" type="text/css"> (*2)
<title>ページタイトル</title>
</head>
<body>ここに本文が書かれます</body>
</html>

4-3-1a META要素一覧 (*1)

META要素とはHEAD部内で使用し、ウェブのページを作成した作者が直接HTML文章にそのページの情報を埋め込む事が出来る項目の一つです。 具体例は下記の見本をご覧下さいませ。


  1. 文字コードを入れる
    <meta http-equiv="content-type" content="text/html;charset=Shift_JIS">
    「Shift_JIS」の他にも「UTF-8」や「EUC-JP」等があります。
  2. 作者名を入れる
    <meta name="author" content="あなたのハンドルネーム">
  3. サイトに関するキーワードを入れる (※ 1)
    <meta name="keywords" content="素材,軽い,無料,初心者向けの講座有り">
  4. サイトの説明文を入れる (※ 1)
    <meta name="description" content="1KB以下のウェブで使用出来る素材を取り扱っております。">
  5. HTMLを作成時に使用したソフト名を記載する
    <meta name="generator" content="TeraPad">
    その他にも「Homepage Builder」等があります。
  6. ロボット避け (※ 2)
    <meta name="robots" content="noindex, nofollow">
  7. ページをキャッシュして欲しくない時 (※ 2)
    <meta name="robots" content="noarchive">
  8. 移転した際に利用するタグ (※ 3)
    <meta http-equiv="refresh" content="5;url=http://nantoka.jp/index.html">

4-3-1b サイトに関するキーワードと説明文を入れる方法 (※ 1)

「keywords」「description」 はワンセットで書かれる事の多いメタ要素です。一説によるとGoogle(グーグル) や Yahoo! (ヤフー)などの検索サイトは 「keywords」 にいれた言葉を優先的に拾って行くと聞きますが、ほとんどの方が記述しているので効果の程は不明です(^^; ちなみに 「description」 を記載した場合、グーグルではその説明文が優先して検索結果に表示されるようです。

例:
5の 「description」 を当サイトが入れた場合

「description」を入れた場合の検索結果の見本

こんな感じに表示されます。
(※ 実際にはそのタグは入れておりませんので上記のようには表示されません)

4-3-1c ロボット避けとキャッシュ避け (※ 2)

「noindex, nofollow」「noarchive」 ですが、こちらもワンセットで書かれる事が多いタグです。お友達にだけ見せたい私的なページ(もしくは検索されると困るページ等)を作る際に使用されるタグです。

大抵の検索サイトではこのタグの指示に従ってくれますが、極まれにこの記述を無視して索引化していく所もございます。(ウェブの世界では「本当にヒットして欲しくないページはアップロードしなければ良い[つまりサイトを持つなという意味……/汗]」とまで云われているので、気休め程度に考えておいて下さい)

4-3-1d 移転した際に使用するメタタグ (※ 3)

上記の記述をした場合、「5秒後」 に 「http://nantoka.jp/index.html」 というアドレスに移動しますという意味になります。IE 6.0、NN 7.1、Firefox 1.5.0.4、OPERA 9.0 で動作は確認済みですが、オペラのみ古いヴァージョンだと上手く指定先に飛べないケースがございます。必ず移転先を知らせるページのボディ部分に新しいURLを記載し、テキストリンクからでも良いので新アドレスに飛べるようにして下さい。

4-3-2a LINK要素一覧 (*2)

LINK要素とはBODY部で使用される ハイパーリンクを提供する<a>要素 と似た働きがありますが、 こちらの方はHEAD部内でのみ使用し、サイト内のHTML文章の前後のページ指定やスタイルシートやスクリプト、印刷文章の見栄えの指定等が出来ます(具体的な見本は下記を参照なさって下さい)。


  1. 外部スタイルシートの参照先
    <link rel="stylesheet" href="common.css" type="text/css">
  2. 現在のページから見てインデックス(索引文章)を指します。
    <link rel="index" href="index.html" title="索引ページ">
  3. 現在のページから見て一連の文章の最初のページを指します。
    <link rel="start" href="chapter-0.html" title="最初のページ">
  4. 現在のページから見て目次を指します。
    <link rel="contents" href="menu.html" title="目次のページ">
  5. 現在のページから見て一つ前のページを指します。
    <link rel="prev" href="chapter-1.html" title="前のページ">
  6. 現在のページから見て次のページを指します。
    <link rel="next" href="chapter-3.html" title="次のページ">
  7. 現在のページから見てリンク集のページを指します。
    <link rel="bookmark" href="link.html" title="リンク集のページ">
  8. 現在のページから見てヘルプ文章を指します。
    <link rel="help" href="help.html" title="困った時はこのページを見て下さい">
  9. 現在のページの別ヴァージョンを指します。
    <link rel="alternate" hreflang="en" href="english.html" title="英語版です">
  10. 現在のページの印刷用ページを指します。
    <link rel="alternate" media="print" href="print.html" title="印刷用のページです">

この他にもLINK要素はありますが、詳細は他の素敵サイト様をご覧下さいませ(^^; (上記のLINK要素さえ知っていれば大体のページは作れるかと思います)

4-3-2b リンクの方向性

リンクには順方向を示す rel属性 と、逆方向を示す rev属性、リンク先を示す href属性 の三つがあります。

rel属性
link要素を書き込んだ文章から見て、href属性で指定したURL先の文章との関係性を提示
例 : <link rel="bookmark" href="link.html" title="リンク集のページ">
上記のリンク要素を書き込んだ場合、書いたページから見て 「link.html」 は 『bookmark(リンクのページ)』 だと云う事になります。
rev属性
リンク先から見た現在の文章との関係性を提示
href属性
リンク先のURLを指定致します。<a>要素 でも利用致します。

次のページではいよいよBODY部(ブラウザに表示される部分)のタグを説明致します。