では、ブラウザはどのようにHTMLファイルを読み込み、そして表示しているのであろうか。
先ほど述べたように、『 < 』 と『 > 』で囲まれたタグによるマークアップがポイントとなる。
ブラウザは、HTMLファイルに書かれた文字列を先頭から順に読み込んでいく作業を行っている。
それがタグに影響されていない普通の文章であった場合、その文字列はそのまま表示される。
一方、タグの先頭の合図である < がきたときは、末尾の合図である > がくるまでの部分をタグとみなし、
そこ書かれた内容は文字列としては表示せず、書かれたタグの文法にしたがってそれ以後の文章にその効果を反映させるのである。
なお、タグの効果は、効果の終了を示すタグまで続くものがほとんどで、開始のタグが<○○○>であった場合は、</○○○>が終了を示すタグとなる。
つまり、開始タグ<○○○>と終了タグ</○○○>はセットになっていることが多く、この二つに囲まれた部分が○○○の影響をうけるのである。
また、任意の開始タグから終了タグまでのかたまりの事を要素（elemnent）という。
例えば、文字に色をつけるためのタグ <FONT color="red">を使い、文章にマークアップすると以下のようになる。
見た目が悪くなってしまうのを防ぐため、
<FONT color="red">カボチャの煮込み時間を減らす</FONT>ためにこの前処理を行っておきます。
↓
ブラウザで読み込むと…
見た目が悪くなってしまうのを防ぐため、
カボチャの煮込み時間を減らすためにこの前処理を行っておきます。
<FONT color="red">が開始タグ、</FONT>が終了タグで、
その間の『カボチャの煮込み時間を減らす』がFONT color="red"の効果を受けている内容となる。
どんなに複雑なWebサイトであっても、このような簡単なタグによる要素の重なり合いによって構成されている。
つまり、W3Cで規定されたタグの種類とそれらの使い方を学ぶことが、
HTMLの学習、すなわちWebサイトの構築の学習と同義なのである。
※補足１：タグの中は半角英数字で記述するが、大文字でも小文字でもかまわないが小文字が推奨されている。
※補足２：要素は入れ子構造となっており、どちらかがどちらかを完全に含むようにする。例えば次のようになる。
見た目が悪くなってしまうのを<font
size="-1">防ぐため、
<font color="red">カボチャの<font color="blue">煮込み時間</font>を減らす</font>ためにこの前処理を</font>行っておきます。
↓
要素の包容関係はこのようになる
見た目が悪くなってしまうのを<font size="-1">防ぐため、
<font color="red">カボチャの
<font color="blue">煮込み時間</font>を減らす</font>ためにこの前処理を</font>行っておきます。
↓
ブラウザで読み込むと…
見た目が悪くなってしまうのを防ぐため、
カボチャの煮込み時間を減らすためにこの前処理を行っておきます。
※補足３：タグによってはタグ名の後に属性を指定することができる。
補足２の例でみれば、color="blue" や size="-1" が font の属性である。
特に color や size の部分を属性名、"blue" や "-1" の部分を属性値といい、
属性値はダブルクオーテーション（ " ）でかこったほうがよい。
| 