メタデータ

今回紹介するのはメタデータの書き方で、これはつまり文書に付属する情報です。

主に、ずっと前に紹介したhead要素の中に書きます。今までhead1要素の中にはtitle要素しか入れるものが無くて寂しかったので、それを増やそうというわけです。

meta要素

主に使われるのはmeta要素です。さまざまなメタデータをmeta要素で記述することができます。

エンコーディング

まず、文書のエンコーディングを指定する方法を紹介します。これは、日本語を書くならぜひ有るべきです。

まず、そもそもエンコーディングとは何かということから紹介します。

エンコーディングとは「何という文字コードで書かれているか」です。

文字コードというのは、こういうことです。ご存知のとおり、パソコンで扱うデータは2進数（0と1のみ）で書かれています。

この0と1を8桁集めることで、2⁸=256通りの数を表せるようになりました。具体的には、0～255までを表します。この単位をバイトといいます。

さて、ほとんどのデータは基本的にバイト単位で扱われますが、普通に使うと256種類の文字しか扱えません。これでは漢字などを全て表すのは到底無理です。

そこで、2バイト以上を組み合わせて1つの文字を表すようにしました。この表し方を決めたものを文字コードといいます。

文字コードにも複数種類あり、それぞれ異なります。例えば、同じ文字「あ」を表すのに、Shift_JISの場合だと「82 A0」、EUC-JPだと「A4 A2」、UTF-8だと「E3 81 82」となります。数字のはずなのにアルファベットが混ざっているのは、16進数だからです。興味があれば調べてみましょう。

このように、文字コードが正しくないとページが見られません。そこで、このページはどの文字コードで書かれているのはということを知らせないといけないのです。

このために、エンコーディングの指定を行うことになります。エンコーディングを間違ってしまうと、いわゆる文字化けが発生してしまいます。

さて、ではその書き方ですが、非常に簡単です。次のように書きます。

<meta charset="文字コード名">

このように、meta要素は空要素です。「文字コード名」は、「Shift_JIS」「EUC-JP」「UTF-8」などです。

もちろん、ページで実際に使っている文字コード（テキストエディタの設定などを確認しましょう）と一致していないといけません。

ちなみにお勧めの文字コードはUTF-8です。これはUnicodeの符号化形式の一種で、Unicodeというのは世界で通用します。Unicodeは世界中の文字を全て扱えるようにするという考えで作られたものなのです。

それに対しShift_JISやEUC-JPなどは、日本独自のものなので、外国では通用しません。また、日本独自ということは、日本語と外国の変な文字を共存させたりということができないということです。今から新しくWebサイトを作りたいという人は、ぜひUTF-8にしましょう。既に作った人も、UTF-8でない人は直せるならUTF-8にすべきです。

ちなみに、「各文字コードで文字の表し方が違うなら、タグが書いてあっても違う文字コードだと認識できなくて困る」という問題があると考えた人もいると思いますが、実はそういうことはありません。

タグはASCII文字で書かれています。ASCII文字は、主に半角英数記号のことだと思っておきましょう。詳しくは気になる人は調べてみましょう。

ASCII文字は、多くの文字コードで共通なのです。だから、「何の文字コードで書かれているかわからなくてもとりあえずASCII文字は読める」ということになります。そこで読み進めていくうちに、meta要素が出てきて文字コードが判明するわけです。

つまり、一般にmeta要素が出てくる以前にASCII文字以外の文字を出現させるべきではないです。meta要素はhead要素中にあるので、それより早く日本語などが出てきそうなのはtitle要素ですね。title要素はmeta要素（charset属性があるやつ）より後ろに書くようにしましょう。

標準メタデータ名を用いたメタデータ

その他のメタデータを指定する場合、標準メタデータ名というものがを使います。これはmeta要素のname属性に書かれるもので、それによりこのmeta要素が何を表すかが決まります。

