HTML/XHTML とは何か

since: 2002-05-20; revised: 2007-01-02.

CSS (Cascading Style Sheet) は HTML 文書の表現方法を指定するための仕組みです。HTML が単なるテキストであるのと同じ意味で、 CSS も単なるテキストです。 HTML 文書のソースコード内部に記述すこともできますし、別のファイルに用意して複数の HTML 文書から読み込むように設定することもできます。

内容と表示体裁の分離

HTML は文書を要素の木構造で記述する言語です。各要素は段落、見出し、アドレス、ハイパーリンクのような意味を表現します。閲覧装置（ブラウザ）は HTML タグの意味に応じた表示体裁で出力します。どの閲覧装置（画像ベース、文字ベース、音声ベースなど）で閲覧しても、表現方法が変わるだけで、HTML タグの意味は不変です。

文書の意味（モデル）を変更することに比べると、見栄え（ビュー）を変更したいことのほうが多いため、HTML による意味のマークアップと表示体裁の指定は分離していた方が望ましいことになります。例えば、文字を大きくしたいために h1 要素を使うなどのように、HTML タグを本来の意味から離れて使うと、文書の汎用性が損なわれます。見栄えを指定する HTML 要素や属性を乱用すると、後で見栄えを変更するために、膨大な文書中の各場所毎に修正する必要があるので、非常に面倒であり、時として事実上不可能となります。

HTML では意味の表現に専念し、表示体裁は CSS で指定します。コンピュータスクリーンに対する表示体裁の指定、印刷されるときの表示体裁の指定、音声出力されるときの表現方法の指定、これらを提供するのが CSS という仕組みです。

HTML/XHTML 文書

HTML というのは、 HyperText Markup Language の頭文字をとったもので、リンクという仕組みを持ったマークアップ言語です。今ご覧になっているこの文書も HTML で書かれている HTML 文書です。 HTML は大きく分けると、従来の HTML と、後継の XHTML とに分けられます。本稿では、何らかの HTML/XHTML で文書が記述できることを前提としますが、最初に HTML/XHTML とは何なのかおさらいします。

HTML 4 文書の実例

1997 年 12 月に初版が公開され、2005 年頃までのウェブページの記述において広く使われていました。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
  <head>
    <meta http-equiv="content-type"
        content="text/html; charset=UTF-8">
    <title>HTML とはなんだろうか。</title>
  </head>
  <body>
    <p>HTML は <a href="http://www.w3.org/TR/html401/">W3C</a> で定義されています。</p>
  </body>
</html>

HTML 4 は大文字と小文字を区別しません。次の三つの文書型が存在し、HTML 文書はこれらのいずれかの文書型に従って記述されます。上に挙げた例は Strict の実例です。

HTML 4 Transitional
HTML 4 Strict
HTML 4 Framest

この文書は、文字コードが UTF-8 に指定されている事以外はきわめて一般的なものです。別の文字コードで保存する場合は適宜書き換えてください。

XHTML 1.0 文書の実例

HTML 4 の後継言語です。2006 年現在、最も広く使われているのが、XHTML 1.0 Transitional だと思います。将来の拡張のために、過渡的に用意された感があります

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
  <head>
    <meta http-equiv="content-type"
        content="text/html; charset=UTF-8" />
    <title>XHTML 1.0 とはなんだろうか</title>
  </head>
  <body>
    <p>XHTML 1.0 も <a href="http://www.w3.org/TR/xhtml1/">W3C</a> で定義されています。</p>
  </body>
</html>

HTML 4 とほぼ同じですが、 XHTML では大文字と小文字を区別し、要素／属性は小文字で記述しなければならないほか、一部変更があります。 HTML 4 の三つの文書型に対応して、次の三つの文書型があります。上に挙げた例は Strict の実例です。

XHTML 1.0 Transitional
XHTML 1.0 Strict
XHTML 1.0 Frameset

XHTML 1.1 文書の実例

XHTML 1.0 の後継言語です。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" >
  <head>
    <title>XHTML 1.1 とはなんだろうか</title>
  </head>
  <body>
    <p>XHTML 1.1 も  <a href="http://www.w3.org/TR/xhtml11/">W3C</a> で定義されています。</p>
  </body>
