HTMLからXHTML1.0 or XHTML1.1への移行するためのポイント（相違点）

2013年2月22日 2015年5月15日

ご利用のブラウザは、JavaScript が無効となっていませんか？
このサイトでは、コンテンツの一部が非表示、あるいは、コメント、お問い合わせの投稿ができない、検索ができないことがあります。

最近、Amazonや楽天の動向が注目されるように電子ブックの普及へ向かっていくことは必然の流れですね。この流れから、HTMLからXHTMLへの移行を考えなくてはならないことは間違いないでしょう。

特に、電子ブックの基本規格と言っても良いくらいのepubの規格は、XHTMLの規格に沿ったものになっていますから、ブログや自分のサイトをepubへ変換する場合、XHTMLに準拠しているとまとめやすい（epubにしやすい）というのもあります。

この記事は、W3Cの以下の英文の記事を元に、HTMLからXHTML1.0 or XHTML1.1への移行するためのポイント（相違点）をまとめてみました。
(http://www.w3.org/TR/xhtml1/ )

EPUB
EPUB（イーパブ）は、電子書籍の規格の1つである。 “Electronic PUBlication”の意味を持ち「epub」「ePub」などと表記される場合もある。そのオープン性と単純さから、対応する電子書籍のハードウェアやアプリケーションソフトウェアは多く、英語圏での電子書籍用ファイルの標準規格となっている。

EPUBは、HTMLやウェブブラウザのオープン性を保持しつつ、インターネット接続が切断された状態の携帯情報端末 (PDA) やノートパソコンなどでも電子書籍の閲覧が継続できるようにダウンロード配信を前提にパッケージ化された、XHTMLのサブセット的なファイル・フォーマット規格であり、画面の大きさに合わせて表示を調整する「リフロー機能」が特徴である（固定する設定も可能）。 (出典:wikipedia)

目次
1. HTMLからXHTML1.0 or XHTML1.1への移行するためのポイント（相違点）
履歴

2013.2.22 初版

HTMLからXHTML1.0 or XHTML1.1への移行するためのポイント（相違点）

HTMLからXHTML1.0 or XHTML1.1への移行するために行わなければならない作業と各規約の相違点について、簡単に以下にまとめてみました。

XML宣言を挿入する

このドキュメントがXMLに準拠していることを先頭に記載します。

[XHTML 1.0]/[XHTML 1.1]

<?xml version="1.0" encording="utf-8"?>

最近では、utf-8 がほとんどだと思います。ただ、Windows系でドキュメントを書かれている場合は、ShiftJISの場合もあるかと思います。その際は、以下のように指定します。

utf-8
<?xml version="1.0" encording="Shift_JIS"?>

また、DTD (Document Type Definition :文書型定義) ファイルを外部から読み込まないように設定することができる standalone属性の指定も可能です。ただ、デフォルト no (外部から読み込む) なので特に指定することはないかと思います。

<?xml version="1.0" encording="utf-8" standalone="no"?>

ここでのバージョン 1.0 は、XMLのバージョンであってXHTMLのバージョンではないことに注意しましょう。そのため、[XHTML 1.0]/[XHTML 1.1]いずれも 1.0 を指定します。

DOCTYPEを変更する

このドキュメントがどのバージョンに準拠しているかDOCTYPE で宣言します。

[HTML 4.01]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Transitional (上記の上段の記載例)は、移行期を意味し、HTML 4.01 未満のバージョンからの移行を考慮し、緩やかな縛りによるHTML4.01に従う文書であることを宣言しています。
Strict (上記の下段の記載例)は、厳格にHTML 4.01 の規格に従うドキュメントであることを宣言しています。

[XHTML 1.0]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Transitional (上記の上段の記載例)は、移行期を意味し、XHTML 1.0 未満のバージョンからの移行を考慮し、緩やかな縛りによるXHTML 1.0に従う文書であることを宣言しています。
Strict (上記の下段の記載例)は、厳格にXHTML 1.0 の規格に従うドキュメントであることを宣言しています。

[XHTML 1.1]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

XHTML 1.1 では、Strict のみとなります。

xml:langで言語指定する

言語指定には、lang属性を用いていましたが、xml:langを用いるように変更します。

[HTML 4.01]

<html lang="ja">

[XHTML 1.0]

<html lang="ja" xml:lang="ja">

lang, xml:lang の2つで宣言することになっていますが、2つの値が異なる場合は、xml:langが優先されます。

[XHTML 1.1]

<html xml:lang="ja">

XHTML 1.1 では、lang は使えません。

HTMLタグでは、名前空間の指定まで行うことが一般的になっています。

[XHTML 1.1]

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

この指定を行っておくと、htmlタグでくくられた範囲内は、名前空間(xmlns属性)を指定しない場合は、すべて上記の例でいうと”http://www.w3.org/1999/xhtml”を指定したことと同じことになります。
名前空間は、何かDTDのような定義を含むものではなく、いわゆる名前付けですから、id属性の大きなものという捉え方が一番近いと思います。
慣習的にも、今後の定義づけの変更の可能性からも上記のように”http://www.w3.org/1999/xhtml”と名前付けしておくことが無難だと思います。

タグ名、属性名は小文字に変換する

HTMLの記述では、タグ名、属性名を大文字、小文字の区別なく使用できました。XHTMLでは、小文字になります。

[HTML 4.01]

<DIV ALIGN="LEFT">これは左寄せです。</DIV>

[XHTML 1.0]/[XHTML 1.1]

<div align="left">これは左寄せです。</div>

タグの階層化を厳密に行う

HTMLの記述では、タグの階層は、以下のようにあいまいでもOKでした。

[HTML 4.01]

<p>こちらは強調されている<em>段落</p>です。</em>

これを階層化を厳密に行うと以下のようになります。

[XHTML 1.0]/[XHTML 1.1]

<p>こちらは強調されている<em>段落</em>です。</p>

もう少しわかりやすく書き直すと以下のようになります。

<p>
	こちらは強調されている
	<em>
		段落
	</em>
	です。
</p>

ちゃんとpタグの括りの中で、emタグが閉じています。

タグの終端は省略できない

HTMLの記述では、タグの終端（閉じ）を以下のように省略できました。

[HTML 4.01]

<ul>
	<li>1行目
	<li>2行目
</ul>

ここでは、</li> を省略しています。これをXHTMLで表記するには、以下のようになります。

[XHTML 1.0]/[XHTML 1.1]

<ul>
	<li>1行目</li>
	<li>2行目</li>
</ul>

必ず、</li> を記載います。
liタグの省略に限らず、
pタグでもpタグが開始され閉じていない状態で、さらにpタグを開始することはできません。

[HTML 4.01]

<p>こちらに段落があります。<p>こちらにもう一つ段落があります。

[XHTML 1.0]/[XHTML 1.1]

<p>こちらに段落があります。</p><p>こちらにもう一つ段落があります。</p>

属性値を常に引用符で括る

HTMLの記述では、タグの属性値を必ずしも引用符で括る必要はありませんでしたが、XHTMLでは必須になります。

[HTML 4.01]

<table rows=3>

[XHTML 1.0]/[XHTML 1.1]

<table rows="3">

必ず、引用符(” or ‘) で括ります。

属性値を省略しない

HTMLの記述では、一部のタグの属性値を省略することができましたが、XHTMLでは省略不可になります。

[HTML 4.01]

<option selected>選択</option>

HTMLでは、selected属性の指定だけで、選択済までの意味を持たせていましたが、属性に対する値が設定されていないので、XHTMLでは以下のようになります。

[XHTML 1.0]/[XHTML 1.1]

<option selected="selected">選択</option>

また、dlタグでも同じようなことが言えます。以下のcompact属性は、定義語と定義説明のセットの表示を小さく表示するよう指定するものです。

[HTML 4.01]

<dl compact>

[XHTML 1.0]/[XHTML 1.1]

<dl compact="compact">

空要素のタグを /> で閉じる

HTMLの記述では、閉じタグがないタグがあります。たとえは、横線を引くための <hr> や改行を指定するための <br> などです。これは、XHTMLでは終端を示す / を加えてタグ終了を指定する必要があります。

[HTML 4.01]

<hr>
改行<br>

[XHTML 1.0]/[XHTML 1.1]

<hr />
改行<br />

一般的に HTMLしか対応できていないような古いブラウザの誤動作をなくすために / の前に半角空白を入れて対応します。

name属性をid属性へ変更する

HTMLの記述では、aタグやmapタグなどでname属性を使っていました。XHTMLではid属性が推奨されます。(XHTML1.1では、name属性は使用不可になります)

[HTML 4.01]

<a name="step1">STEP1</a>

[XHTML 1.0]

<a name="step1" id="step1">STEP1</a>

[XHTML 1.1]

<a id="step1">STEP1</a>

XHTML1.1では、name属性は使用不可です。

埋め込みCSS、Scriptは外部ファイルにする

HTMLでは、好きなようにスタイルシートやスクリプトをドキュメントの中に埋め込むことができました。
XHTMLでは、 < か & か ]]> か — は、埋め込みのスタイルシート、スクリプトに使用することができません。そのため、制約があるので、基本的には、外部ファイルとすることが求められます。