たとえば、name="author"とした場合、meta要素はその文書の著者を表すことになります。著者はどこに書くかというと、content属性に書きます。つまり、こういうことです。

<meta name="author" content="著者">

そして他に、標準メタデータ名とその意味には次のようなものがあります。

application-name

ページがウェブアプリケーションであるときのみ使用可能。そのページのウェブアプリケーション名を表す。

title要素との違いとして、title要素は同じウェブアプリケーションでも各ページでタイトルが異なる場合があります（例えば掲示板なら、「新規投稿ページ」「返信ページ」など）。それに対し、application-nameでの指定は常にアプリケーション名で一貫していることになります。

description

ページを説明する文字列です。例えば、Googleなどの検索結果一覧で使われたりします。

generator

Webページを作るのにソフトウェアを使った場合、そのソフトウェアを表す文字列を入れることができます。

keywords

そのページに関連するキーワードをカンマ区切りで示します。このページなら「HTML5,meta要素,文字コード」というようになるかもしれません。

プラグマ指示子を用いた指定

name属性以外に、http-equiv属性を用いてメタデータを指定する場合もあります。これをプラグマ指示子といいます。

http-equiv="refresh"のとき、content属性は"数字;url=URL"という形を取ることができます。

こうすると、(数字)秒後のそのURLに自動的に移動します。URLは引用符（""または''）で囲むことができます。

link要素

もう1つ、メタデータを記述するのに使われるのがlink要素です。これも同じく空要素です。

meta要素との違いは、link要素はこの文書と関連づいたリソース（ウェブ上のデータ）をリンクさせ、URLを指定する点です。

そのURLはhref属性で指定します。リンクといっても、a要素とはまた違い、「関係性がある」ということを指示するにとどまります。

また、rel属性が必須です。rel属性は、そのリソースがこの文書とどのような関係があるかを指定します。

rel属性は、スペースで区切って複数の値を指定可能です。また、外部リソースへのリンク（この文書を補うリソース）とハイパーリンク（別の文書へのリンク）に大別することが可能です。

この2つの違いは、外部リソースのほうはこの文書を補うものなので、文書本体を読み込んだ後に外部リソースも読み込まれるであろうという点です。ハイパーリンクのほうは別の文書なので、一緒に読み込まれたりはしません。

まずrel属性を紹介する前に、その他の属性を紹介します。rel属性以外は全て省略が可能です（基本的に何でも「必須」と書いていなければ省略可能です）。

type属性は、リンク先のMIMEタイプが何であるかを教えます。HTMLファイルなら「text/html」などです。これは、特に外部リソースの場合、UAがそのリソースを読み込むか読み込まないかを判断する基準になったりします。

hreflang属性は、リンク先が何の言語で書かれているかを指定できます。

media属性は、そのリソースに適したメディア（普通のウェブブラウザか、印刷用か、携帯電話か…）を指定します。複雑なので細かいことは解説しません。

外部リソースの場合、メディアが合致しないと読み込まれません。省略した場合、"all"（全てのメディア）になります。

さて、以上で前置きは終了です。次にrel属性の値を紹介します。rel属性によって、指定されたURLの意味が決まります。

alternate

この文書の代わりとなる別バージョンの文書へのハイパーリンクです。例えば、hreflang属性と組み合わせて「英語版」とかそういったことが可能です。

author

この文書の著者のページへのハイパーリンクです。

help

ヘルプページへのハイパーリンクです。現在のページに応じて状況に合わせた適切なヘルプとなっていることが望まれます。

icon

ページのアイコンを表す外部リソースです。よくブックマークとかタブとかにアイコンが指定されていますが、あのアイコンを指定します。

license

そのページが著作権で守られていることを説明する文書へのハイパーリンクです。

next

現在のページが複数のページのうちの一つであることを示し、次のページを示すハイパーリンクです。

pingback

pingbackサーバーのアドレスを示す外部リソースです。

prefetch

事前に読み込むべき外部リソースを示します。

