HTMLは1989年3月にSGML（Standard Generalsed Markup Language - ISO8879:1986）をベースとしてTim Berners-Leeが発案したマークアップランゲージで、後の1994年にHTMLの仕様を策定するW3Cが発足しています。この章ではHTML発案以前のWWW（World Wide Web）に関する歴史でHTMLに大きく関係するものを取り上げます。
ハイパーテキストの概念の大元となった概念は1945年にVannevar Bushが発表した「我々が考えるように」というタイトルの論文に出てくるMemexです。Memexは1945年、アメリカ軍の原子爆弾開発計画「マンハッタン計画」の指揮を勤めるVannevar Bushが考案したシステムで、大量の資料をいつでも簡単に取り出せるようにするシステムを目的として、関連した情報を容易に閲覧でき、容易に新たな情報を加えることができるシステムでした。資料を撮影するためのカメラと、撮影したフィルムを保存しておくマイクロフィルム、それとマイクロフィルムを投影するスクリーンを持った機械だったようです。
彼が初めてハイパーテキストシステムについての論説を発表したのですが、「ハイパーテキスト」という名前を初めて使ったのは後述するTed Nelsonです。このように彼の思想は先駆的であり、Vannevar Bushの発表した概念が現在私達が利用しているWWWの下地になっています。
XanaduはTed Nelsonが発表したグローバルハイパーテキストシステムの概念で、現在のWWWがこの概念にもっとも近いシステムとされています。WWWの歴史を語る上でなくてはならない概念であり、現在のWWWはXanaduのサブセットとしてその機能の一部を実現するものです。
Ted Nelsonは1965年にACM（Association for Computin Machinery）に提出した論文で、初めて「HyperText」（ハイパーテキスト）という言葉を発表しました。Ted Nelsonは後に、この考え方をSamuel Taylor Coleridge著作の小説に登場する架空都市から名前をとり、Xanaduと名付けました。このXanaduの概念は非常に巨大なもので、現在でもこの機能のすべてを満たすシステムは発表されていません。Xanaduの概念の一部を大雑把に列挙すると次のようなものがあります。
詳細はここでは愛割させていただきますが、リンク、電子出版、ネットワークの利用という部分は現在のWWWでも実現されている部分です。
Xanaduはあまりにも巨大な概念であったため、近年ではサブセットであるWWWに足りない部分を補う形で実現が検討されているようです。彼の発表したXanaduもまた後の技術に大きな影響を与えました。
WWWは1989年にジュネーブ郊外にあるCERN（Conseil europeen pour la Recherche Nucleaire：ヨーロッパ素粒子物理学研究所）に勤めていたTim Berners-LeeとRobert Caillauによって発案されました。
Tim Berners-LeeはCERNにある異なったコンピュータのどれからでも情報にアクセスできるようなリンクされた情報データベース共有システムで、ダム端末（※1）からグラフィカルなX Windowワークステーションまで幅広い種類の端末で文書を共有できるように設計されたシステム、WWWを考案しました。当時、SGMLを使う人は何人かいたようですが、多くの人はTeXやPostScriptを使って文書を作成していました。文書データベースの利用にハイパーテキストを使用するという考えが考案され、非常に習得が困難だったSGMLの一部の機能として独立させることで簡単にし、SGMLのサブセットとしてHTMLが考案されました。ちなみにWWWは正確に言いますとTed Nelsonの提唱したハイパーテキストとは似て非なるものではあります。
このようにHTMLは環境に依存せずに情報を共有するために発案され、そのHTMLを送信するためのプロトコルとしてHTTP（Hyper Text Transfer Protocol）が作られました。
ホストコンピュータが表示する文字列を、単純にスクロールさせながら表示する端末。カーソル移動などの画面制御が可能な端末（こちらはインテリジェント端末などと呼ばれる）と対比して用いられることが多い。
@nifty：デジタル用語辞典：ダム端末（http://www.nifty.com/webapp/digitalword/word/010/01015.htm）より引用
HTMLはSGMLのサブセットとして定義されました。SGMLで定義されたマークアップランゲージはSGMLアプリケーションと呼ばれ、HTMLもSGMLアプリケーションのひとつだということになります。SGML文書にはSGML Declarationと後述するDTDおよびDocument Instanceが含まれます。
HTMLはSGML DeclarationとDocument Type Definitionはすでに用意されていますので、文書の本文をマークアップするだけで文書を作ることができます。
HTMLは文章構造を論理的にマークアップ（意味付け）するための言語で、その文章が見出しなのか段落なのか強調なのかといった構造・意味を定義します。つまり、HTMLは文字の大きさや色などのWebサイトの見栄えをデザインするための言語ではないということです。このことをまず念頭に置いてください。
しかし、Internet ExprolerなどのブラウザでWebサイトを閲覧すると様々な大きさの文字やカラフルな文字が使われていたり、背景に色が付いていたりします。このように見た目もしっかり変わっているのにどうしてHTMLで見栄えをデザインしてはいけないのかと疑問に思う方も多いと思います。なぜHTMLで見栄えのデザインをしてはいけない（むしろ見栄えをデザインできない）かと申しますと、環境に依存しないためです。例えば、ブラウザはInternet ExprolerやNetscape Navigatorのようなグラフィカルなブラウザだけではありません。ブラウザによっては1色のひとつの大きさの文字しか表示できないブラウザや音声で読み上げるだけのブラウザ、さらにHTMLを解釈するプログラムには検索エンジンのクローワやプロクシなども含まれます。こういったHTMLを扱うものの総称をユーザエージェントと呼びます。私の考えではHTMLを解釈するという点で人間もただのユーザだけでなくユーザーエージェントにも分類されるのではないかと考えております。
正しく作られたWebサイトはすべてのユーザーエージェントに正しく解釈されます。例えば見出しは、それとわかるように大きな文字で表示されたり、中央に表示されたり、見出しだけ男性の声で読み上げられたりします。もしここで、Internet Exprolerだと見出しが大きく表示されるからといって文字を大きくするために見出しを使ってしまうと他のユーザーエージェントでは解釈できなくなってしまいます。また、「文字を大きくする」といった物理的な見栄えしか意味を持たないようなものは、音声で読み上げることしかできなかったり、ひとつの大きさの文字しか表示できないようなユーザーエージェントでは解釈できません。
様々な環境、即ち様々なユーザーエージェントでHTMLにアクセスしているユーザーがいるということを忘れないようにしてください。
上記で、HTMLで見栄えをデザインするべきではないと言ってきましたが、やはりデザイン性というものはそう簡単に捨て去ることができるものではありません。そこでHTMLにはデザインを指定するCSS（Cascading Style Sheet）というものが策定されています。デザインにこだわりたい方はCSSを使ってHTMLの見栄えをデザインすることができます。このCSSの目的は見栄えと文章構造を分離することにあります。CSSはユーザーエージェントが表示する見栄えを統一するための技術ではないため、CSSでの見栄えもそれぞれのユーザーエージェントに依存することになります。これはHTMLの本質的なものであり、巷でよく見られるようにそれぞれのブラウザで見た目を統一するといったことは本来のHTMLの思想概念から外れているように思われます。
HTMLの仕様は、現在ではW3C（World Wide Web Consortium）という非営利団体が策定しています。ブラウザの開発ベンダーなどが独自拡張した仕様も存在しますが、基本的にそれらの独自拡張は使用せずにW3Cの策定した仕様に従ってHTMLを記述するべきです。W3Cの策定した仕様は設計段階からアクセシビリティ、ユーザーシビリティ、後方互換などが深く検討されており、W3Cの仕様に従うだけで非常に優秀なHTML文書を作ることができます。もしどうしてもW3Cの仕様に従えない理由がある場合はW3Cの仕様書はあくまで勧告（今のところ標準ではありませんが、現在さらに厳格な文法で標準とする動きもあるようです）ですので無理に従う必要性はないと思いますが、できる限りW3Cの仕様に従うべきだというのが私の考えです。
WWWの思想のひとつには情報のリンクというものがあります。HTMLではリンクなどでリソースの場所を指し示すのにURI（Uniform Resource Identifier）を利用します。URIには聞き馴れないものがあるかもしれませんが、URL（Uniform Resource Locator）というのは皆様ご存じではないかと思います。URLはURIのサブセットですが、URLとURIを置き換えて解釈してもそう間違えはありません。URIは次のように記述されます。
http://ruffnex.oc.to/defolos/
URIの構成はいくつかの部分に分けられます。
一番左に記述されるhttpなどの部分は「スキーム」（Scheme）です。日本語では「命令概念」と訳すことができ、そのリソースにアクセスするために用いるメカニズムの概念の名前です。
よくプロトコルと間違われることがありますが、スキーム名とプロトコル名とは必ずしも一致するわけではありません。例えばmailtoというスキーム名がありますが、この場合「メールを送信する」という命令の概念を表すにすぎません。実際にこの命令を実行するのはSMTPなどのプロトコルです。httpの場合スキーム名とプロトコル名は一致しますが、多くの場合は一致しません。
おそらく「:」が区切りとして用いられます。RFCのスキームリストには「:」をスキームに含めていなかったのですが、W3CのNoteでは「:」もスキームに含める例があり、非常に混乱する部分です。ですのでこの部分は不確かな情報として取り扱いください。
「//」がついているのはリソースがネットワーク上にあることを表します。ローカル内のリソースの場合ホスト名は省略されるため、「///」になります。
ホスト名です。リソースが存在するサーバに割り振られているドメインネームです。
サーバーの中のdefolosというディレクトリのファイルを指定します。ファイル名は省略することができ、その場合サーバで決められたファイル（多くの場合index.htmlやhome.html）やディレクトリにあるファイルリスト、エラーコードなどが返されます。ここで注意していただきたいのは、ファイル名は省略できますが、ディレクトリは省略できないということです。つまり「/」を省略することはできませんが、多くのブラウザではブラウザ側で「/」を補ってくれるようです。
その文書内のある一部分を指し示すURIをフラグメントURIといい、次のように記述されます。
http://ruffnex.oc.to/defolos/test.html#section3
これはtest.thml内にある、nameやidアトリビュートでsection3という名前が付けられた部分を指し示すことになります。
フルURIとは前述の例のようにスキーム名からファイル名（ファイル名は省略可能）までをすべて記述する方式です。相対URIはその文書から見たリソースの位置です。これはUNIXなどのディレクトリ移動などを考えてもらえるとわかりやすいと思います。例えば次のアスキーアートをご覧ください。
+==[defolos]================================================+ | | | +----------+ +----------+ +---------+ +-----------+ | | |index.html| |about.html| |hack.html| |source.html| | | +----------+ +----------+ +---------+ +-----------+ | | | | +==[figure]=============+ +==[source]===================+ | | | +------+ +---------+ | | +----------+ +------------+ | | | | |bg.jpg| |banna.jpg| | | |hello.html| |tab_ins.html| | | | | +------+ +---------+ | | +----------+ +------------+ | | | +=======================+ +=============================+ | | | +===========================================================+
defolosディレクトリ内にindex.html、about.html、hack.html、source.htmlという4つのHTMLファイルとfigure、sourceという2つのディレクトリがあることを表しています。この場合index.htmlからabout.htmlを相対URIで指し示すには「./about.html」と記述します。index.htmlからhello.htmlを指し示すには「./source/hello.html」のように記述します。もしhello.htmlからindex.htmlを指し示すには「../index.html」のように記述します。「.」はカレントディレクトリを表し、「..」は1階層下のディレクトリを表します。
今後の解説では、このディレクトリ構造を用いて解説を行います。
それでは、はじめてのHTMLを書いて見ましょう。サンプルとしてハッキング技術周辺を紹介するようなサイトを想定してWebサイトを実際に書きながら解説を進めていきたいと思います。サイト名は「ハッキングラボラトリ」にしましょう。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head><title>ハッキングラボラトリ - トップページ</title></head>
<body>
<p>これは私のはじめてのWEBサイトです。</p>
</body>
</html>
ソース中の改行はHTMLでは無視されますので、改行してもブラウザでの表示には影響しません。多くの場合ブラウザは適切な位置で自動的に改行しますが、単語の途中などでは出来る限り改行せず、「。」の後ろなどで改行するようにした方が無難です。
HTMLは「タグ」を用いて文章構造を定義します。タグは<html>のような開始タグと</html>のような終了タグを総称して「タグ」と呼びます。<と>に囲まれたhtmlのような文字を「エレメント」（要素）と呼び、langなどの要素の後に続くものを「アトリビュート」（属性）と呼びます。この例では言語を指定しています。また、lang="ja"のjaのようなものを「バリュー」（値）と呼び、この例では日本語を表しています。開始タグと終了タグの間に挟まれた部分を「コンテント」（内容）と呼びます。タグの中には終了タグを省略できるものや、終了タグを書いてはならないものもあります。
ちなみに、エレメント名やアトリビュート名は大文字、小文字で識別はされません。このレポート内では見やすさのため、すべて小文字で書いてあります。HTMLの仕様書の中ではエレメント名は大文字で、アトリビュート名は小文字で記述されていますが、これに習う必要性はありません。
また、バリューは"（ダブルクォーテーション）で囲むようにしてください。バリューに使用できるものは""で囲まれた文字列かname tokenだけです。name tokenは英数字と「.」、「-」、「:」、「_」で構成された文字列で、よくわからないならすべて""で囲んだほうが無難です。
HTML文書は大まかにわけて、次の3つの部分に分けられます。
DOCTYPE宣言（文書型宣言）はそのHTML文書がどのDTD（Document Type Definition：文章型定義書）にのっとって書かれたものなのかを明示します。前述の例では<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">の部分で、空白文字と注釈宣言、処理命令を除いてHTML文書の最初に記述します。これはHTMLにおいては必須で、DOCTYPE宣言を省略することはできません。
HTMLにもバージョンがあり、バージョンによって使えるエレメントやアトリビュート、キャラクタセットなどが異なります。こういった情報はすべてDTDに明記されています。つまりDOCTYPE宣言はHTML文書がどのバージョンやDTDに沿って書かれたものなのかをユーザエージェントに知らせる役割を持ちます。DOCTYPE宣言もいくつかの部分に分けることができます。
マーク宣言開始区切り子です。DOCTYPE宣言はマーク宣言であり、ここからマーク宣言が始まるということを示すものです。マーク宣言の中にはコメントなども含まれます。
マーク宣言の宣言の種類を表します。DOCTYPEは文書型宣言であることを表しています。スペースなどを入れることは許されていませんので、ぴったりくっ付けて記述するようにしてください。
文書型名であり、ルートエレメントを指し示します。ここでHTMLを指定しているのでHTML文書は全体がhtmlエレメントで囲まれています。正確にはhtmlエレメントも省略可能ですが、省略するべきではありません。
外部識別子です。外部に公開されている文書を参照して、PUBLICと書かれている場所に参照した外部文書をそのままコピーすることを表しています。この部分に文書中で利用するDTDをそのまま書いてもいいのですが、あまりにも長くなるため外部ファイルを参照するようになっています。
公開識別子です。HTMLの場合はSGML宣言で「FORMAL YES」と宣言されていますので「公的公開識別子」になります。公的公開識別子は「所有者識別子」（-//W3C） 、「区切り子」（//） 、「文識別子」（DTD HTML 4.0//EN）のように記述されます。所有者識別子は外部文書の所有者を表します。上記の例では所有者はW3Cということになります。また、「-//」ではじまる所有者識別子は未登録所有者識別しになり、その文書の正式登録された所有者がいないことを意味しています。正式登録された所有者がいる場合は「+//」になります。次の文識別子の構成は「公開文種別」（DTD）、「公開文記述」（HTML 4.0）、「区切り子」（//）、「公開文言語」（EN）となります。公開文言語は参照するDTDの言語です。正式なDTDは英語版しかありませんから、ここは常にENになります。これらはすべて大文字で記述します。
システム識別子です。DTDのURIを記述します。これは公開識別子を補足するものであり、公開識別子のみでDTDを識別できるなら省略できます。システム識別子はHTMLの場合、書いても書かなくても問題はありませんが、ユーザーエージェントの中にはシステム識別子の有無で表示形式を変えるものもあります。
マーク宣言終了区切り子です。これによりマーク宣言が終わりであることを表します。
このレポートを執筆している2006年2月20日現在で最新バージョンのHTML4.0には、さらに3つの規格があり、それぞれ参照するDTDなどに違いがあります。
通常HTML4.0といえばこの規格をさします。厳格な決まりがあり、非推奨のエレメントやアトリビュート、バリューなどを一切使わないだけでなく、それぞれのエレメントの配置位置なども厳格に規定されています。また、Strictはフレーム内に出現することはできません。Strictの場合のDOCTYPE宣言は次のようになります。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Strictよりもルーズな規格です。非推奨のエレメントやアトリビュートの使用ができますが、framesetエレメントを使用することはできません。Transitionalの場合のDOCTYPE宣言は次のようになります。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Trasitioalで規定されたエレメントやアトリビュートおよびframesetエレメントを使用することができます。フレームでWEBサイトを構成する場合に使用します。Framesetの場合のDOCTYPE宣言は次のようになります。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
ヘッド部分はHTMLではheadタグによって分けられます（<head>〜</head>の部分）。ヘッド部分にはそのHTML文書のタイトルやメタ情報（文書の中身以外の情報）、スタイルシートやスクリプトなどを記述します。この中でtitleタグは省略することができません。titleエレメントはそのHTML文書の概要を簡単に述べるためのもので、ブラウザの上部に表示されたり、お気に入りの名前になったりします。厳密にはheadエレメントは省略可能ですが、通常省略するべきではありません。
また、ヘッド部分のメタ情報はmetaエレメントで指定することができます。metaエレメントは文書のプロパティ（著者、キーワードなど）を設定したり、それらのプロパティのバリューを設定するのに用いることができます。例えばメタ情報は次のように記述されます。
<meta name="Author" content="Defolos">
これは著者がDefolosであることを表すメタ情報です。nameのバリューはプロパティ名となります。ontentのバリューはプロパティに設定される値となります。プロパティやそのバリューは自分で定義することもでき、その場合プロパティとプロパティに設定されたバリューがどういった意味と関連付けられているのかはheadエレメントのplofileアトリビュートで指定されたリファレンス（URIで指定）に記載されることになります。metaエレメントは必ずプロパティとバリューのペアで用いられ、nameやhttp-equivアトリビュートでプロパティを指定し、contentアトリビュートでバリューを指定します。
meteエレメントのアトリビュートは次のものがあります。
プロパティ名を識別するものとなります。name="keywords"でそのWebサイトに含まれるキーワードを表したり、name="description"でWebサイトの簡単な説明を表したりできます。
プロパティのバリューとなり、プロパティに設定される値を指定します。
プロパティのバリューを翻訳するために利用するスキームの名前を指定します。メタ情報の翻訳上の文脈をより多くユーザエージェントに提供します。例えば日付データに「10-12-05」というフォーマットで情報を設定した場合、これは「2005年10月12日」を表すものなのか「2010年12月5日」を表すのか不鮮明です。そこでscheme="Month-Day-Year"を指定することで「2005年10月12日」を表すものだということをユーザエージェントに明示することができます。
次の例はcontentがISBNだということをschemeを使って明示した例です。
<meta scheme="ISBN" name="identifire" content="4-88718-862-5">
schemeアトリビュートのバリューはnameで指定されたプロパティやprofileでプロパティに関連付けられた意味に依存します。
nameアトリビュートの代わりに用いられます。HTTPサーバーはHTTPレスポンスのメッセージヘッダーの情報源としてこのアトリビュートを参照します。例えば次のようなメタ情報をご覧ください。
<meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS">
このメタ情報の場合、HTTPレスポンスのメッセージヘッダー中のエンティティヘッダーに「Content-Type: text/html: charset=SHIFT_JIS」というヘッダーが付加されることになります。HTTPのヘッダーについてはRFCなどを参照してください。
metaエレメントは開始タグは必須で、終了タグを書くことは禁止されています。
本文はHTMLではbodyタグによって分けられます（<body>〜</body>の部分）。本文にはそのHTML文書の本文を記述します。前述の例では<p>これは私のはじめてのWebサイトです。</p>の部分が本文ということになります。このHTML文書は「これは私のはじめてのWebサイトです。」という内容が段落を表すpエレメントでマークアップされており、ひとつの段落からなる文書であることがわかります。bodyエレメントも厳密に言えば省略は可能ですが、省略するべきではありません。
エレメントはタグがどのような意味を持つものかを定義します。エレメントはブロックレベルエレメントとインライン（テキストレベル）エレメントに大別されます。
通常ブロックレベルエレメントのコンテントはインラインエレメントと他のブロックレベルエレメントになります。また、通常インラインエレメントのコンテントはデータか他のインラインエレメントのみになります。これはブロックレベルエレメントはインラインエレメントよりも「大きな」構造を創り出すという構造上の特徴によるものです。例えば、段落を表すpエレメントはブロックレベルエレメントで、強調を表すemエレメントはインラインエレメントですので次のような記述は文法エラーとなります。
<em><p>強調です</p><em>
ブロックレベルエレメントはインラインエレメントと比べて特異性があります。通常ブロックレベルエレメントは独立した行に配置されます。インラインエレメントは通常その前後で改行されたりせず、その続きに他のデータが続きます。
ブロックレベルエレメントは見出しや段落などの他のデータと独立させる必要性のあるものであり、インラインエレメントは強調やリンクなどの文章中の装飾のようなものです。次の例を見て見ましょう。
<h1>あいさつ</h1>
<p>
ようこそいらっしゃいました。これは私の<em>はじめての</em>WEBサイトです。
まず始めに<a herf="about.html">このサイトについて</a>をお読みください。
</p>
h1エレメントは最も重要な見出しを表すブロックレベルエレメントで、emエレメントとリンクを表すaエレメントはインラインエレメントです。h1エレメントはブロックレベルエレメントですので独立した行に配置され、pエレメントもブロックレベルエレメントですので複数行にまたがりますが独立した行に配置されます。一方emエレメントやaエレメントなどはインラインエレメントですので前後で改行などは行われません。
HTMLでは汎用エレメントにはdivとspanがあります。divはブロックレベルエレメントの汎用エレメントで、spanはインラインエレメントの汎用エレメントです。ちなみにdivはDivisionの略で、区切りのことです。
汎用エレメントとは特に意味を持たないエレメントです。これまで出てきたエレメントはタイトルや強調を表すエレメントなど、なんらかの意味を持っていました。しかし汎用エレメントはそういった意味を持ちません。では汎用エレメントは何のために存在しているのでしょうか。
これらの汎用エレメントは後述するidアトリビュートやclassアトリビュートを一緒に用いることで意味をなします。例えばHTMLには「電話番号」を表すエレメントは存在しませんが、spanエレメントにclass(id)を設定することで「電話番号」を表すことができます。また、同じように「警告」を表すようなエレメントは存在しません（強調を表すエレメントは存在します）が、divエレメントを用いることで「警告」を表すことができます。次の例をご覧ください。
<p>電話番号：<span class="tel">0120-00-0000</span></p>
<div class="worning">
この電話番号は架空のものです。
いたずら電話しないようにしましょう。
</div>
このようにclassアトリビュートを用いることでdivやspanがどういった意味を持つのかということを明示することができます。さらにスタイルシートを用いる場合、classがworningであるエレメントのコンテントの文字を赤色にするなどの管理も容易になります。また、次のように言語を指定する場合に利用することもできます。
<p lang="ja">
ケヴィン=ミトニックはエフ・ビー・アイをクラックして
<span lang="en">end up in prison</span>になった。
</p lang="ja">
少々むちゃのある例でしたが、このように日本語として指定したの段落の中に英語が入ってくるような場合に「end up in prison」の部分が英語であることを明示するのにspanエレメントを用いて言語指定をすることができます。
divエレメントは開始タグ、終了タグともに必須で、コンテントはブロックレベルエレメントとインラインになります。spanエレメントも開始タグ、終了タグともに必須で、コンテントはインラインです。
アトリビュートとは前述のように属性と訳せ、<html lang="ja">のlang="ja"のような部分です。そのエレメントの付加情報のようなものです。エレメントによって書くことのできるアトリビュートは決まっており、エレメントによっては必ず書かなければならないアトリビュートもあります。これらはDTDに明記されています。
アトリビュートの中には、ほぼすべてのエレメントに書くことができる共通アトリビュートと呼ばれるものも存在しています。
lang、dir、style、title、id、classアトリビュートなどは非常に多くのエレメントに共通して指定することができるため、共通アトリビュートと呼ばれています。共通アトリビュートの種類はインターナショナリゼーション、コアアトリビュート、イベントアトリビュートの3種類に分かれます。
インターナショナリゼーションは国際化のことで、internationalizationと綴ります。あまりに長いのでi18n（iとnの間に18文字あるという意味）と省略されます。HTML4ではRFC2070を統合してHTMLを国際化しているため、これらのアトリビュートを指定することができます。i18nのアトリビュートにはlangとdirがあります。
langアトリビュートはlang="ja"のように言語コードをバリューにとり、エレメントのコンテントがどういった言語で書かれたものなのかということをユーザーエージェントに伝えます。もしエレメントにlangが指定されていない場合は親要素から言語情報を継承します。
dirアトリビュートはltrかrtlをバリューとしてとり、文字が左から始まる（ltr）のか、右から始まる（rtl）のかをユーザーエージェントに伝えます。西洋諸国語や日本語などは文字は左から始まりますが、アラビア語などは右から書きますので、日本語の段落の中にアラビア語を含める場合などに指定することになります。
id、class、style、titleがコアアトリビュートに含まれます。これらはHTML4ではほとんどすべてのエレメントに指定することができます。
エレメントに固有のIDをつけます。スタイルシートやスクリプトの対象になったり、リンクのアンカーになったりします。IDはひとつの文書中に重複してつけることはできません。idのバリューにはアルファベットから始まり、それに続く数字、"-"、"_"、":"、"."が指定できます。これらは大文字小文字で識別されます。
エレメントにクラス名をつけます。主にスタイルシートの対象として用いられることがほとんどです。文書中に何度でも出現可能であり、ひとつのエレメントにスペースで区切って複数のクラス名をつけることも可能です。classのバリューにはHTML2.xでは英数字と "."、"-"のみが使えましたが、HTML4では制限がなくなっています。
スタイルシートを直接エレメントに指定するためのアトリビュートです。詳しくはCSSの説明で述べますが、カスケーディングの最下層になります。CSSの利点を崩すことになりかねないので、できる限りこのアトリビュートは使わないほうがいいでしょう。ちなみにこのアトリビュートを使うときはヘッド部分で<META http-equiv="Content-Style-Type" content="text/css">を指定する必要があります。
エレメントにタイトルをつけます。タイトルは読み上げられたり、カーソルを持っていったときに表示されたりすることが予想されます。わかりにくいエレメントには積極的に利用して細く情報を付けるようにしましょう。
スクリプトなどを使った動的なWebサイトを作る際に、イベントアトリビュートにある事象が発生したときにイベントアトリビュートのバリューのスクリプトが実行されます。
著者であるDefolsoがスクリプトは所詮プラグインであるなどの理由からスクリプトの使用に否定的であるため、動的なWEBサイトについてはここでは言及しません。ですので今回は省略させていただきます。
HTMLにはバージョンがあり、バージョンによって使うことができるエレメントやアトリビュート、それらを配置してよい場所などが異なります。前のバージョンで採用されていたのに新しいバージョンでは採用されなかったエレメントやアトリビュートは廃止されたことになり、今後の新しいバージョンでも出現することは基本的になくなります。
一方、非推奨は今後廃止される可能性があり、使うべきではないとされるものです。非推奨となるにはいくつかの条件があります。
これらの条件に合致するものは非推奨となりますが、W3Cの仕様書では後方互換のためにブラウザベンダは非推奨となったエレメントやアトリビュートにも対応するべきだと言及されています。それゆえにブラウザでは非推奨のエレメントなども表示できたりしますが、将来廃止されたとき書き直す手間が増えたり、グラフィカルなブラウザにしか情報が伝わらなかったりと不利益しか得ることができません。出来る限り非推奨となったものは使わないようにしましょう。
例として非推奨の代表格、fontエレメントを例にとって解説しましょう。fontエレメントはネットスケープブラウザが独自拡張したエレメントでしたが、HTML3.2で正式採用され、HTML4.0で非推奨となりました。<font color="red">などのようにアトリビュートを指定することで文字の色を変えたり、<font size="1">のように文字の大きさを変えたりすることができます。一見便利そうに見えますが、このエレメントには多くの弊害があります。
fontエレメントはそれ自体が論理的な意味を持たないエレメントです。次のソースをご覧ください。
<p>
ポートスキャンは<font color="red">不正アクセス予備行為≤/font>
となることがあります。
</p>
上記のソースをグラフィカルブラウザ以外でアクセスした場合、赤い色というだけの情報では強調を表しているのか引用なのか気まぐれで赤くしたのか判断できなくなってしまいます。もし仮にこれが強調したいために赤くしたのだとすれば、次のように書くことでグラフィカルブラウザ以外でも情報が伝わります。
<p>
ポートスキャンは<em style="color:red">不正アクセス予備行為</em>
となることがあります。
</p>
上記の例はfontエレメントで色を指定した場合と同じように表示されますが、グラフィカルブラウザ以外でアクセスした場合でもブラウザが強調を表していることを読み取り、強調だと分かるように、大きな声で読み上げたり文字を括弧でくくったり、しかるべき出力を行ってくれます。
非推奨とされるものはこのようにスタイルシートで代用が可能です。出来る限り論理要素＋スタイルシートでマークアップするようにしましょう。
このレポートの次のページでは実際のソースを例としてエレメントやアトリビュートの使い方を解説していきますが、非推奨となったエレメントやアトリビュートは紹介しません。これは非推奨となったものを知らなくても正当なHTMLを記述することができるからです。本来、非推奨のものも知っておくことは大切ですが紙面の都合上、愛割とさせていただきます。