ウェブランサー

HTMLとXHTMLの違い

HTMLとXHTML

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

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

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

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

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

XHTMLのルール

XML名前空間を宣言する

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

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

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

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

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

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

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

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

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

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

<div>
テキストテキストテキスト<br>
<br>
テキストテキストテキスト<br>
</div>
XHTML
<ul>
<li>リスト要素</li>
</ul>

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

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

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

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

HTML
<HTML>
<HEAD>
<TITLE>タイトル</TITLE>
</HEAD>
<BODY>
<DIV>
内容を記述
<DIV>
</BODY>
</HTML>
XHTML
<html>
<head>
<title>タイトル</title>
</head>
<body>
<div>
内容を記述
<div>
</body>
</html>

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

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

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

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

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

HTML
<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>
XHTML
<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を併用します。

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

HTMLリファレンス

HTMLって何? 初めての方でも分かる超基礎知識を解説します
HTMLの書き方 HTMLタグの書き方と基本的なルールについて
HTMLファイルの作り方 HTMLファイルを作成してから保存するまで
改行と半角スペース HTMLで改行や半角スペースを扱う際のルール
ハイパーリンクについて ドキュメントをリンクでつないでみましょう
ヘッダー情報について HTMLドキュメントのヘッダー情報について
ディレクトリの意味 「ディレクトリ」という言葉の意味
HTMLとXHTMLの違い XHTMLでWebサイトを作る際の特徴とルール