Class G

HTMLについて

HTMLの成り立ちや、基本的な文法について

とりあえず、HTMLって簡単?

結論としては、簡単とは言えません。そして難しいとも言えません。

HTMLはレイアウトを作るのではなく、構造を記述する。

これはキーワードです。これをすんなり受け入れられるか否かによって、その難易度は大きく変わるかも知れません。ともかく、やる気は必要です。あくびしながら覚えられるようなものではありません。

じゃあ、「構造を記述する」って一体なんなのか。これは順を追って見ていく方がいいでしょう。

HTMLとは?

ハイパーテキスト

HTMLは Hypertext Markup Language の頭文字語です。

ハイパーテキストは、関連した情報をあるテキストで結びつけ、いつでも参照可能にする機能を持っています。この参照する機能を「ハイパーリンク」と言います。単にリンクとも言います。このハイパーリンクを含む文書のことを「ハイパーテキスト」と呼んでいます。

HTMLは、テキスト文書をハイパーテキスト文書へするためのマークアップ言語です。

WWWとHTML

その昔、CERN(ヨーロッパ原子核研究機関)では多くの国から研究者が訪れ共同で研究しており、様々な国の人々が入れ替わり立ち替わりで研究に訪れていました。この為、研究の経過や資料などの情報を共有することが困難で、まさに「論文を書くより読む方に時間が掛かる」というような状況でした。

そこで、必要な情報を必要な時に簡単に取り出せるシステムを求められていました。

そして1989年、ティム・バーナーズリー氏によってあるシステムが提案されます。彼の提案したシステムは、組織やプロジェクトの変化や発展に対応する高い拡張性を持ち、コンピュータの機種などの環境に依存せずに情報の処理や相互交換を行えるものでした。これがすなわち World Wide Web、通称「WWW」です。

WWWでは、文書をコンピュータで処理させ、情報ネットワークを作ることを目標としました。コンピュータで文書を処理するには、コンピュータにとって解析しやすい書式が必要になります。そこでティム氏はSGMLを参考にします。

SGMLとは、コンピュータ間で文書を交換することを目的とした言語(メタ言語)で、特徴はタグと呼ばれる識別子を使用して文の構造を記述すると言うことです。

構造を記述するというのは、環境に依存させない為に重要です。人間は文字の大きさや配置などレイアウトを見て、どこが見出しかや本文かなどを理解することができますが、コンピュータはこのような情報からでは、どこをどう解釈すればよいか判断がつきません。

さらに、世の中には様々なコンピュータが存在します。当然、色を表現できなかったり、画像が表示されなかったり、それこそ携帯電話のような小型端末や、音声読み上げ装置など、実に多様です。すなわち、コンピュータによる情報ネットワークを構築するには、いかなる環境であっても文書がテキストの羅列ではなく、文書として成り立つものでなければなりませんでした。

この用件にSGMLは見事に答えることが出来ます。

そしてついに、SGMLを参考にしたHTMLが誕生しました。HTMLは、その「Hyper Text」の名が示す通り、ハイパーリンクによる情報と他の情報の関連付けが大きな特徴となります。

HTMLは、WWWの構築に必要なハイパーリンクと構造記述の特徴を併せ持ったのです。

SGMLについて

HTMLの元がSGMLであることは前項で述べましたが、それではSGMLとはなんでしょうか。

SGMLというのは、文書の論理構造を定義するための決まりを定義するものです。簡単に言えば言語を作るための言語で、メタ言語と呼ばれます。

SGMLは、使用用途に応じて様々な形態の論理構造を作ることができ、これらをタグセットと言います。

初めてSGMLが策定されたのが1980年で、この時はまだGMLという名称でした。ISO規格となったのは1986年のことで、この時に名称がSGMLになります。この頃に使われていたのはパソコンではなく事務机ほどの大きさのあるワープロ専用機でした。このワープロは機種が違えば文書のレイアウトも違うため、各文書を相互に利用することが困難な状態であったようです。

この問題を解決するために、文書のレイアウトではなく、文書の意味(論理構造)を記述することによって汎用性を持たせようと考案されたのがSGMLです。

SGMLは、以下のような構成になっています。

SGML宣言

ここで、以下のDTDや文書インスタンスを作るための最も基本的な決まりを定義します。

