HTML講習3
一つ前
[id:tsugehara:20060617:1150532854]
概要
HTML講習の第二章を記述する。
この講習の本題であるため気合を入れる事。
例によって講習対象者の購読はメリット・デメリットを理解の上でお願いしたい。
本文(HTMLの言語（文書）構造)
前置き
HTMLを本当の意味で理解するには、HTMLの仕様書を見るのが一番いいのは当然です。
http://www.w3.org/TR/html4/
しかし原文は英語ですし、色々な解釈が出来る文章に対する正しい解釈、あるいはデファクトスタンダードとなった解釈等は、やはりこういった講習資料でまとめる方がわかりやすいと思います。
上記を踏まえ、厳密に仕様書に準拠しているわけではないものの、実務で使える知識に重点を置いて解説するものとします。
また、本書ではStrictとTransitionalの各DTDの違いについては記述しません。
当然Strict的な書き方は推奨しますが、ここまで話を広げるには時間が足らないためです。興味のある方はHTML4で掲示された二つのDTDを、よく見比べて見る事をお薦めします。
HTMLの構造
HTMLには大きく分けて以下の存在によって構成されます。
- 要素
- 属性
- テキスト
要素とは、<html>や、<form>等を指します。
属性とは、<p align="right">でいうところの「align="right"」を指します。正確には「align」が属性名、「right」が属性値となります。
テキストは<div>Hello Wolrd</div>でいうところの「Hello World」が該当します。
HTMLはシンプルな言語なので、部品としてはこの程度しかありません。
特に意識するべきは「要素」という存在で、HTMLはこの要素を組み合わせる事によって文書に意味付けを行っています。属性はその要素を拡張しているだけであり、テキストは完全に文章なので、HTMLという言語を理解しようと思えば、この要素を理解する必要があるのです。
HTMLの要素には多くの種類、具体的には仕様書に定義されているだけで91もの要素が存在します。
ただ、これらの要素には分類が存在し、その分類を理解することでHTMLはずっと解読がしやすくなります。
以下に要素の分類を挙げます。
- 基本要素
- ブロック要素
- インライン要素
- 子要素
もう少し小分けにするなら次の分類に分けることも出来ます。
| 分類 | 要素種別 | 解説 |
|---|---|---|
| 基本要素 | ルート要素 | HTML文書に一つだけ存在する文書 |
| 基本要素 | HTMLの子要素 | ルート要素の子要素という表現も出来る。 |
| 子要素 | 子要素 | ある特定の要素の下にしか記述出来ない要素。 |
| 子要素 | ヘッダ内要素 | 一部にインライン要素も含む。 |
| ブロック要素 | ブロック要素 | コンテナとして機能する要素。 |
| ブロック要素 | リスト要素 | リスト内の要素は子要素 |
| ブロック要素 | テーブル | テーブル内の要素は子要素 |
| ブロック要素 | フォーム | フォーム内の要素は子要素、インライン要素も存在する。 |
| インライン要素 | インライン要素 | コンテナにはならない要素。 |
| 子要素 | フレーム | 少し特殊な位置付けの要素。 |
これはすなわち、普段何気なく使っている次のような文書が、
<html> <head> <title>テスト</title> </head> <body> <p> <b>テストページ</b> </p> </body> </html>
次の構造に置き換えられるという事を示しています。
<ルート要素> <HTMLの子要素> <ヘッダ内要素>テスト</ヘッダ内要素> </HTMLの子要素> <HTMLの子要素> <ブロック要素> <インライン要素>テストページ</インライン要素> </ブロック要素> </HTMLの子要素> </ルート要素>
一度に沢山掲載しすぎても混乱してしまうと思うので、先に挙げた四つの分類で考えて見ましょう。HTMLはこうなります。
<基本要素> <基本要素> <子要素>テスト</子要素> </基本要素> <基本要素> <ブロック要素> <インライン要素>テストページ</インライン要素> </ブロック要素> </基本要素> </基本要素>
先に掲載した細かい分類を中分類、今挙げた大きな分類を大分類とするなら、最低限大分類までを理解することを目標にしましょう。
これが、HTMLという言語の基本だからです。
ブロック要素とインライン要素
原則として、HTMLの文書の構造を示すのは「ブロック要素のみ」です。
ブロック要素でブロック要素内の文書に対する意味付けを行い、追加で何か意味付けや表現を行う場合にインライン要素を使用します。例えばインライン要素の代表格である「BR」や「IMG」等の要素は、文書の構造を示すのではなく文書の付加情報を示しています。「ここで改行します」「ここに画像を表示します」といった表現の仕方ですね。
対して、ブロック要素の代表格である「H1」や「TABLE」などは、ここは見出しです、ここはテーブルです、といった意味を表します。
インライン要素にブロック要素を含めることは出来ません。前述のようにインライン要素はブロック要素の付加情報としてのみ記述するべきものであり、もしインライン要素でブロック要素を囲おうとしても、違うブロック要素が文書に出現した時点でインライン要素の効力は失われます。
※失われない場合はブラウザのバグです。
ブロック要素は種類によって、ブロック要素内にインライン要素しか記述出来ないもの、特定の子要素とインライン要素しか記述出来ないもの、ブロック要素内にブロック要素もインライン要素もなんでも格納出来るもの、等色々あります。詳細は後述します。
また、ブロック要素はその性質上、前後に改行が行われます。
色々と書いてきましたが、ブロック要素は要するに段落を表すということなのです。
段落には改行が必要ですよね？
基本要素や一部の特殊な子要素を除けば、HTMLは主にこの二つの要素で構成されることになります。
と、ここまで書いて
え、これ2時間で終わるか？
という気がしてきた。
これから具体的な要素の解説に移るわけだが・・、ちょっと考え直した方がいい気がしてきた。