また、XHTMLのドキュメント内でスタイル、スクリプトを埋め込みたい場合は、CDATA マークで括ることになります。

[HTML 4.01]

<style type="text/css">
<!--
stylesheet code went here
-->
</style>
<script type="text/javascript">
<!--
scripting went here
-->
</script>

[XHTML 1.0]/[XHTML 1.1]

<style type="text/css">
<![CDATA[
stylesheet code went here
]]>
</style>
<script type="text/javascript">
<![CDATA[
scripting went here
]]>
</script>

imgタグにはalt属性を追加する

img(画像)タグには、 alt属性(Alternative Representation Text)が追加されました。これは、画像の解説文を記載するものです。

[HTML 4.01]

<img src="mt_fuji.jpg">

[XHTML 1.0]/[XHTML 1.1]

<img src="mt_fuji.jpg" alt="これは富士山の写真" />

XHTMLでは、alt属性と最後の / を忘れないようにしましょう。

他のタグに含めることができないタグがある

HTMLでは自由にタグを記載できましたが、XHTMLではタグの括りの中では使用できるタグ、できないタグが存在ます。

ブロック要素タグをインライン要素タグに埋め込むことはできない。

ブロック要素タグとは、
見出し（h1、h2、h3、h4、h5、h6）、段落（p）、横罫線（hr）、ブロック引用（blockquote）などです。