どのような文字を使うのか、どのような区切り子を使うのか、大文字小文字は区別するのかなど、様々事を定義します。

例えばHTMLでは、タグの区切り子は "<",">" で、大文字小文字は区別しないとなっています。

DTD

文書インスタンスで使うことのできる要素や属性を定義するものです。内容とすることのできる要素を定義したり、属性値のデータ型を定義したりするものです。

HTML4.01のDTDを読むならば、DTDの読み方をご覧下さい。

文書インスタンス

単に文書と呼ぶこともあります。

インスタンスとはオブジェクト指向プログラミングでも使用される言葉で、クラスから実際に生成されたオブジェクトの実体(実際の値)のことをこう呼びます。

SGMLでは、実際に定義されたDTDやSGML宣言を元に生成されるマークアップされたタグ付き文書のことで、普段私達がHTMLを使用してWebサイトとして作成しているのはこれのことです。

SGMLとHTML

HTMLは、SGMLのタグセットの一つです。つまり、SGMLのWeb文書記述用タグセットがHTMLというわけです。そしてHTMLのSGML宣言やDTDを定義しているのがW3Cという組織です。

しかしHTMLはSGMLのタグセットの中でも異色です。SGMLというのは先に述べた通り、本来は文書の論理構造のみを定義するためのものですが、HTMLではレイアウトまで定義しています。

これは、SGMLの精神に反しています。そのため、近年W3Cではレイアウトはスタイルシートで定義し、HTMLは論理構造のみを定義することを推奨しています。

このようになってしまったのは、HTML3.2の頃で、その頃の Netscape Navigator や InternetExplorer が独自に採用していた要素や属性が既にデファクトスタンダード(事実上標準)になりつつあったため、仕方なく取り入れたという経緯があります。

結局HTMLは難しいの?

たしかに、「HTMLは簡単」とはとても言えません。とっつきにくいのは事実です。しかしそれほど難しいわけでもありません。

一番わかりにくいのは、やはりSGMLの根本である論理構造でしょう。「構造を記述する」と言われても最初はよくわからないものです。これについては、SGMLが出来た経緯であるSGMLについてを読み直すことで、ある程度理解できるかもしれません。

HTML文書の構造

文書型宣言

HTMLはバージョンによって使える要素や属性が異なります。これを明確にする為に文書型宣言を使って文書内で使用するHTMLのバージョンのDTDを明記します。

これが無い文書は不正です。以前は、文書型宣言の無い文書はHTML2.0と見なしなさいというお達しが出てましたが、現在では各ウェブブラウザの判断に任せるようなことが書かれています。従って、これがない文書はどのような解釈をされても文句は言えません。

以下は、本リファレンスで扱っている、HTML4.01の各文書型宣言です。

HTML 4.01 Strict DTD

本来のHTMLの機能を見直した、厳格なHTMLです。これは非推奨となった要素や属性を全て破棄し、フレーム定義用の要素や属性も含みません。BODY要素直下に[INLINE]を配置できなくなるなど、Transitionalとは若干異なる点もあります。

このDTDを用いて文書を作成する場合、次の文書型宣言をします。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional DTD

移行型HTMLです。従来のHTMLからHTML4.01 Strictへの移行のためのDTDで、要素や属性を含んでいます。しかし、従来の要素や属性のいくつかは非推奨とされ、実際Strictでは破棄されており、あくまで移行型です。

このDTDを用いて文書を作成する場合、次の文書型宣言をします。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset DTD

フレーム定義用HTMLです。Transitional DTDの全てに加えて、フレーム定義用の要素と属性が追加されているものです。

フレームを使用する場合は、フレーム設定文書に必ず次の文書型宣言をします。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
        "http://www.w3.org/TR/html4/frameset.dtd">

DOCTYPEスイッチ

直接HTMLとは関係無いのですが、最新のウェブブラウザはこの文書型宣言ごとに表示モードを切り替える機能を持っています。これをMicrosoftにならってDOCTYPEスイッチと呼ぶことにします。

最近ではウェブブラウザは、W3Cの規定に従うようになってきています。しかし実際のWebサイトは今だ規定通りの解釈ではないウェブブラウザに合わせたHTMLやCSSが記述されていることが多く、いきなりW3Cの規定通りの表示しかできないようになると少し困ったことになってしまいます。