</html>

XHTML 1.0 Strict を元にして、定義済みモジュールの組み合わせとして整理したものです。Strict を元して見栄え調整のための複雑な要素／属性を削ぎ落としているので簡単だといえます。これから習得するのならば、将来の拡張性も考えれば XHTML 1.1 を使うのが最良だと思います。

なお、要素 meta http-equiv="content-type" は指定すべきではないとされています。

XHTML 2.0 文書の実例

XHTML 1.0 の後継言語として、W3C でワーキングドラフトを策定中です。2002年に最初の公式なワーキングドラフトが公開され、2006/07現在、8つ目の公式なワーキングドラフトが公開されています。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 2.0//EN"
    "http://www.w3.org/MarkUp/DTD/xhtml2.dtd">
<html xmlns="http://www.w3.org/2002/06/xhtml2/" xml:lang="ja"
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:schemaLocation="http://www.w3.org/2002/06/xhtml2/
                          http://www.w3.org/MarkUp/SCHEMA/xhtml2.xsd"
>
  <head>
    <title>XHTML 2.0 とはなんだろうか</title>
  </head>
  <body>
    <p>XHTML 2.0 も <a href="http://www.w3.org/TR/xhtml2/">W3C</a> で定義されています。</p>
  </body>
</html>

XHTML 1.1 で定義されていたモジュールは、既存の HTML 由来の要素をモジュールとして定義するものでした。XHTML 2.0 では、XML で定義済みのモジュールを優先して採用しようとしています。

HTML とマークアップ言語

いずれにしても、 HTML/XHTML は文書の一部分を意味の塊として考え、意味をタグによって表現する文書です。たとえば、 "<p>" から "</p>" までの間は、段落を意味します。 "<h1>" から "</h1>" までの間は、その文書内で最もくくりの大きい（階層が高い）見出しを意味します。

閲覧されるときは、モニタの大きさと種類／ウィンドウの大きさ／ブラウザの種類／文字の大きさと種類などはまちまちになります。誰がどのような装置で閲覧するのかは特定できません。ブラウザの種類一つとっても、画像が表示できる一般的なもの、文字だけしか表示できないもの、弱視者のための音声合成装置で表現するものなどが挙げられます。

HTML/XHTML が、文書の意味をタグで括って表現する（マークアップする）言語であるために、閲覧装置がばらついても、意味だけはタグが表現した通りに共有できることになります。意味をマークアップするべき HTML/XHTML で見栄えを調整すると、閲覧装置によっては意味が把握できなくなり、データのゴミになりかねません。たとえば、悪い例として次のものが挙げられます：

文字を大きくするために h1 要素を用いる、
改行のために p 要素を用いる、
段落の表現のために br 要素を用いる

HTML の習得に関するコンテンツが本サイト中にあります。ご利用ください。

MIME タイプについて

XHTML のメディアタイプ仕様

XHTML 1.0 までは、meta 要素で http-equiv="content-type" を指定することが許容されていましたが、 XHTML 1.1 では、「べきではない」とされています。

Media types summary for serving XHTML documents

Media type HTML 4 XHTML 1.0 (HTML compatible) XHTML 1.0 (other) XHTML Basic / 1.1 XHTML+MathML

text/html SHOULD MAY SHOULD NOT SHOULD NOT SHOULD NOT

application/xhtml+xml MUST NOT SHOULD SHOULD SHOULD SHOULD

application/xml MUST NOT MAY MAY MAY MAY

text/xml MUST NOT MAY MAY MAY MAY

Media types summary for serving XHTML documents
Media type	HTML 4	XHTML 1.0 (HTML compatible)	XHTML 1.0 (other)	XHTML Basic / 1.1	XHTML+MathML
text/html	SHOULD	MAY	SHOULD NOT	SHOULD NOT	SHOULD NOT
application/xhtml+xml	MUST NOT	SHOULD	SHOULD	SHOULD	SHOULD
application/xml	MUST NOT	MAY	MAY	MAY	MAY
text/xml	MUST NOT	MAY	MAY	MAY	MAY

