HTMLとXHTMLの違い

XHTMLって何？

「せっかくHTMLを覚えたのに、今度はXHTMLを覚えなきゃいけないの？」と思った方、安心して下さい。XHTMLとは、簡単に言うと「HTMLにXMLの特徴を足したもの」に過ぎません。厳密に調べていくと進化の過程が違うので、「別物」として扱いたいところですが、実際にコーディングしてみるとHTMLの延長でXHTMLを記述することができます。

ここでは、歴史や進化の過程ではなく、ウェブ制作者の目線で具他的に何がどう違うのか、HTMLからXHTMLに移行する場合に、何をすれば良いのかを説明していきます。HTMLを覚えたばかりの方や、ウェブデザイナーを目指している方は、ぜひ覚えておいて下さい。

HTMLで作られたページをXHTMLにするには

古いサイトのデザインをリニューアルする際、HTMLで記述されたウェブページをXHTMLに記述し直さなければならないことがあります。実際には、全て作りなおしてしまうことが多いのですが、HTMLとXHTMLの違いを理解していれば、最も合理的な手段を選択することができるはずです。

HTMLで記述されたウェブページをXHTMLで書き直す場合には、XHTMLのルールに従って修正していきます。また、デザインやレイアウトはCSS（スタイルシート）を用いて表現していくため、文字の装飾タグなど使わなくなったタグの排除も必要になります。

XHTMLのルール

XML名前空間を宣言する

ウェブページを参照する際には、ウェブブラウザなどのUIが用いられます。書かれている文章を正しく解読させるためには、使用している言語を宣言する必要があります。

ドキュメントのルートであるHTML要素にXML名前空間を宣言することで、書かれているドキュメントがXHTMLでマークアップされていることを宣言します。


<html xmlns="https://www.w3.org/1999/xhtml">

適切なDTDを指定し、そのルールに従っていること

XHTMLを定義するために<!DOCTYPE>宣言を用います。DOCTYPEについての詳しい説明はこちらをお読み下さい。


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

開始タグと終了タグを必ず記述する

HTMLでは終了タグを省略したり、空要素タグをそのまま閉じずに書いていましたが、XHTMLでは開始された要素は必ずどこかで終了しなければなりません。<br>や<hr>などの終了タグがないもの（空要素タグ）に関しては「<br />」「<hr />」と記述します。


<ul>
	<li>リスト要素
</ul>

<p>
	<img src="/images/image.jpg" alt="画像">
</p>

<div>
	テキストテキストテキスト<br>
	<br>
	テキストテキストテキスト<br>
</div>


<ul>
	<li>リスト要素</li>
</ul>

<p>
	<img src="/images/image.jpg" alt="画像" />
</p>

<div>
	テキストテキストテキスト<br />
	<br />
	テキストテキストテキスト<br />
</div>

要素名と属性名は小文字で書かなければならない

HTMLでは、タグを記述する際に大文字、小文字を区別しないためどちらで書いても構わないという説明でしたが、XHTMLでは大文字、小文字を区別するので小文字で統一しなければなりません。


<HTML>
	<HEAD>
		<TITLE>タイトル</TITLE>
	</HEAD>
	<BODY>
		<DIV>内容を記述<DIV>
	</BODY>
</HTML>


<html>
	<head>
		<title>タイトル</title>
	</head>
	<body>
		<div>内容を記述<div>
	</body>
</html>

属性値を必ず引用符で括られなければならない

HTMLでは、属性に与える値の引用符を省略して記述するケースが認められていましたが、XHTMLでは全ての属性値を引用符で囲まなければなりません。


<img alt=image width=100 height=50>


<img alt="image" width="100" height="50" />

属性を省略化してはならない

HTMLでは、属性の名前と値が同じ場合に省略化して記述することができましたが、XHTMLでは正しい形式で書かなければなりません。


<input type="radio" name="check" value="1" checked>
<select name="select">
	<option value="1" selected>A</option>
	<option value="2">B</option>
	<option value="3">C</option>
</select>


<input type="radio" name="check" value="1" checked="checked">
<select name="select">
	<option value="1" selected="selected">A</option>
	<option value="2">B</option>
	<option value="3">C</option>
</select>

name属性は非推奨

ページ内リンクなどで用いていたname属性が非推奨になり、代わりにid属性を使うようになりました。あらゆる環境で動作させるためには、idとnameを併用します。


<a href="#link01">ページ内リンク</a>
・・・
<a name="link01">ここにジャンプ</a>


<a href="#link01">ページ内リンク</a>
・・・
<a id="link01" name="link01">ここにジャンプ</a>

HTMLって何？初心者が最初に学ぶべき基礎知識

HTMLの書き方をわかりやすく解説

HTMLファイルの作り方

最初に覚えるべきHTMLタグ

ヘッダー情報について

ハイパーリンクについて理解する

改行や半角スペースを連続で表示させる方法

グローバル属性の一覧

コンテンツ・モデルとコンテンツ・カテゴリ

文書のアウトライン

ディレクトリの意味と使い方を詳しく解説