そこで、「過去の規定通りではない表示を再現する(過去との)互換モード」と「仕様通りの解釈をする標準モード」を文書型宣言で切り替えることができます。

以下にHTML 4.01のみの文書型宣言による切り替え表を示します。

DTD	システム識別子	InternetExplorer6	Mozilla系(Moz,NS)	Opera7
HTML 4.01 Strict	なし	標準モード	標準モード	標準モード
HTML 4.01 Strict	あり	標準モード	標準モード	標準モード
HTML 4.01 Transitional	なし	互換モード	互換モード	互換モード
HTML 4.01 Transitional	あり	標準モード	標準モード	標準モード
HTML 4.01 Frameset	なし	互換モード	互換モード	互換モード
HTML 4.01 Frameset	あり	標準モード	互換モード	標準モード

HTML文書の基本構造

HTML文書の基本構造は次のようになっています。

先頭に(HTML要素よりもはやく)、文書型宣言を必ずを含む。
文書型宣言に続いてHTML要素がくる。
HTML要素の内容には HEAD要素,BODY要素が、この順番で現れる。

簡単なHTML文書の例を以下に示します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <title>HTML文書の構造</title>
  </head>

  <body>
    ...本文...
  </body>
</html>

文書型宣言の意味

HTML 4.01 の文書型宣言を分解してみましょう。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">

<!

文書型宣言はタグではありません。先頭の「<!」は、開始タグ開始区切り子「<」に「!」が繋がっているのではなく、「<!」を一組でマーク宣言開始区切り子です。

DOCTYPE

このマーク宣言が文書型宣言であることを示します。これからこの文書中で使用するDTDについて宣言することを示します。

HTML

文書のルート要素を指定します。HTMLのルート要素はHTML要素なので、ここは必ずHTMLになります。

PUBLIC

文書が公開されている事を示します(公開文書)。「PUBLIC」が指定された時は公開識別子を書かなければなりません。公開識別子を使わなかったり、無かったりする場合でDTDをURIで直接示すは、「SYSTEM」を指定します。

"-//W3C//DTD HTML 4.01//EN"

この部分をフォーマル公開識別子といいます。特定の公開文書を示す恒久的な識別子で、PUBLICが指定された場合は必ず記します。ここで使われる「//」は区切り文字です。

-//W3C

この公開文書の所有者を示します。

国家規格、工業規格や、ISOに登録された所有者の場合は先頭に"+//"が付加されます。

それ以外の所有者の場合は、"-//"が付加されます。

ISOの規格の場合は特殊で、"-//"や"+//"は付加されず、規格番号がそのまま記述されます。

例えば、ISO-HTMLの文書型宣言は以下のようになります。

<!DOCTYPE HTML PUBLIC "ISO/IEC 15445:2000//DTD HTML//EN">

DTD

この公開文書がDTDであることを示します。

HTML 4.01

この公開文書が何の為のものかを示します。

EN

この公開文書の言語を示します。勝手にJAとかしちゃいけません。

"http://www.w3.org/TR/html4/strict.dtd"

システム識別子と言い、DTDのありかをURIで示します。公開識別子が記述されている場合は省略できます。

以下は同じDTDを指定しています。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<!DOCTYPE HTML SYSTEM "http://www.w3.org/TR/html4/strict.dtd">

マークアップの仕方と注意

要素

HTMLとは見栄えを決定せず構造を記述するのですから、HTML文書は、表題や本文・コメントなど、さまざまなパーツに分けられることになります。この一つ一つのパーツの事をHTMLでは「要素 (Element)」と呼びます。このそれぞれの要素の開始部分と終了部分を示すものがタグです。

要素の内容のことは、そのまま「内容 (Content)」と呼びます。

以下に、実際のマークアップ文とその用語の定義を示します。

<p>TEXT</p>

P要素: <p>TEXT</p>
P要素の開始タグ: <p>
P要素の内容: TEXT
P要素の終了タグ: </p>

とかくタグと要素は混同しがちですが、タグ(Tag)という英単語は「荷札」というような意味です。これが示すとおり、タグは特定の要素の範囲を示す目印であり、要素を荷物と考えると、タグはそのものずばり荷札です。