Web サーバなどの設定で MIME タイプを "application/xhtml+xml" にすべきであるとされていますが、MS IE 6では、"application/xhtml+xml" の文書はダウンロードになってしまいます。MS IE 7 では "text/html" と同様にブラウザ上に表示されます。

コンテントネゴシエーション

HTTP/1.1 仕様では、コンテントネゴシエーションという機能が使えます。Web サーバが Apache の場合は、httpd.conf か、.htaccess で設定します。

xx.html と xx.xhtml の文書を用意

.htaccess に次のように記述

Options +MultiViews
Addtype "text/html; charset=UTF-8"                .html
AddType "application/xhtml+xml; charset=UTF-8"    .xhtml

このようにすることで、http://～/xx でアクセスしたときに、ユーザエージェントが優先的に要求している MIME タイプで閲覧されるようになります（参考）。同一内容の文書に対して、拡張子の異なる文書を用意しなければならないので、サーバ側のスクリプトなどで自動化しないと実装はつらいでしょう。

このコンテンツでの実装例

このコンテンツでは、拡張子を変えるやつ1.10を使って、*.html.html と *.html.xhtml を作りました。Firefox で *.html を要求した場合は、HTTP 要求ヘッダの Accecpt フィールドで "application/xhtml+xml" の方を優先的に要求するので、サーバは *.html.xhtml を返します。MS IE の場合は、同じ優先度で要求するので、.htaccess ファイルに先に記載された *.html.html を返します。

MS IE 用ヘッダ表示ツール（インストール後再起動が必要）

GET /web/tut/CSStut/HTMLis.html HTTP/1.1
Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/x-shockwave-flash, application/vnd.ms-excel, application/vnd.ms-powerpoint, application/msword, */*
Referer: http://www.nextindex.net/web/tut/CSStut/index.html
Accept-Language: ja
UA-CPU: x86
Accept-Encoding: gzip, deflate
If-Modified-Since: Mon, 01 Jan 2007 14:56:53 GMT
If-None-Match: "8da9f-476b-45992135;4598fb81"
User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1)
Host: www.nextindex.net
Connection: Keep-Alive
Cookie: __utmc=217142153

Firefox 用ヘッダ表示ツール

GET /web/tut/CSStut/HTMLis.html HTTP/1.1
Host: www.nextindex.net
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; ja; rv:1.8.1.1) Gecko/20061204 Firefox/2.0.0.1
Accept: text/xml,application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png,*/*;q=0.5
Accept-Language: ja,en-us;q=0.7,en;q=0.3
Accept-Encoding: gzip,deflate
Accept-Charset: Shift_JIS,utf-8;q=0.7,*;q=0.7
Keep-Alive: 300
Connection: keep-alive
Referer: http://www.nextindex.net/web/tut/CSStut/index.html
If-Modified-Since: Mon, 01 Jan 2007 14:56:54 GMT
If-None-Match: "8daa0-48b6-45992136;4598fb81"

MS IE への応答ヘッダは次のようになっています。

HTTP/1.1 200 OK
Date: Mon, 01 Jan 2007 14:59:28 GMT
Server: Apache
Content-Location: HTMLis.html.html
Vary: negotiate,accept
TCN: choice
Last-Modified: Mon, 01 Jan 2007 14:59:25 GMT
ETag: "8da9f-4788-459921cd;4598fb81"
Accept-Ranges: bytes
Connection: close
Content-Type: text/html; charset=utf-8
Content-Encoding: gzip
Content-Length: 5845

Firefox への応答ヘッダは次のようになっています。

HTTP/1.x 200 OK
Date: Mon, 01 Jan 2007 14:59:35 GMT
Server: Apache
Content-Location: HTMLis.html.xhtml
Vary: negotiate,accept
TCN: choice
Last-Modified: Mon, 01 Jan 2007 14:59:25 GMT
Etag: "8daa0-48d7-459921cd;4598fb81"
Accept-Ranges: bytes
Content-Length: 18647
Connection: close
Content-Type: application/xhtml+xml; charset=utf-8

Firefox では *.html.xhtml が application/xhtml+xml で返される一方で、MS IE では *.html.html が text/html で返されていることが分かります。同じページに複数回アクセスすると、304 Not Modified が返されます。

図：MS IE の表示例

図：Firefox の表示例

図：Opera の表示例