16.3.1. HTML 文書の概要と基礎知識
HTML では「タグ」というものを使って文章の構造を定めます。これからタグを一つ一つ読み解いていきましょう。
HTML 文書の大域的構造 #
HTML 文書は、大まかに次のような構造をしています。
(文書のヘッダ情報) (本文)DOCTYPE 宣言 #
まず 1, 2 行目に という文字列があります。これは文書型宣言といいます。実は HTML にはいくつかバージョンがあり、皆さんがこれから学ぶ HTML は HTML 4.01 Transitional というものに従っています。そのことをウェブブラウザに教えてあげなければならないので、HTML 文書の 1 行目には必ずこれを書きます。はいぱーワークブックで学ぶ事を用いる限りにおいては、文書型定義には上に書いたものをそのままコピー&ペーストすれば OK です。しかし別のバージョンの HTML を書こうとするときは、文書型宣言もそれに合わせて書き換えてください。
ちなみに HTML は SGML と呼ばれる言語によって定義されていて、その定義のことを文書型定義 (DTD) と呼びます。文書型宣言の中に現れる DTD というのは、このことを指しています。http://www.w3.org/TR/html401/loose.dtd に DTD 本体があるので、気になる人は覗いてみてください。
html タグ #
次に というタグが現れます。これは「ここから先が HTML 文書である」ということを意味するタグです。一方 HTML ファイルの最後を見ると と書かれているかと思います。これは HTML 文書の終わりを意味するタグです。このように HTML では、基本的に開始タグ・終了タグという 2 つのタグで挟んだ文字列に意味を持たせるということをします。lang=”ja” というのは、文書が日本語であるという意味です。
ヘッダと本文 #
その下にさらに
, で挟まれた部分と , に挟まれた部分が続きます。 タグで挟まれた部分には文書の基本的な情報、たとえばタイトルや文字コードなどが書かれます。次に続く タグで挟まれた部分が本文に該当します。HTML ファイルには , で囲まれた部分と , で囲まれた部分を1回ずつ、しかもこの順で書かなければいけないということが HTML の文書型定義に記されています。以上に挙げたことは、HTML 文書を書く上で必要不可欠なことです。ですから、一から HTML ファイルを書くときは、これらの決まりを必ず守るようにしてください。予め雛形を用意しておき、それをコピーするようにすると便利でしょう。
HTML の用語 #
サンプルの HTML 文書中で、 タグは次のように使われていました。
…こ の左の を開始タグ、右の を終了タグといいます。また lang=”ja” は , の部分が日本語で書かれているということを意味しています。このようにタグで挟まれた文書に情報を付け加えるものを、属性と呼びます。
一般に HTML 文書中で
と 書かれているとき <tag …> を「開始タグ」、 を「終了タグ」と呼び、attr=”…” の部分をタグの「属性」と呼びます。属性は 2 つ以上書かれることもあります。また、<tag …> から までの全体を「tag 要素」という言い方で表します。たとえば
東大太郎の自己紹介
と書かれているとき、タグまで含めた全体を h1 要素と言います。これらの用語はHTML文書を扱う上で頻繁に用いられるので、覚えておいてください。
さて、HTMLではタグで挟まれた文書の中にさらにタグを書きます。例えばサンプルのHTML文書中では
東大太郎の自己紹介<\
となっていますね。一般に
というようにタグが配置されているとき、「tag1 要素は tag2 要素の親要素である」「tag2 要素は tag1 要素の子要素である」という言い方をします。ここで注意すべきことがあって、HTMLでは次のような書き方は禁止されています。
こう書くと、