属性

ほとんどの要素には「属性 (Attribute)」をつけることができます。属性とは、要素に対して情報を付加するもので、要素毎に属性は異なります。例えば、ハイパーリンクを提供するA要素は、参照先のURIを示す href属性を持つことができます。

属性は「属性名="属性値"」で記述し、開始タグの要素名のあとにスペースで区切って複数指定可能です。

以下に、実際のマークアップ文とその用語の定義を示します。

<a href="http://www.example.com">TEXT</a>

A要素: <a href="http://www.example.com">TEXT</a>
A要素の開始タグ: <a href="http://www.example.com">
href属性: href="http://www.example.com"
A要素の内容: TEXT
A要素の終了タグ: </a>

属性値を引用符で囲むかどうかについては、Tips - 属性値の引用符をご覧下さい。

文字参照

文字参照とは、HTML文書に含んでよい文字を数値や象徴名称を用いて表現することです。あまり使われない文字や入力が難しい文字、危険な文字などをこれを使って表現すると便利です。

文字参照は「&」ではじまり「;」で終わります。この文字参照そのものを示す時も先頭の「&」は文字参照で示します。よく使う文字参照には以下のものがあります。

< …… < 記号を表す。
> …… > 記号を表す。
& …… & 記号を表す。
" …… " 記号を表す。
  …… 記号(空白文字)を表す。
© …… © 記号を表す。
™ …… ™ 記号を表す。
&hearts; …… ♥ 記号を表す。

文書内にコメントを書くには以下のようにします。

<!-- ここはコメント -->
<!-- ここはコメント
      一行を越えるコメントもできる -->

コメントはSGMLの注釈宣言でタグではありません。従って先頭は「<!」のSGMLマーク宣言開始区切り子で始まります。マーク宣言開始区切り子のあとはいかなる文字の侵入も許しませんので、空白など入れずにコメント開始区切り子 -- を記述して下さい。

-- から -- までを一つのコメントとします。以下にトリッキーな書き方の有効なコメントと不正なコメントの例をあげます。

有効なコメント:
<!-- コメント -->
<!--- コメント -->
<!-- コメント -- --コメント-->
<!-- コメント --        >
<!---------------------------->
<!>
<!--
    コメント
-->

不正なコメント:
<!- コメント ->
<! コメント >
<!-- コメント --->
<!
    -- コメント --
>
<!-- コメント -- コメント -->

空白文字

HTMLでは以下の文字が空白文字として定義されます。

ASCIIスペース (ASCII space)
改ページ (ASCII form feed)
復帰 (Carriage Return(CR))
改行 (Line Feed(LF))
復帰/改行の組 (CRLF)
水平タブ (ASCII tab)
ゼロ幅スペース (Zero-width space)

HTMLでは改行は意味を持たないので空白文字とされます。連続する空白文字、または改行は一つの空白文字として扱われます。空白文字を連続する場合は実体参照を用いて下さい。

ゼロ幅スペースというのは馴染みがありませんが、他国言語で使われるそうです。

また、後述のSGML行区切り機構との衝突で、開始タグ直後か終了タグ直前の空白文字は表示されないかもしれないことを覚えておいてください。

行区切り機構との衝突を避けるために、著者は次のように書くべきであり

HTML 4.01 <strong>Strict/Transitional/Frameset</strong> Reference

次のように書かないように注意すべきです。

HTML 4.01<strong> Strict/Transitional/Frameset </strong>Reference

行区切り

SGMLでは、開始タグ直後の改行と終了タグ直前の改行は共に無視するべきとされています。これはHTMLでも同様ですので、以下の二つは全く同じように表示されることが望まれます。

<p>こんにちは。「わ」じゃなくて「は」です。</p>

<p>
こんにちは。「わ」じゃなくて「は」です。
</p>

しかし、実際に多くのウェブブラウザでは[INLINE]に限り、この改行を空白文字として表示してしまうことが多いようです。注意しましょう。

HTMLの歴史

歴史というか、それぞれのHTMLについてというか。

HTML (原型)

1991年、ティム・バーナーズ・リーらのWWWを作るためのプロジェクトチーム「World Wide Web Project」が発表。

この頃はまだSGML宣言なども無くかなり不完全なもので、正式なSGMLアプリケーションではありませんでした。