インライン要素タグとは、
テキスト強調（b、strong ）、イタリックテキスト（i、em）、画像（img）の、リンク（a）などです。

HTMLでは、以下のようにどちらが先でもOKでした。

[HTML 4.01]
<b><p>どっちが先での良いの？</p></b>
XHTMLでは、以下のようにブロック要素タグの中にインライン要素タグはOKです。その逆はNGです。

[XHTML 1.0]/[XHTML 1.1]
<p><b>どっちが先での良いの？</b></p>

同じタグの入れ子はできない。

[HTML 4.01]

<a href="test.html">こっちが本当のリンク(<a href="test2.html">でもこっちも良いかも</a>)先</a>

[XHTML 1.0]/[XHTML 1.1]

<a href="test.html">こっちが本当のリンク(</a><a href="test.html">でもこっちも良いかも</a><a href="test.html">)先</a>

bodyタグの直下にインライン要素タグは書けない。

[HTML 4.01]

<body>
<img src="mt_fuji.jpg">
</body>

[XHTML 1.0]/[XHTML 1.1]

<body>
<p><img src="mt_fuji.jpg" alt="これは富士山の写真" /></p>
</body>

bodyタグの直下では、インライン要素タグを直接記述することはできません。上記のようにブロック要素タグの中に記載します。

タグの属性値の & を & へ変更する

HTMLでは、タグの属性値の & を使うことができましたが、XHTMLでは、 &は参照という特別な意味を持ちます。そのため、& → & へ変更する必要があります。

