図1-1　HTMLファイルはヘッダー部とボディ部に分かれている
HTMLファイルは＜html＞で始まり，＜/html＞で終了する。その中は＜head＞と＜/head＞で挟まれたヘッダー部と，＜body＞と＜/body＞で挟まれたボディ部に分かれている。

[画像のクリックで拡大表示]

図1-2　HTMLは ＜ と ＞ で囲んだタグを使う
多くのタグは，指定する範囲を示すために＜XX＞（開始タグ）と＜/XX＞（終了タグ）を組にして使う。一方，ケイ線や改行など，指定する範囲がないタグは終了タグなしで使う。

[画像のクリックで拡大表示]

表1-1　HTMLの基本的なタグ
記事で紹介したタグを中心に，比較的よく使うタグを掲載した。

[画像のクリックで拡大表示]

　Part1ではHTMLの基本を確認するために，30行程度のテキストが書かれたHTMLファイルを例に，その内容を解析していく。インターネットに公開されている見栄えのいい企業のWebページでも要素が増えているだけで，個々の要素を取り出してみれば，基本は同じである。

中身はタグを含んだテキスト

　図1-1[拡大表示]は，HTMLファイルの中身（ソース）と，それをWebブラウザで表示した結果である＊表示した結果である。

　Webブラウザの表示と，HTMLソースを見比べると，ブラウザのウインドウに表示している文字がそのままHTMLソースに書かれていることがわかる。

　また，HTMLソースのいたる所に ＜ と ＞ で囲まれた半角英数字＊半角英数字が書かれている。実は，これがHTMLを読み解くカギとなるタグである。WebブラウザがHTMLファイルを表示するときに，文字の大きさを指定したり，画像データを貼り付けたりする指示が書かれている。実は，Webブラウザが表示している文字以外の情報は，すべてタグで指示されている。

　WebブラウザはWebサーバーから受け取ったHTMLデータを最初から順番に読んでいって，タグで記述された付加情報を解釈しながら自身のウインドウ内に文字や画像を適切な大きさで配置していく。

　このようにWebページを記述するHTMLでは，Webブラウザが表示する文字はそのまま記述し，タグを使って印（マーク）を付けた部分で見栄えやリンク先，静止画の貼り付けなどを指示するわけだ。

　このようにマークを付けながら記述する言語は，マークアップ言語と呼ばれる。もともとHTMLは，汎用のマークアップ言語であるSGML＊SGMLを基に，インターネットでの情報共有向けに作られた仕様である。

ヘッダー部とボディ部に分かれる

　ブラウザ・ソフトと同じように，もう少し細かくHTMLソースを読んでいくことにしよう。HTMLソースを見ると，最初に＜html＞タグが書かれている＊書かれている。また最後には＜/html＞タグが書かれている。HTMLファイルは必ず，これら二つのタグでHTMLの始まりと終わりを宣言する。

　＜html＞と＜/html＞タグで囲まれている部分は，ヘッダー部とボディ部に分けられる。ヘッダー部はWebページのタイトルを指定したり，HTMLファイルを記述している文字コードを宣言したりと，Webページの付加的な情報を記述する部分である。＜head＞と＜/head＞タグで囲んだ部分がヘッダー部になる。

　一方のボディ部はヘッダー部の後ろに続き，＜body＞と＜/body＞タグで囲まれた部分である。ここが，WebブラウザのウインドウにWebページとして表示する本体部分である。

　まとめておこう。

●HTMLファイルは＜html＞タグで始まり，＜/html＞で終わる
●その中はヘッダー部とボディ部に分かれる
●ヘッダー部はHTMLソースの前半にあり，＜head＞と＜/head＞タグで囲まれる
●ボディ部はHTMLソースの後半にあり，＜body＞と＜/body＞で囲まれる

　これが，HTMLの文書構造の基本である。

タグを入れ子にして使う

　さらに，細部を見ていこう。

　ボディ部の最初には，「＜b＞＜font size="+3"＞我が家の掲示板＜/font＞ ＜/b＞」と書かれている（図1-2(1)[拡大表示]）。これは，＜b＞と＜/b＞タグで囲んだ部分を太文字にし，＜font size="+3"＞と＜/font＞で囲んだ部分を通常よりも3段階大きい文字にする指定だ。＜font size="+3"＞は＜font＞タグに属性を追加したもの。size属性に+3という値を指定している。

　つまり，「我が家の掲示板」という文字は2種類のタグによって修飾されている。この結果，文字は大きく（＜font…＞と＜/font＞指定），太く（＜b＞と＜/b＞指定）表示される。

　以上のように，多くのタグは ＜XX＞というタグと，＜/XX＞ というタグとを組にして使い，適用する範囲を指定している。＜XX＞ は開始タグ，＜/XX＞ は終了タグと呼ばれる。

　ただし，終了タグを使わないタイプのタグもある。例えば，図1-2(2)[拡大表示]の部分に使っている＜hr＞タグがそうだ。＜hr＞は，ブラウザのウインドウ内に横のケイ線を引くためのタグ。横線を引くだけなので，適用範囲を指定する必要がないため，終了タグを使わずに単独で使っている＊単独で使っている。

　また図1-2(1)[拡大表示]では，二つのタグが入れ子になっている＊入れ子になっている。そもそも，すべてのタグは，＜html＞と＜/html＞タグで囲まれているので，入れ子になっているといえる。

　このように，タグが何重にも入れ子になるのが，HTMLの特徴である。さまざまな要素が貼り付けられて複雑そうに見える企業のWebページも，開始タグと，組になった終了タグを一つずつ探し出して，入れ子構造を調べれば解析できる。

タグの種類はさほど多くない

　あらゆるWebページは，HTMLが定めているタグを使って作られている。もちろん，タグだけでは表現できない場合はあるが，HTMLはそんなケースを想定して，スクリプトを埋め込むしくみや，ほかのアプリケーションで再生するコンテンツをWebページ内に貼り付けるしくみを用意している。それらも，タグで表現する。ただ，よく使うタグは40種類程度と意外に少ない（表1-1[拡大表示]）。

　ここまで来れば，HTMLを読み解く基本は習得できたといってもいいだろう。では，今どきのWebページはどうやって作られているのか。Part0で紹介したようなWebページは，どこにどんな工夫があるのか——Part2以降で解き明かしていこう。