HTML+ (廃案)

1993年、HTMLの拡張として開発されていたようですが、結局破棄されてしまったようです。

HTML+の案はHTML3.0として拡張されながら持ち越されているようですが、結局HTML3.0もInternet Draftのまま、期限切れで破棄されてしまいます。

HTML 2.0

1995年にIETFのHTML Working Group(既に1996年に閉鎖)から、RFC1866として制定されました。

HTML文書中で使える文字がUS-ASCII(ISO646 IRV)のみですので、日本語のHTML文書を書くことができません。

既にRFC1866はObsoleted(旧式)とされていますので、これからHTMLを書く場合、このDTDを使わないようにして下さい。

HTML3.0 (廃案)

1995年、WWWの生みの親、ティム・バーナーズリー氏が会長のW3CがHTML+を大幅に拡張し、ハイレベルなHTMLへと作りかえ、Internet Draftとして提出されたものです。しかし、InternetExplorerとNetscapeNavigatorの独自拡張という、その頃のデファクトスタンダードを無視することもできないので、うまく調整/統合ができないか試みたようですが、できないまま期限切れとなり、結局破棄されてしまいます。

ここで要素の属性やTable(表)などが確立されました。また数式表現というものも取り入れられていて、現在それはMathMLという別のものに生まれ変わっています。

というわけで、結局HTML3.0は存在しません。

HTML 3.2

1997年に勧告されたバージョンで、この頃のInternetExplorerとNetscapeNavigatorの独自拡張という、デファクトスタンダードを仕方なく取り入れたものです。

見栄えに関する要素や属性が多く取り入れられました。

本来、HTML3.2はHTML2.0の上位バージョンということで、文書中にUS-ASCII以外の文字を使用することができません。従って、HTML2.0同様日本語の文書を作ることができません。とはいえ、その頃のウェブブラウザは日本語表示に対応していたため、実際には問題はありませんでしたが、仕様上は誤りでした。

ちなみに、この仕様はまだ生き残っており、使うことができます。HTML4.01を使わずにこれを使う意味は全くないですが…。

HTML i18n(2.x)

1997年にIETFによって、RFC2070として制定されました。SGML宣言中の注釈文に記されていたことから、このHTML i18nのことをHTML 2.xと呼ぶ人もいます。これ以降、HTMLの規格化はW3Cに任されます。

HTML2.0の国際化版で、文字集合がUnicodeになったり、各要素の属性にlang属性などが追加されたりしました。よって日本語(多言語)が使える初めてのHTMLということです。

「i18n」とは「internationalization」のことで、単に初めの i から最後の n までの間に18文字あるからi18nと省略されているだけです。

既にRFC2070はHistorical(旧式)とされていますので、これからHTMLを書く場合、このDTDを使わないようにして下さい。

HTML 4.0

1998年に勧告されたバージョンで、HTMLの本来の機能を見直し、論理構造とデザインの分離やアクセシビリティの配慮などを盛り込みました。また、正式な仕様ではなかったフレームについても定義されました。

HTMLの本来の機能を見直したStrict、HTML3.2からStrictへ移行するために従来との互換性を持たせたTransitional、フレームを使うためのFramesetの三種類のDTDが存在します。

CSSとの関係や矛盾などの修正で、HTML4.0はHTML4.01で上書きされています。使う場合は4.01を使いましょう。

HTML 4.01

1999年に勧告されたバージョンで、HTML4.0の修正版。

XHTML 1.0

2000年に勧告されたバージョンで、HTML4.01をXMLに準拠するように再定義したものです。

いままでSGMLをベースとしてきたHTMLですが、ここでXMLベースへと切り替わります。この時点で「HTML」というもののバージョンアップは終わりました。

XMLとかは説明できるほど知らないので省きます。

XHTML 1.1

2001年に勧告されたバージョンで、要素や属性をモジュールと呼ばれるそれぞれのタグセットに分けることで、必要な機能や新たな機能を拡張できるようにしたものです。

ここで、Strict/Transitional/Framesetなどの区別はなくなり、基本は全てStrictのみとなります。実際にはFrame用のモジュールを組み込むことでフレームが使えたりします。たぶん。

ウソ書くとまずいので、このへんで終わります。