[HTML 4.01]

<a href="http://example.com/test.php?a=test&b=2">テストリンク</a>

[XHTML 1.0]/[XHTML 1.1]

<a href="http://example.com/test.php?a=test&amp;amp;b=2">テストリンク</a>

使用できなくなったタグ属性

XHTMLでは、使用できなくなったあるいは、推奨されなくなったタグ属性が多くあります。以下にそれを列挙します。

language属性はなくなった。

language属性の代わりに、type属性を使用することができます。

[HTML 4.01]

<script language="javascript">

[XHTML 1.0]/[XHTML 1.1]

<script type="text/javascript">

topmargin属性はなくなった。

topmargin (or leftmargin, marginwidth, marginheight)属性は、スタイルシートで補うことができます。

[HTML 4.01]

<body topmargin="0" marginwidth="0" marginheight="0" leftmargin="0">

[XHTML 1.0]/[XHTML 1.1]

[ドキュメントコード]

<body>

[スタイルシートコード]

body { margin: 0px; padding: 0px; }

border属性はなくなった。

border 属性は、スタイルシートで補うことができます。

[HTML 4.01]

<img src="picture.jpg" border="0" width="10" height="10" >

[XHTML 1.0]/[XHTML 1.1]

[ドキュメントコード]

<img src="picture.jpg" width="10" height="10" alt="Picture" />

[スタイルシートコード]

img { border: 0px; }

hspace属性はなくなった。

hspace (or vspace) 属性は、スタイルシートで補うことができます。

[HTML 4.01]

<img src="picture.jpg" hspace="5" width="10" height="10" >

[XHTML 1.0]/[XHTML 1.1]

[ドキュメントコード]

<img class="imagewithmargin" src="picture.jpg" width="10" height="10" alt="Picture" />

[スタイルシートコード]

.imagewithmargin { margin-left: 5px; margin-right: 5px; }

align属性はなくなった。

align 属性は、スタイルシートで補うことができます。

[HTML 4.01]

<p align="right" > or <img align="left" … />

[XHTML 1.0]/[XHTML 1.1]

[ドキュメントコード]

<p class="textright"> or <img class="floatleft" ... />

[スタイルシートコード]

.textright { text-align: right; }
.floatleft { float: left; }

name属性はなくなった。

name 属性の代わりに、id属性を使用することができます。

[HTML 4.01]
<form name="loginform">
[XHTML 1.0]/[XHTML 1.1]
<form id="loginform">

height属性はなくなった。

height(or width or background) 属性は、スタイルシートで補うことができます。

[HTML 4.01]

<table width="100" height="200">
<tr>
<td width="100" height="100" background="image.gif">テーブルのセルです</td>
</tr>
</table>

[XHTML 1.0]/[XHTML 1.1]

[ドキュメントコード]

<table width="100">
<tr>
<td class="td_style">テーブルのセルです</td>
</tr>
</table>

[スタイルシートコード]

