正しいHTMLのための若干の知識
これまで説明した要素は一般の文書とも共通する考え方でしたが、HTMLにはオンラインドキュメントとしてのいくつかの約束があります。正しいHTMLを書くための知識として知っておきたいことにも少し触れておきます。
目次:
特殊な文字
タグを示す記号である <
や >
は、本文にそのまま記述するとタグと混同されてしまうので、例えば数式で不等号が必要なときなどは、何か別の方法でこれらの記号を示さなければ成りません。こうしたHTMLで特別な意味を持つ文字は、次のようにして表現します。
(表示...記述)
< ... < > ... > & ... &
このように&
と;
で文字の呼称(例えば < は less than なので lt )をはさんで示す表記法を実体参照と呼びます。実体参照を使って、ここに挙げた文字のほか、アクセント記号のついたアルファベットなども表すことができます。一覧表はこのサイト内のSpecial Character Tableを参照。
署名しよう
誰が書いたかわからない文書というのは、ちょっと不気味なものです。会社で無記名のレポートを受け取ったら、きちんとした内容に見えても「ひょっとすると怪文書?」と、まともに取り上げないでしょう。文責を明記するのは、パブリックな文書では最低限のマナーです。
普通のレポートなら表紙に作者を明記すれば十分ですが、オンライン文書の場合は若干事情が異なります。通常の文書と違い、ウェブのページはどんな順序で読まれるか、どこから参照されるか予測できません。検索サイトの結果はサイトの目次ページがヒットしているとは限らず、ここからやってくる人は、一連の文書の途中から読み始めることもあります。そのため、オンライン文書はすべてのページ(ファイル)に署名しておくべきなのです。
このために、HTMLには address という要素があり、一般に作者のメールアドレスや、トップページ(あるいは作者紹介ページ)へのリンクを記述します。さらに、ぜひ更新日付(あるいは未完成の文書ならその旨の注記)も含めておいてください(HTML5ではfooter
要素が導入されたので、「連絡先」と日付をまとめてここに書くのもよいでしょう)。あなたの情報が歓迎されるかどうかは、このような署名や日付によって大きく左右されるのです。
(例)
<footer>
<address>
<a href="./">ホームへ</a> <a href="mailto:yourmail@domain.com">作者へのメッセージ</a> </address> 2002-02-04更新 </footer>
*2番目のa要素の中にあるmailto:で始まるURLはメールアドレスを記述するもので、ブラウザはこのURLを使ってメールソフトを起動したりできます。
address要素はブロックレベル要素のグループに属します。この要素はページの最後に置くことが多いようですが、冒頭において最初に作者を明記しても構いません。文書中に何回でも記述することができますから、最初と最後に書くのもありです。
○:こういうことの大切さはあとになって気付くことが多いのですが、たくさんのHTMLファイルを作ってから全部に署名と日付を書き加えるのは一大事です。入門書では省かれてしまう「サイン」ですが、ぜひ最初からこの習慣を身に付けましょう。なお、このセクションの論点については、「スタイルガイド」のサインしよう、進捗状況を明記しようのページも参照してください。また、日付の書式については当サイトの日付の表記に関するノートも参照してください。
コメントを入れておく
自分の書いた文書でも、時間が経つとどこに何があったのか、どんなつもりでこの要素(タグ)を使ったのか、分からなくなってしまうものです。作者のための覚え書きとして、HTML文書中に(画面には表示されない)コメントを入れておくのは、将来のためにも良い考えです。
HTMLのコメントは、<!--
で始め、コメントの内容を記述し、最後に-->
で閉じます。
(例)<!--ここはコメント-->
のように記述した部分は、画面には表示されません。複数行にまたがるコメントもOKです。書きかけのテキストの一部をコメントにして表示しないようにすることもできます。ただし、ブラウザの「ソースを表示」という機能を使うとコメントも含めて全て表示されますから、あまり格好悪いことは書かない方が安全でしょう...
×:コメントの書き方にはかなり誤解があります。詳しく知りたい方は正しいコメントを書こうを参照して下さい。
マーク付け言語に関する情報
XHTMLやHTMLの文法は多くのソフトにとって既知のものなので、メディアタイプがtext/html
であることをサーバーから示されるだけで(ローカル環境なら、拡張子などで判断して)ブラウザは文書をそれらしく処理することが可能です。一方、ウェブ上にはさまざまなマーク付け言語が登場してきており、それらを処理するユーザエージェントも処理状況も多様化してきています。こうした中で、どんなエージェントや状況(メディアタイプが示されない、タグセットが混在するなど)でも適切な処理を可能にするためには、XHTML/HTMLでマーク付けされていることを文書自身も何らかの方法で明示する必要があります。
文書型宣言
HTML5では文書の先頭に次の文書型宣言を置きます。
(例)
<!DOCTYPE html>
HTML4以前のバージョンには、それぞれの文書型宣言があります。この宣言は、SGML以来の懐かしい伝統で、文書がX/HTMLであることと(FPIによって)そのバージョンを示します。新しいブラウザは、このバージョン情報などよってスタイルシートの解釈を変更することがあります。
XML名前空間によるタグセットの明示
XHTMLとしてXMLの利点を生かすためには、ルート要素であるhtml
タグに、XHTMLの名前空間を明記します。これによって、文書を正しくXLSTで処理したり、同じ文書にSVG、MathMLなどの他の言語を混在させることができます(HTMLではなくXHTMLとする必要があります)。
(例)<html xmlns="http://www.w3.org/1999/xhtml"
>
XML名前空間は今後いろいろな局面で重要になっていくので、ぜひ文書をXHTMLで記述し、この宣言を加えてください。
文書型宣言でDTDを指定すると、そのDTDに定義されていない他の言語(RDF、SVG、MathMLなど)を直接利用することはできず、Extensible(拡張可能)というXHTMLのメリットが生かせません(混在させるには専用のDTDが必要)。文法に適合しているかどうかを検証可能にしたい、特定のバージョンを示したい、ブラウザのCSSモードを制御したいなどの目的があれば必要ですが、そうでなければ、この宣言でDTDを指定しないほうが複数の語彙を組み合わせるなど柔軟にXHTMLを使えます(この場合でも、XML名前空間は宣言してください)。
HTML4.01などのSGMLベース言語でマーク付けしたいという場合は、形式的には文書型宣言は必須です。また、文書型宣言を記述しないと、X/HTMLの文字実体参照は、<
、>
、&
などXML仕様書で定義されているもの以外は、そのままでは使えないことにも注意が必要です(数値参照は可)。
文書型を宣言する、しないにかかわらず、文書が整形式(タグの入れ子関係が正しい)であることはXHTMLの必須条件で極めて重要な意味を持ちますから、これは忘れずにチェックしてください。
文字コード情報
Webにはいろいろな言語の情報が存在します。また、ややこしいことに同じ日本語を表現する方法も複数存在します。ときどきブラウザで文字が化けてしまうのは、文書の文字コードの判定に失敗して、違った文字コードで表示してしまった結果です。
文字コードが色々あることは、ブラウザの「表示→文字コード」あるいは「フォント」といったメニューを開いてみるとある程度わかります。日本語の文字コードについて詳しく知りたい場合は、「日本語と文字コード」のページを参照。
meta要素による文字コード情報
作者は、meta要素をheadの中に埋め込むことで、文書の文字コード情報を示すことができます。meta要素はさまざまな「メタ情報」(文書という情報自身に関する情報)を示すための働きをするものです。
HTML5では、次のようにシンプルに文字コード情報を示すことができます。
(例)
<meta
charset
="UTF-8" />
この文字コード情報は、英数字以外の文字が出てくる前に示してください。meta要素で指定する場合、title要素などに日本語を使うならば、それよりも前に置かなければなりません。
サーバーからの文字コード情報
文書がどんな文字コードで書かれているかという情報は、本来はサーバーが送り出すことになっています。正しい文字コード情報が送られてくれば、ブラウザはその情報に基づいて、文書を適切に表示することができます。サーバーがApacheなどの場合は管理者だけでなく一般ユーザも「.htaccess
」というファイルに
(例) AddType "text/html; charset=UTF-8" html
という1行を加えるだけで、拡張子「html」を持つ全てのファイルに、文字コードがUTF-8であるという情報を加えることができます。
- 当サイト内「HTTPヘッダのメタ情報」
- 村田真氏ほか「charsetパラメタの勧め:HTMLにおける文字符号化スキームの明示方法」
XML宣言
XHTMLの場合、サーバーで文字コードを設定できず、文書の文字コードがUTF-8
もしくはUTF-16
でない時は、XHTMLの先頭にXML宣言をおき、符号化(エンコーディング)情報を示さなければなりません。
(例) <?xml version="1.0" encoding="Shift_JIS"?>
サーバーの設定、文字コードにかかわらず、仕様書ではこの宣言を書くことが強く推奨されています。
その他のmeta要素
一般的にmeta要素は、表現しようとする情報の名前やタイプを表す属性と、その値を表すcontent属性をセットにして使います。文字コードのように本来サーバーから送られる情報は、その情報タイプをhttp-equiv属性によって記述します。
(例)<meta http-equiv
="Content-Type" content
="text/html; charset=UTF-8
" />
HTML5での記法は、この中間部分(http-equiv
~text/html;
)を省いて簡単に記述できるようにしたものです。
http-equiv属性の代わりにname属性を使うと、content属性と組み合わせていろいろな情報を示すことができます。たとえば author
なら作者を示すことができますし、keywords
やdescription
をつかうと、サーチエンジンのロボットに対して情報を提供できます。
(例)
<meta name="author" content="Masahide Kanzaki" /> <meta name="keywords" content="HTML, やさしい, ためになる" /> <meta name="description" content="やさしくてためになるHTMLの解説" />
meta要素も内容を持たない空要素なので、XHTMLの場合はタグを" />"で閉じます。
- meta要素の意味と役割については当サイト内「HTMLのメタ情報」を参照