HTMLとXHTMLの相違点

2010.10.15crossnodeHTML


XHTMLでコーディングしようと思ったときにまずは「HTMLとXHTMLはどこがどう違うの?」という疑問につき当たると思います。
そこで今回はHTMLとXHTMLの主な相違点10項目を挙げてみました。

01 : 終了タグは省略しない

HTMLで許容されていた終了タグの省略はできなくなりました。
タグはきちんと閉じましょう。

<div>
	<p>〜</p>
</div>

<div>
	<p>〜
</div>

02 : 空要素は「 />」で閉じる

br、img、hr、meta などの空要素(開始タグのみの要素)は「<br />」のように書きましょう。
HTMLと同じように開始タグ単体で記述すると1番目の条件に反してしまうので、終了タグが存在しないタグはこのように記述します。

<br /><img src="sample.jpg" />

<br><img src="sample.jpg">

03 : 要素名、属性名は小文字で記述する

XHTMLでは全ての要素名と属性名は小文字で宣言されており、大文字だと解釈されなくなりました。
今までHTMLで大文字派だった人も仕方ないので慣れましょう。

<div id="sample">〜</div>

<DIV ID="sample">〜</DIV>

04 : 属性値は常に引用符でくくる

属性の値をくくるダブルクォーテーションを省略できなくなりました。

<img src="sample.jpg" width="100" height="100" />

<img src="sample.jpg" width=100 height=100>

05 : 属性の省略化はしない

属性名と値が同じ場合にも必ず属性名と値を両方記述することになりました。

<option selected="selected">〜</option>

<option selected>〜</option>

06 : name属性はid属性に。またはnameとidを併記する

name属性はXHTML1.0では非推奨、XHTML1.1以降は廃止になりました。
どうしてもnameを使いたいという場合には、XHTML1.0で宣言しnameと必ず同じ値でidも併記しましょう。

<!-- XHTML1.1の場合 -->
<div id="sample">〜</div>

<!-- XHTML1.0の場合 -->
<div name="sample" id="sample">〜</div>

<div name="sample">〜</div>

07 : 先頭と末尾のスペースは無視。連続するスペースまたは改行はスペース1コとみなされる

先頭と末尾のスペースは無視され表示されません。
連続するスペースは1コのスペースとして表示されます。
改行はスペースとして表示されます。
したがって、スペースでインデントやマージンを調整しようなんて野暮な事はできません。
本文中での改行がスペースとして表示されてしまうので、表示上の段落と違うところで改行しないようにしましょう。

<p> Hello world! </p>
<!-- 表示結果「Hello world!」 -->

<p>Hello   world!</p>
<!-- 表示結果「Hello world!」 -->

<p>Hello wor
ld!</p>
<!-- 表示結果「Hello wor ld!」 -->

08 : リンク先URL内でも「&」は必ず「&amp;」と記述する

テキスト内だけでなく、リンク先URL内(クエリ)でも「&amp;」と書くことになりました。
HTMLと同じように書いてしまうとURLの「&」以降が認識されません。

<a href="sample.php?id=1&amp;type=2">〜</a>

<a href="sample.php?id=1&type=2">〜</a>

09 : 言語コードの指定に「xml:lang」を使用する

XHTML1.0ではhtmlタグを「<html xmlns=”http://www.w3.org/1999/xhtml” lang=”ja” xml:lang=”ja”>」と書くようにしましょう。「xmlns=”http://www.w3.org/1999/xhtml”」という部分はXHTMLのタグセットを使用するよという指定をしているので、フォーマットとしてこれもセットで記述するようにしましょう。
XHTML1.1ではlang属性が廃止になったので、言語指定はxml:lang属性だけ使用しましょう。

<!-- XHTML1.1の場合 -->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">

<!-- XHTML1.0の場合 -->
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">

10 : スクリプトおよびスタイル要素の書式

htmlファイル内にJSやCSSを記述する場合はscriptタグ内で「<![CDATA[〜]]>」のように書きましょう。

例:JSの場合

<script type="text/javascript">
<![CDATA[
function sample(){
	alert('Hello world!');
}
]]>
</script>

<script type="text/javascript">
<!--
function sample(){
	alert('Hello world!');
}
-->
</script>

 
こう見てみるとHTMLよりも厳格化されていることが分かります。
HTMLコーディングで色々省略するくせがついている方は少し戸惑うかもしれませんが、ブラウザでの表示速度が早くなるとかならないとか良い噂もあるので頑張りましょう。

詳しくはW3Cサイトで勧告を見てみると良いですよ。説明が英語でよく分からなくてもソースは万国共通だから何かしら得るものがあるはずです。
あとは実際にコーディングしながらW3CのMarkup Validation Serviceと相談という検証法もありかもしれませんね。
 
 
▼参考サイト

All Standards and Drafts – W3C(W3C勧告一覧)

The W3C Markup Validation Service

W3C – W3Cの仕様書等の文書の日本語訳集

XHTMLの書き方と留意点

HTMLとXHTMLの違い

HTMLの基本-Web標準への対応

HTMLからXHTMLへ(基礎知識)

HTMLとXHTMLの違いはどこにある?

コメントを残す


ページトップへ