.td_style { width: 100px; height: 100px; background: (‘image.gif'); }

table全般の属性は、推奨されなくなった。

table全般の属性(cellpadding, cellspacing, border, bgcolor など)は、推奨されなくなりました。これらの属性は、スタイルシートで補うことができます。

[HTML 4.01]

<table border="1" bordercolor="#ff0000" cellspacing="0" cellpadding="3">

[XHTML 1.0]/[XHTML 1.1]

[ドキュメントコード]

<table class="redborder">

[スタイルシートコード]

.redborder { border: solid 1px #ff0000; border-spacing: 0px; border-collapse: collapse; }
.redborder td { padding: 3px; } This replaces cellpadding.

fontタグはなくなった。

fontタグは使用できなくなりました。fontの代わりに、span タグを用いることが、最も確かだろうと思います。

[HTML 4.01]

<p><font color="#ff0000">ここは赤です</font> ここはデフォルトの色です。</p>

[XHTML 1.0]/[XHTML 1.1]

[ドキュメントコード]

<p><span class="red">ここは赤です</span> ここはデフォルトの色です。</p>

[スタイルシートコード]

.red { color: #ff0000;"}

Media Typeを変更する

HTMLおよびZHTML1.0の記述では、metaタグにて Media Type を text/htmlと指定しましたが、XHTML1.1では application/xhtml+xml となります。

[HTML 4.01]

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

[XHTML 1.0]

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

[XHTML 1.1]

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

ただし、この値は対応できていないブラウザもまだまだあるので、使用する場合は十分に注意が必要です。

ざっとですが、こんな感じです。
基本記事は、w3cの以下のサイト記事です。
(http://www.w3.org/TR/xhtml1/ )
これ以外にも、いろんなサイトからかき集めた情報も含まれています。おそらく XHTML1.0, XHTML1.1 の定義を確認すると、概ね、ここの内容が全てだと思います。個人的な備忘録も含めて、記事にしてみました。何かの役にたてば、うれしく思います。

(amazon )	インフラエンジニア教本2――システム管理・構築技術解説 (SoftwareDesign別冊)に寄稿しました。「ログを読む技術」の再掲載になります。 8月号を見逃された方は、是非、ご一読くださいませ。
(amazon )	Software Design 8月号に寄稿しました。「ログを読む技術」について寄稿しました。興味のある方は、是非、ご一読くださいませ。
また、執筆や当サイトにおける広告のご依頼などございましたら、お問い合わせページよりご一報ください。

HTMLからXHTML1.0 or XHTML1.1への移行するためのポイント（相違点）

HTMLからXHTML1.0 or XHTML1.1への移行するためのポイント（相違点）

XML宣言を挿入する

DOCTYPEを変更する

xml:langで言語指定する

タグ名、属性名は小文字に変換する

タグの階層化を厳密に行う

タグの終端は省略できない

属性値を常に引用符で括る

属性値を省略しない

空要素のタグを /> で閉じる

name属性をid属性へ変更する

埋め込みCSS、Scriptは外部ファイルにする

imgタグにはalt属性を追加する

他のタグに含めることができないタグがある

タグの属性値の & を & へ変更する

使用できなくなったタグ属性

Media Typeを変更する

最近投稿の記事

さくらのVPS 全プランリニューアルです。（石狩(北海道)も選択可）

カテゴリ

Serverman@VPS 完全1ヶ月無料キャンペーン実施中です。

リンク

KVM採用 ConoHa VPSは、時間単位で借りれる便利なVPSです。

KVM採用お名前.com VPS(KVM) 2G プラン初期設定費無料キャンペーン実施です。

HTMLからXHTML1.0 or XHTML1.1への移行するためのポイント（相違点）

HTMLからXHTML1.0 or XHTML1.1への移行するためのポイント（相違点）

XML宣言を挿入する

DOCTYPEを変更する

xml:langで言語指定する

タグ名、属性名は小文字に変換する

タグの階層化を厳密に行う

タグの終端は省略できない

属性値を常に引用符で括る

属性値を省略しない

空要素のタグを /> で閉じる

name属性をid属性へ変更する

埋め込みCSS、Scriptは外部ファイルにする

imgタグにはalt属性を追加する

他のタグに含めることができないタグがある

タグの属性値の & を &amp; へ変更する

使用できなくなったタグ属性

Media Typeを変更する

最近投稿の記事

さくらのVPS 全プラン リニューアルです。（石狩(北海道)も選択可）

カテゴリ

Serverman@VPS 完全1ヶ月無料 キャンペーン実施中です。

リンク

KVM採用 ConoHa VPSは、時間単位で借りれる便利なVPSです。

KVM採用 お名前.com VPS(KVM) 2G プラン 初期設定費無料 キャンペーン 実施です。

タグの属性値の & を & へ変更する

さくらのVPS 全プランリニューアルです。（石狩(北海道)も選択可）

Serverman@VPS 完全1ヶ月無料キャンペーン実施中です。

KVM採用お名前.com VPS(KVM) 2G プラン初期設定費無料キャンペーン実施です。