- Posted by: ヒコ
- 2007年12月 6日 21:58
- XHTMLとCSS
このサイトでは良く登場するXHTMLという単語。HTMLとそっくりですが、今日はこの両者の違いについて書いてみようと思います。
HTMLとXHTMLは腹違いの兄弟です（笑）
HTMLとXHTML。一目見れば分かるとおり、「X」の１文字が頭についただけの違いしかありません。このことからも何となく分かるように、HTMLとXHTMLは兄弟です。
ただ、血が繋がっていません（笑）
この辺りのことを細かく説明すると楽しめる範囲を超えてしまいそうなので、ここではとりあえず省きます。その変わり、HTMLとXHTMLのパッと見て分かる９つの違いをお話しようと思います。
この９つ違いさえおさえておけば、簡単にXHTMLを使い始めることが出来ますよっ。
HTMLとXHTMLの９つの違い一覧
- タグは全て小文字で書く
- タグの終了を明示する
- 空要素タグの最後には「/」を入れる
- 属性の省略式は使えない
- 属性値は必ず引用符で囲む
- 文書に含まれる<や>には実体参照を使う
- name属性とid属性は併用する
- 整形式（ツリー構造）をもちいる
- XML宣言をする
以上の９つの違いがあり、それぞれの詳細はいかのようになっています。
タグは全て小文字で書く
HTMLではタグに大文字や小文字を混在して使うことが出来ました。もちろん、大文字のみで構成することも可能です。
これが、XHTMLでは全て小文字に統一されました。
- HTMLの場合
-
<DIV ID="hoge"> <P>Pタグは１つの段落を表します。</P> </DIV>
- XHTMLの場合
-
<div id="hoge"> <p>Pタグは１つの段落を表します。</p> </div>
タグの終了を明示する
HTMLでは終了タグの省略が可能でしたが、XHTMLでは省略が許されず、その終了を明示してあげる必要があります。
- HTMLの場合
-
<UL> <LI>バナナ <LI>リンゴ <LI>みかん </UL>
- XHTMLの場合
-
<ul> <li>バナナ</li> <li>リンゴ</li> <li>みかん</li> </ul>
空要素には「/」を入れる
空要素といってもピント来ないかもしれませんが、例えば以下のようなタグが空要素になります。
- 一般的な空要素タグ
-
<INPUT>タグ<BR>タグ<HR>タグ
- 上記タグをXHTMLで書き直した場合
-
<input />タグ<br />タグ<hr />タグ
属性の省略式は使えない
HTMLの場合は属性とその値が同じだったばあい、省略して書くことができましたが、XHTMLではそれが出来ません。
- 属性の省略式の例
<INPUT TYPE="CHECKBOX" CHEKED>- XHTMLで書き直した場合
<input type="checkbox" cheked="checked" />
属性値は必ず引用符で囲む
HTMLの場合は属性に対する値をそのまま書くことが出来ましたが、XHTMLの場合は属性値は必ず引用符で囲む必要があります。
- HTMLで引用符を省略した場合
width=100%- XHTMLで書き直した場合
width="100%"
文書に含まれる「<」や「>」は実体参照を使う
実体参照ってなんすか？って話ですが、難しいものではありません。
HTMLの場合は「<」や「>」もそのまま書くことが出来ましたが、XHTMLの場合は「<」や「&>」と書く必要があります。
これは、タグ自体をそのような書式で書くという訳ではなく、タグ以外に「<」「>」が出現する場合です。
name属性とid属性を併用する
HTMLではページ内リンクを行う場合にはname属性を使っていましたが、XHTMLではid属性を使用します。
ただし、id属性の値は同一ページ内で同じものを使用することができないので、一部のjavascriptなどを使うためにname属性のみで妥協することもあります（笑）
- HTMLでname属性を使った場合
-
<a name="hoge">hogeに移動</a>
- XHTMLでid属性を使って書き直した場合
-
<a name="hoge" id="hoge">hogeに移動</a>
整形式（ツリー構造）を用いる
XHTMLは構造化言語と言われるものなので、文書の構造をしっかりと明示する必要があります。
- 構造化されていないXHTML
-
<body> <h1>見出し１</h1> <h2>見出し２</h2> <p>テキスト段落１</p> <p>テキスト段落２</p> <h2>見出し２</h2> <ul> <li>リスト</li> <li>リスト</li> </ul> <h3>見出し３</h3> <h4>見出し４</h4> </body>
- 構造化されたXHTML
-
<body> <h1>見出し１</h1> <div class="section"> <h2>見出し２</h2> <p>テキスト段落１</p> <p>テキスト段落２</p> </div> <div class="section"> <h2>見出し２</h2> <ul> <li>リスト</li> <li>リスト</li> </ul> <div class="section"> <h3>見出し３</h3> <p>テキスト段落</p> <div class="section"> <h4>見出し４</h4> <p>テキスト段落</p> </div> </div> </div> </body>
上記の構造化の例では、各h系タグの出現ごとにdivタグでグルーピングし、その見出しの影響範囲を明示するという手法を使っています。
しかし、divタグ自体は何の意味も持っていないため、個人的にはあまり使いたくないと考えています。そのため、サイトの構造によっては、divタグの使用頻度を減らすなどして、どこまで構造化するか？を考えていく必要もあります。
XML宣言をする
ページの冒頭（htmlファイルの一番最初の行）に以下のようなコードを書く必要があります。
<?xml version="1.0" encoding="使用している文字コード"?>
しかし、インターネットエクスプローラー６以下は、このXML宣言を理解してくれません。そのため、XML宣言のあるサイトでは、後方互換モードというもので動作し、CSSの解釈があやふやになってしまいます（笑）
ただし、文字コードにUTF-8やUTF-16を使用している場合は、XML宣言の省略も認められていますので、これらの文字コードを使うことで堂々とXML宣言を外すことが出来ます。
ちなみに、このブログではIE６以下のブラウザではXML宣言を省略し、それ以外のブラウザの場合はXML宣言を追加するという処理をPHPで行っています。
この方法については別の機会に書いてみようかと思います。
かなり余談も入ってしまいましたが、以上の９つがHTMLとXHTMLの大きな違いです。
SEO的な余談
XHTMLとCSSでSEO対策になる！ということが広まっているからなのかは分かりませんが、HTML式にコードを書いているのにドキュメントタイプはXHTMLになっているサイトが良くありますが、それでは意味がありません（笑）
サイトをブックマーク