prev

nextと対になるもので、前のページを示します。

search

このページ及び関連ページを対象に検索を行う機能がある場合、そのアドレスを示すハイパーリンクです。

sidebar

その文書が、ブラウザのサイドバーに表示される予定の文書であることを示すハイパーリンクです。

stylesheet

スタイルシートを利用するときに使えます。読み込んで適用されるべきスタイルシートを示す外部リソースです。

tag

この文書に関連するタグ（といっても<tag>のことではなく、ブログなどで記事を分類するのに付けられたりするアレ）を示す文書を示すハイパーリンクです。

たくさんありますが、適切に使いましょう。

また、先に紹介したtype属性がapplication/rss+xmlまたはapplycation/atom+xmlの場合、alternateでそのURLを指定することでRSSやAtomを使用することができます。これらはサイトの更新情報などを配信するのに利用されるものです。興味があれば調べてみましょう。

link要素にうまく対応しているブラウザの場合、どこかに関連リンクとしてハイパーリンクを表示してくれることでしょう。

a要素とrel

ちなみに、a要素にもrel属性があり、a要素が作るリンクの意味を説明します。大体同じ値が使えますが、一部に違いがあります。

まず、icon,pingback,stylesheetは使えません。

そして、a要素でしか使えないものが数個あります。

external

そのリンクは外部サイト（別のサイト）へのリンクであることを表します。

nofollow

この文書の作者は、リンク先の文書を保証しないことを示します。

noreferrer

ブラウザに、リファラー情報（リンク元の情報）を送信しないよう要求します。

base要素

base要素は、相対URLのベースURLを変更することができます。

a要素の紹介をしたときに相対URLの説明をしました。「http://～」から始まるようなものを絶対URLなどと言ったのに対し、ただ単にファイル名を書くと同じディレクトリ（フォルダ）のファイルを表す、などといった書き方を相対URLといいました。

相対URLの基準になるディレクトリは、そのファイルがあるディレクトリでした。だから、例えばディレクトリの移動をしない相対URLの場合、同じディレクトリのファイルということになります。

実はbase要素は、その基準のディレクトリを変更することができるのです。その新しい基準はhref属性に書きます。

例えば、head要素の中に次のように書いたとします。

<base href="http://example.com/">

見て分かる通りbase要素も空要素ですが、こうすると、例えばbody要素中で<a href="index.html">と書いたとき、そのリンクはhttp://example.com/index.htmlへのリンクになります。

また、その性質上、base要素を使用する場合、他のURLが登場するより前に書かないといけません。基本head要素の中なのでbody要素よりは確実に前になるのですが、同じhead要素中で使われるlink要素に注意しましょう。link要素より前に書かないといけません。

またもう1つtarget属性があります。これは実はa要素にもある属性でしたがa要素のときに紹介していませんでした。

target属性はブラウジングコンテキストを表す文字列を指定します。ブラウジングコンテキストとは何かというと、簡単にいうとブラウザの画面のような感じです。つまり、どの画面で開くかということです。

ブラウジングコンテキストには名前が付いているので、その名前を指定します。今回は詳しく紹介しませんが、次回また少し紹介する機会があります。

また特殊なキーワードがあります。特によく使われるのは"_blank"というキーワードでしょう。これは、一般的に「リンクを新しいタブ（やウィンドウなど）で開く」というものです。つまり、新しいブラウジングコンテキストを要求するということですね。しかし、リンクを新しいタブで開くかどうかというのは本来ユーザーが決めるものなので、使いどころには注意しましょう。

<a href="http://google.com" target="_blank">

というようにした場合、Googleが新しいタブ（など）で開かれます。そしてbase要素のtarget属性ですが、これがあるとデフォルト（a要素にtarget属性がない場合）のブラウジングコンテキストを変更することができます。例えばbase要素のtarget属性に"_blank"を指定しておくと、基本的にリンクが新しいタブで開かれるようになります。