原文URI：http://ici.virtualave.net/html/ ［rewrite 2002.05.01］
2002年6月現在、WWWで公開されるWebコンテンツとして最もポピュラーなのはHTMLによってマークアップ（意味付け）されたHTML文書（ハイパーテキスト）です。本稿ではHTMLを解説しますが、その前にWWWの創成について触れておきましょう。
1989年、WWWはティム・バーナーズ＝リー博士によって、CERN（欧州合同原子核研究機構）内部の情報システムとして提案されました。
CERNには何千人もの科学者が入れ代り立ち代わり研究に訪れ、それぞれが異なるコンピュータと異なる文書システムを使っていたため、情報の共有が大きな課題となっていました。この機種やシステムの違いを乗り越えるために、彼はインターネットでコンピュータを結び、共通の約束に従って文書を公開して相互参照する仕組み、すなわちWorld Wide Web（WWW）を考えたのです。
中略
環境に依存しない情報共有を実現するために、WWWでは、インターネットにつながったコンピュータが、次の基本的な約束に基づいて、それぞれ独自に働きます。
- ネットワーク上の情報を一意に特定するアドレス指定方法（URI）
- コンピュータ同士が情報をやり取りするためのルール（HTTP）
- 環境にかかわりなく情報を一貫した方法で表現する文書記述方法（HTML）
HTMLはHTML文書を作成するためのマークアップ言語です。
HTMLにはいくつかのバージョンがあります。代表的なHTMLとしては、ISO-HTML（ISO/IEC 15445:2000）、HTML4.01Strict、HTML4.01 Transitional、HTML4.01 Frameset、HTML 3.2などがあります。またHTMLの開発は既に終了しており、2000年以降はXMLの仕様に基づいて定義し直したXHTML1.0、XHTML1.1といったXHTMLの開発が進められています。
本稿では、W3Cが勧告したHTMLとしては最後のバージョンであるHTML4.01Strictを解説します。HTML4.01Strictは枯れた仕様ですが、多くの先進的な発想が盛り込まれています。2002年現在、HTML4.01Strictの解説は十分に有用といえます。またHTML4.01StrictはブラウザなどUA（ユーザエージェント）側の実装が十分に進んでおり、PCでも携帯電話でも読めるサイトを作ることができます。
HTML文書の実体はテキストファイルです。したがってHTML文書の作成に必要なエディタは、テキストファイルを読み書きできるものなら何でもかまいません。例えばOSに付属しているテキストエディタで十分です。Windows ならメモ帳（NotePad）、Macintosh なら Simple text 、unix なら Mule などで結構です。
HTML文書作成専用のエディタ、WYSIWYGでHTML文書を作成できるソフトなどもあります。HTMLについて理解が深まってきたら、ご利用になるのもよいでしょう。
文書はタイトルや見出し、あるいは段落などのさまざまな要素（element）によって構成されています。しかしコンピュータはテキストからタイトルや見出しを自動で判断することができません。
HTML文書は文章に内在する要素（タイトル＝title要素／見出し＝heading要素／段落＝p要素／etc）をタグ（tag）を使って明示します。すると、HTMLを解釈するコンピュータなら文書の要素を判断できるようになります。
<p>段落です。一部分を<em>強調</em>してみます。</p>
これはHTML文書の一部を抜き出した例です。<p>から</p>までが段落を示すp要素です。<em>から</em>までが強調を示すem要素です。
要素の開始と終了を示すため、開始タグ（start tag）と終了タグ（end tag）が用意されています。開始タグには<要素名（または略号）>、終了タグには</要素名（または略号）>という形式が定められています。例えばtitle要素の終了タグは</title>になります。
開始タグと終了タグに囲まれた部分を要素の内容（content）といいます。
HTML4.01Strictではタグの記述に大文字小文字の区別はありません。しかしXHTMLでは小文字に限定されていますから、小文字による記述を推奨します。
内容がない要素（例えば改行を示すbr要素）では終了タグを省略しなければなりません。このような要素を空要素といいます。なおXHTMLでは空要素でも終了タグを省略してはいけないので、注意が必要です。
タグは単に要素の開始と終了を明示するための記号に過ぎません。要素とタグはまったく別のものです。ところが、少なからずの書籍、解説サイトが要素とタグをを混同しています。よく注意してください。
文章に潜在的に存在する要素をタグで明示していくことをマークアップ（markup）と呼びます。HTML（HyperTextMarkupLanguage）とは、その名の通りマークアップによりハイパーテキストを作成するための言語といえます。
HTML文書は必ずルート（html）要素から枝分かれしたツリー構造になります。このため、各要素は整然とした入れ子構造を持たなければなりません。誤った例を示します。
<p>段落です。一部分を<em>強調</p>してみます。</em>
p要素の中にem要素が入る、という入れ子構造が破壊されていることに注目してください。このようなマークアップはHTMLのすべてのバージョンで禁止されています。
簡単なHTMLの書き方 - HTML入門
簡単なHTMLの書き方
HTML文書を書くのに何も難しく考える必要はありません。普通に文章を書いていって、後からその内容にそったマークアップをすればいいだけです。
この文章をHTML文書にすると、例えば以下のようになります。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>簡単なHTMLの書き方 - HTML入門</title>
</head>
<body>
<h1>簡単なHTMLの書き方</h1>
<p>HTML文書を書くのに何も難しく考える必要はありません。普通に文章を書いていって、後からその内容にそったマークアップをすればいいだけです。</p>
</body>
</html>
ギョッとしたでしょうか。難しそうに見えますが、一歩ずつ段階を踏んでいけば意外にルールは簡単です。落ち着いて解説を読み進めてください。
HTML文書は2つの部分から構成されます。
マークアップ言語には非常に多くの種類があります。バージョン違いなど非常によく似たマークアップ言語も多数存在するため、コンピュータが使用されているマークアップ言語の種類を自動で判別することは不可能です。ですから、マークアップされた文書の先頭では、必ずどの種類、どのバーションのマークアップ言語を使用しているのか、宣言して明らかにする必要があります。この宣言のことを文書型宣言（document type declaration）あるいはDOCTYPE宣言と呼びます。
文書型宣言は単に書いてあればいいというものではありません。文書型宣言はそのマークアップ言語のルールに従って作成されたという宣言ですので、必ず宣言したマークアップ言語のルール通りに文書を作成しなければなりません。
本稿では私が使い慣れたHTMLであるHTML4.01Strictを解説しますので、本稿にしたがって作成されたHTML文書ではHTML4.01Strictの文書型宣言をしてください。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>と</html>で囲まれた部分がhtml要素です。HTML文書では、文書型宣言を除く文書全体をひとつのhtml要素とします。
<html>
<head>
<title>簡単なHTMLの書き方 - HTML入門</title>
</head>
<body>
<h1>簡単なHTMLの書き方</h1>
<p>HTML文書を書くのに何も難しく考える必要はありません。普通に文章を書いていって、後からその内容にそったマークアップをすればいいだけです。</p>
</body>
</html>
html要素は大きく2つの要素からなります。
<head>
<title>簡単なHTMLの書き方 - HTML入門</title>
</head>
<head>と</head>に囲まれた部分がhead要素です。ここにはそのHTML文書についての情報を記述します。例えば、文書のタイトル、使用している文字コードセットなどです。
上の例では文書のタイトルのみを記述しています。<title>と</title>に囲まれた部分が文書のtitle（タイトル）を示すtitle要素です。title要素はhead要素内に必ずひとつだけ存在しなくてはなりません。
<body>
<h1>簡単なHTMLの書き方</h1>
<p>HTML文書を書くのに何も難しく考える必要はありません。普通に文章を書いていって、後からその内容にそったマークアップをすればいいだけです。</p>
</body>
<body>と</body>に囲まれた部分がbody要素です。この中に文書の実際の内容となる要素を記述します。今回の例では、文書の内容として1つの見出しと1つの段落があります。
<h1>と</h1>に囲まれた部分は見出し（heading）を示すheading要素です。headingの頭文字をとって開始タグは<hn>、終了タグは</hn>と記述されますが、nは1から6までいずれかの数字で、見出しの階層をあらわします。数字が小さくなるほど上位階層の見出しとなります。例えばh2要素はh2要素の内容の一部であり、h2要素はh1要素の内容の一部という具合です。文書の構造上、見出しの階層は1つずつ変えていくべきで、見出し1の次に見出し3などがあるのは望ましくありません。
<p>と</p>に囲まれた部分は段落（paragraph）を示すp要素です。例では段落は1つだけですが、多くの文章は複数の段落から構成されています。段落が複数ある文章は段落の数だけp要素をマークアップします。
<p>第一段落</p>
<p>第二段落</p>
HTML文書作成の練習をしてみましょう。課題例文1のマークアップに挑戦してください。
HTMLでよくある誤解
見出し要素に関するよくある誤解
h1～h6は文字のサイズを指定する
h1～h6は見出しをあらわす要素で、文字のサイズを指定するものではありません。
h1～h6は見出しの文字のサイズを指定する
上の誤解に比べればまだマシですが、これも間違いです。正しくは「見出しのレベルを指定する」です。
見出しはh7まで存在する
これはいったい誰が言い始めたのか知りませんが、HTMLにはh7要素は存在しません。見出しのレベルは1～6までです。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>HTMLでよくある誤解</title>
</head>
<body>
<h1>1. HTMLでよくある誤解</h1>
<h2>1.1. 見出し要素に関するよくある誤解</h2>
<h3>1.1.1. h1～h6は文字のサイズを指定する</h3>
<p>h1～h6は見出しをあらわす要素で、文字のサイズを指定するものではありません。</p>
<h3>1.1.2. h1～h6は見出しの文字のサイズを指定する</h3>
<p>上の誤解に比べればまだマシですが、これも間違いです。正しくは「見出しのレベルを指定する」です。</p>
<h3>1.1.3. 見出しはh7まで存在する</h3>
<p>これはいったい誰が言い始めたのか知りませんが、HTMLにはh7要素は存在しません。見出しのレベルは1～6までです。</p>
</body>
</html>
文書型宣言はHTML4.01Strictとしています。
HTML4.01Strictでは文書型宣言とtitle要素以外はすべて明示する必要がありません。しかしXHTMLでは逆に一切の省略が許されないため、将来のXHTML移行を考えるなら省略すべきではありません。
例では多くの改行を用いていますが、これは単に読みやすくしているだけです。HTML文書では内容中の2つ以上連続した空白、内容外のすべての空白、すべての改行とタブは無視されます。HTMLの記述において、作成者は自分が見やすいように適宜改行や空白を入れてかまいません。ただし、全角スペースは一文字分の空白として処理されます。
「HTMLでよくある誤解」はすでにtitle要素としてマークアップされていますが、本文にもタイトルを書いておきたいと考えて、改めて見出しとしてマークアップすることにしました。これはこの例ではそうしているというだけで、タイトルを改めてを見出しとしてマークアップしなければいけないわけではありません。
さて、この場合、最も上位の見出しは「HTMLでよくある誤解」になります。そこで、この見出しを最も重要な見出し――h1要素としてマークアップしました。
h1要素の次に来るのは第2レベルの見出しです。この例では「見出し要素に関するよくある誤解」がそれに相当します。今度はh2要素としてマークアップしました。
次は第3レベルの見出しです。「h1～h5は文字のサイズを指定する」、「h1～h5は見出しの文字のサイズを指定する」、「見出しはh7まで存在する」のそれぞれが第3レベルの見出しになります。
残った部分は段落としてマークアップして、HTML文書は完成です。HTML4.01Strictでは、body要素はblocklevel要素、del要素、ins要素、script要素、noscript要素以外を含むことができないので、見出し以外の部分も必ず適切な要素を選択してマークアップしておく必要があります。
作成したHTML文書の表示結果を見てみましょう。
私たちが普段目にする文章（書籍や雑誌など）では、文書の構造をレイアウト情報などから推測することしかできませんが、HTMLでは文章をマークアップし要素を明示することで、文書の構造をはっきり示すことができます。しかしHTMLの能力は要素の明示に特化しており、レイアウトなどの表現方法は指定できません。
なぜHTMLは文書構造のみを示し、表現方法は指定できないのでしょうか。それは、HTML文書が様々な環境で利用されることを想定しているためです。
例えばHTMLで「赤色、太文字、大きめに表示」と指定されたHTML文書があるとしましょう。このHTML文書を音声読み上げブラウザは、一体どう読んだらよいのでしょうか。データベースを作成するWWW巡回ロボットは、一体どの部分をキーフレーズと判断すればよいのでしょうか。結局、HTML文書を解釈するユーザーエージェントのタイプ毎に表現方法が異なることに、気付かれることでしょう。そして、もしあらゆるユーザーエージェントを想定してあらゆる表現方法の指定を行うとすれば、その作業は膨大なものとなることでしょう。
HTMLが表現方法ではなく文書構造を記述するのは、HTML文書が多くのユーザーエージェントを対象としているためです。HTMLで適切にタイトル、見出し、段落といった要素がマークアップされていれば、表現は各ユーザーエージェントが責任を持って行うという仕様を、HTML4.01Strictでは採用しています。例えば、「視覚系ブラウザは見出しの文字を太く、大きく表示」「読み上げブラウザは見出しを大きな声で、ゆっくり読む」「巡回ロボットは見出しをキーフレーズと判断する」といった具合に。
では表現方法を指定する手段はないのでしょうか。じつは、表現方法の指定のためにスタイルシートというHTMLとは別の仕組みが用意されています。スタイルシートでは、いくつかのユーザーエージェントに対して、特定の表現方法を指定することができます。
スタイルシートには様々な種類がありますが、HTML文書用としてポピュラーなのがCSSです。CSSでは、文字の大きさ、レイアウト、読み上げ速度、印刷の用紙サイズなど多種多様な指定をすることができます。
HTML文書は世界中のあらゆる環境で利用されることが想定されています。携帯電話など画面の貧弱な環境、音声出力など画面のない環境、情報収集プログラムへのデータ出力など画面も音もない環境でさえ全く問題なく利用できるように、HTMLの仕様は定められています。環境に依存したHTML文書を書くべきではありません。環境に依存したHTML文書は、どんな環境でも利用できるというHTMLの利点を殺すことになります。
「赤い字に注目してください」といった文書の記述は、よくありません。色彩を解釈しないユーザーエージェントの存在もさることながら、スタイルシートはユーザー側でも指定できるという事実は重大な意味を持っています。HTML文書の製作者がどんな表現方法を指定しても、ユーザーはそれを無視できるのです。それをユーザーの横暴というのは当っていません。HTML文書は、表現によらず情報を伝えられるように書かれるべきなのです。ブラウザで表示結果を確認しながらHTML文書を作成するのは愚かなことです。あなたの利用しているブラウザは、世の中に無数に存在するユーザーエージェントの一部に過ぎません。
リンク先はISBNなので、現時点［2002-09-24］では参照しても意味がありません。