XHTMLの基礎

XHTMLの基礎について学びます。

XHTMLの種類

XHTMLには以下の種類があります。

XHTML1.0  Strict 基本的なマークアップタグしか使用できない。HTML4.01 Strictに対応する。
Traditional デザイン用の非推奨のタグまで使用できる。HTML4.01 Traditionalに対応する。
Frameset Traditionalに加えてフレームタグが使用できる。HTML4.01 Framesetに対応する。
XHTML1.1 基本的なマークアップタグしか使用できない。HTML4.01 Strictに対応する。最新の仕様であるが、その分ブラウザが未対応である部分もあるので使用する際には注意が必要である。

これ以外に携帯電話用のサブセットであるXHTML Basicもあります。現在、XHTML2.0が検討されています。

XML宣言

XHTMLもXMLなのでXMLデータであることを宣言します。

XHTMLでは大文字と小文字を区別するので、間違えないようにしてください。漢字コードを表す文字列は大小の区別はありません。

<?xml version="1.0" encoding="Shift_JIS" standalone="yes"?>

属性は以下のようになります。

version 1.0または1.1を指定する。XHTMLでは1.0が推奨される。省略した場合には1.0となる。
encoding 漢字コードを指定する。省略した場合には、UTF-8になる。
standalone 外部DTDファイルの使用をyes/noで指定する。XHTMLではyesが推奨される。省略した場合にはyesになる。

InternetExplorer6.0では、このXML宣言をただしく理解できず、宣言文を入れると正しく表示されません。対策としては漢字コードをUTF-8にして宣言文を省略することが有効です。

ドキュメントタイプ宣言

XHTMLではドキュメントタイプ宣言(DTD)は省略できません。上記のXHTMLのバージョンに対応したDTDを指定します。

XHTMLでは大文字と小文字の区別をするので、間違えないようにしてください。

XHTML1.0  Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

html要素

html要素には、属性として名前空間と言語コードを指定します。言語コードは、XHMTL1.1ではlang属性を指定しないので注意してください。

XHTML1.0 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
XHTML1.1
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">

title要素

head要素内にtitle要素を1つという決まりがあるので省略したり複数書いたりしてはいけません。

meta要素

http-equiv属性によるMIMEコードの指定には注意が必要です。HTMLでは、content="text/html"の指定を行いましたが、XHTMLではcontent="application/xhtml+xml"を指定することが推奨されています。また、meta要素は空要素であるため、終了タグ省略の「/」が末尾に入っていることに注意してください。

推奨MIMEコード

<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=Shift_JIS" />

ただし、ブラウザーによってはこの指定を行うと正しく表示されずに、ダウンロードするような表示がでることがあります。現状でこれを避けるには、HTMLと同じ指定をしておくしかないようです。

HTMLと同じMIMEコード

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />

漢字コードは、xml宣言のencodingで指定されているので、本来は必要ないのですが、ブラウザーによって文字化けすることがあるので、meta要素の中でも指定しておきます。その場合には、漢字が現れるtitleタグなどよりも先に指定します。

XHTML1.1では、http-equiv属性, content属性は指定しません。

サンプルコード

上記をまとめたサンプルコードを示しておきます。

<!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="application/xhtml+xml; charset=Shift_JIS" />
	<title>XHTMLページ</title>
</head>
<body>
	<h1>XHTMLによるWebページ作成</h1>
</body>
</html>

メモ帳にコピーして保存してください。ファイルの種類を「すべてのファイル」にして、ファイル拡張子を「.xhtm」にするのを忘れないようにしましょう。

ブラウザで確認したい場合には、「ファイル」メニューの「開く」から指定するか、ブラウザにファイルドラッグアンドドロップしてください。ダブルクリックしても開きません。

XHTMLの検証

XHTMLは規則が厳密であるため、XML同様に、正しく書かれているか検証するためのプログラム(バリデータ)が存在します。

W3Cのバリデータページ

上記ページを開くと、「Validate by URL」、「Validate by File Upload」、「Validate by Direct Input」の3つの入力欄が現れます。それぞれ、「URLを指定による検証」、「ファイルアップロードによる検証」、「直接入力による検証」を意味します。

「Validate by File Upload」の「参照」ボタンをクリックして検証したいファイルを指定した後、「check」ボタンでチェックしてみましょう。

「This Page Is Valid XHTML 1.0 Strict!」と表示されれば正しいXHTMLであるということです。そのとき、W3CのXHTMLに準拠しているというマークを表示するためのタグが表示されます。