17.3.1 HTML 文書の概要と基礎知識

HTML では「タグ」というものを使って文章の構造を定めます.これからタグを一つ一つ読み解いていきましょう.

HTML 文書の大域的構造

HTML 文書は,大まかに次のような構造をしています.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html401/loose.dtd"> <html lang="ja"> <head> (文書のヘッダ情報) </head> <body> (本文) </body> </html>

DOCTYPE 宣言

まず 1, 2 行目に <!DOCTYPE …> という文字列があります.これは文書型宣言といいます.実は 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 lang=”ja”> というタグが現れます.これは「ここから先が HTML 文書である」ということを意味するタグです.一方 HTML ファイルの最後を見ると </html> と書かれているかと思います.これは HTML 文書の終わりを意味するタグです.このように HTML では,基本的に開始タグ・終了タグという 2 つのタグで挟んだ文字列に意味を持たせるということをします.lang=”ja” というのは,文書が日本語であるという意味です.

ヘッダと本文

その下にさらに <head>, </head> で挟まれた部分と <body>, </body> に挟まれた部分が続きます.<head> タグで挟まれた部分には文書の基本的な情報,たとえばタイトルや文字コードなどが書かれます.次に続く <body> タグで挟まれた部分が本文に該当します.HTML ファイルには <head>, </head> で囲まれた部分と <body>, </body> で囲まれた部分を1回ずつ,しかもこの順で書かなければいけないということが HTML の文書型定義に記されています.

以上に挙げたことは,HTML 文書を書く上で必要不可欠なことです.ですから,一から HTML ファイルを書くときは,これらの決まりを必ず守るようにしてください.予め雛形を用意しておき,それをコピーするようにすると便利でしょう.

HTML の用語

サンプルの HTML 文書中で,<html> タグは次のように使われていました.

<html lang="ja"> … </html>

こ の左の <html> を開始タグ,右の </html> を終了タグといいます.また lang=”ja” は <html>, </html> の部分が日本語で書かれているということを意味しています.このようにタグで挟まれた文書に情報を付け加えるものを,属性と呼びます.

一般に HTML 文書中で

<tag attr="..."> … </tag>

と 書かれているとき <tag …> を「開始タグ」,</tag> を「終了タグ」と呼び,attr=”…” の部分をタグの「属性」と呼びます.属性は 2 つ以上書かれることもあります.また,<tag …> から </tag> までの全体を「tag 要素」という言い方で表します.たとえば

<h1>東大太郎の自己紹介</h1>

と書かれているとき,タグまで含めた全体を h1 要素と言います.これらの用語はHTML文書を扱う上で頻繁に用いられるので,覚えておいてください.

さて,HTMLではタグで挟まれた文書の中にさらにタグを書きます.例えばサンプルのHTML文書中では

<body> <h1>東大太郎の自己紹介&lt;\</h1> </body>

となっていますね.一般に

<tag1><tag2> … </tag2></tag1>

というようにタグが配置されているとき,「tag1 要素は tag2 要素の親要素である」「tag2 要素は tag1 要素の子要素である」という言い方をします.ここで注意すべきことがあって,HTMLでは次のような書き方は禁止されています.

<tag1><tag2> … </tag1></tag2>

こう書くと,<tag1>, </tag1> で囲まれた部分と <tag2>, </tag2> で囲まれた部分が交差してしまい,うまく親子関係が定まりません.HTML では要素の親子関係が正しく決まるようにしなければならないので,タグを打つときは気をつけてください.開始タグと終了タグを必ずセットで入力する癖をつけておくと良いでしょう.