XHTML1.0・XHTML1.1 とは何か？

2000年 1 月、W3Cより勧告された XHTMLはその後、2001年 5 月に、さらにモジュール化された XHTML1.1 がリリースされました。 XMLが登場しているにも関わらず、XHTMLとは一体何なのでしょうか？

年代	HTML	XML	XHTML	CSS
1986	SGML規格化	SGML規格化
1989	HTMLを開発
1991	HTML1.0
1993	HTML+
1994
1995	HTML2.0
	HTML3.0勧告			CSS1勧告
1996		XML草案
1997	HTML3.2勧告
	HTML i18n（別名 HTML2.x）
	HTML4.0勧告
1998	HTML4.0仕様改訂	XML1.0勧告		CSS2勧告
1999	HTML4.01勧告
2000			XHTML1.0勧告
			XHTMLBasic勧告
2001			XHTML1.1勧告
2004		XML1.1勧告	XHTML2.0草案
2008	HTML5草案			CSS3草案
2009			活動停止

XMLに完全に対応していないブラウザも多数存在します。そのような問題に対応するために「XML文書として必要とされている機能」を含んだHTMLとして XHTMLが登場しました。

XHTML は 現在の HTMLの機能と、XML文書として必要とされている機能の両方が含まれています。

XHTML を書いてみよう

従来の HTML と異なる点をいくつか挙げておきます。

• 要素、属性は小文字で記述
• 全べての属性値について、必ず引用符で囲む
• 要素の最後に１つの半角スペース後にスラッシュ”/”を記述
• すべての要素に終了タグの記述が必要（タグの省略は認められていない）
• 文書の先頭で XML宣言をすることが強く求めらる

上記に注意しながら次のようにメモ帳に記述し、名前を「index.html」として保存しましょう。

XHTML1.0だと下記のように記述します。

<?xml version="1.0" encoding="Shift_JIS"?>
<!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=Shift_JIS" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rev="made" href="mailto:hoge@hogehoge.hoge" />
<link rel="index" href="index.html" />
<style type="text/css">
 .content{ 
    padding-left: 10px;
    padding-right: 10px;
    font-size: 85%;
}
</style>
<title>XHTMLの練習</title>
</head>
<body>

<p class="content">初めての XHTML に挑戦！！</p>

</body>
</html>

また XHTML1.1 だと下記のように記述します。

<?xml version="1.0" encoding="Shift_JIS"?>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rev="made" href="mailto:hoge@hogehoge.hoge" />
<link rel="index" href="index.html" />
<style type="text/css">
 .content{ 
   padding-left: 10px;
   padding-right: 10px;
   font-size: 85%;
}
</style>
<title>XHTMLの練習</title>
</head>
<body>

<p class="content">初めての XHTML に挑戦！！</p>

</body>
</html>

以後は XHTML1.1 を例にとって紹介します。ちなみに、ブラウザへ表示すると次のようになります。

オススメ書籍

HTML5、CSS3、JavaScript等の学習に役立つ書籍を紹介します。

ページのトップへ戻る