REDLINE MAGAZINE | htmlとxhtmlの違いREDLINE MAGAZINEトップページへ

すべてのエントリを見る

htmlとxhtmlの違い

htmlとxhtml、両者の違いがイマイチ分からないという方も多いと思う。webに詳しい方には「そんな説明の方法はないでしょっ!お前アホか。」と怒られそうだが思い切って簡単に言ってみる。

htmlとxhtmlは、顔がよく似ている腹違いの兄弟みたいなものです。
htmlさんのお母さんはSGMLさんで、xhtmlさんのお母さんはXMLさんです。xhtmlさんはSGMLさんとXMLさんの話し合いの結果産むと決められた子です。

表面上の顔はよく似てますが、htmlの性格はおおざっぱで自由奔放でとっつきやすい人です。逆にxhtmlさんは細かい事を気にする神経質です。xhtmlさんのお母さんであるXMLさんは顔が広く交友関係が広いので、最近はxhtmlさんの方がweb現場では気に入られています。

・・・と違いはこんな感じ。両者の違いの詳細についてはいろんなサイトで解説されているのでここではこのくらいで。
参考サイト
>>HTMLとXHTMLの違いはどこにある?(少し小難しいけど)
>>XHTML™ 1.0: 拡張可能ハイパーテキストマークアップ言語

では次に、神経質なxhtmlさんのソースを書く上での注意点というかhtmlさんと異なる点について書いてみる。

基本的にはhtmlと一緒だと思ってもいい。ただ、少し書式が厳しいというか、ちゃんと決まり事を守らないとダメですよと注意しなきゃならない項目が増える。

●小文字で書く
htmlの場合は要素名や属性名は大文字でも小文字でもOKなのだが、xhtmlの場合は全てのタグにおいて要素名も属性名全部小文字で。(属性の値は大文字でもOK)

●整形式を用いる
整形式というと難しいが、要するにまず正しいツリー構造になってる事。

図:階層について

こんな風にxhtml文書は階層のように考える事ができる。こういう階層の事をツリー階層と呼ぶ。

ほんとに厳密に言うと、

<body>
	<div class="chapter">
	<h1>大見出し</h1>
		<div class="section">
		<h2>中見出し</h2>
			<div class="paragraph">
			<p>段落</p>
			</div>
		</div>
	</div>
</body>

こんな風に細かくそれぞれの効果が及ぶ範囲を記述しないといけないのかもしれないけど、現実はそこまでしている人はあまりいない(少なくとも私の回りには)とりあえず、「階層として考えるもの」とだけ覚えておけばいいと思う。

開始タグと終了タグをちゃんと書く。
その際「タグ入れ子(ネスト)」の関係が正しくなってる事。そういう状態の事をwell-formed(ウェルフォーマット・ウェルフォームド)とか参考書なんかでは書いてある事も多い。

図:タグの入れ子について

●空要素タグの最後には「/」を入れる
空要素って何よという話だが、htmlの時に閉じタグを省略してもよかったタグのこと。brとかimgとかinputとか。

xhtmlの場合は必ず開始タグと終了タグを入れるお約束があるので、brの場合<br></br>もしくは略して<br />となる。brと/の間に半角スペースがあるのは、もし<br/>とした場合そのタグを正しく認識できないブラウザがある可能性があるからということらしいが、お約束として覚えてしまえばそれでいい。

図:空要素について

●属性値は必ず引用符で囲む
htmlの場合は引用符(")の省略が認められていたが、xhtmlは必ず属性の値を""で括る。

図:引用符について

●属性の省略書式は使わない
htmlの時は属性の名前と値が同じ場合は属性名を書かなくてもよかったが、xhtmlでは何があろうと属性の値を書く。

図:省略書式について

●文中の「<」「>」などの記号は実体参照を用いる
参考サイト >>文字実体参照

図:実体参照について

タグは「<」「>」もそのまま記述してもちろんOKなのだが、例えば文中に「>>○○はこちら」みたいなリンクがあったとする。その場合、ソース内では必ず実体参照を用いて「&gt;&gt;○○はこちら」とする。

特に気をつけるのは「&」
「&」だけは文中だろうがソースの属性の中であろうが、全て「&amp;」と記述する。これ、よくミスる。

●ページ内リンク等で使用する位置を示すにはid属性を併用する
htmlは「<a name="foo">ここに移動</a>」こんな感じでページ内リンクを設置していたが、xhtmlでは同一ファイル内での位置を示す属性にはid属性を使いなさいということなので「<a name="foo" id="foo">ここに移動</a>」とidを併用する。

現在の所、id属性をサポートしていないブラウザもあるということでname属性も一応記述する。但しXHTML1.1ではname属性は廃止とされる模様。上の例ではよく見かける感じでaタグを使ったが、もちろん「<div id="foo">」となっている場所はaタグを置かなくてもいい。これをフラグメント識別子として解説している参考書も多い。

●XML宣言
xhtmlは文書の冒頭に「<?xml version="1.0" encoding="UTF-8"?>」というのを書かなくてはならない。が、この記述が入るとIEで少しやっかいな事が起こるので、省略している人が多い。本当はどんな時でもこの記述を入れておく事が「推奨」されているが、文字コードが「utf-8」「utf-16」の場合は省略できる。

<< 構造文書の大切さ | DTDについての簡単な話 >>

トラックバック

このエントリーのトラックバックURL:
http://redline.hippy.jp/cgi/mt/mt-tb.cgi/99

このページの一番上へ

その他の情報など

最近のコメント

PHP オブジェクト指向の勉強
  • Red - 2010.01.08
  • hogepage - 2010.01.21
  • Red - 2010.01.22
  • - 2011.11.27
  • houseiii - 2011.11.27
Fireworks トリミング画像を一括書出 CS4編
  • Iper - 2009.06.27
  • Red - 2009.06.27
  • mala - 2011.11.17
  • Red - 2011.11.18
jQueryでボックスを上下左右中央に簡単配置
overflow を使用したボックス背景のこと
  • - 2007.12.13
  • Red - 2007.12.13
  • - 2007.12.13
  • Red - 2007.12.13
  • hj - 2011.09.23
IE6 → 透過PNG+overflow=混ぜるな危険(追記有)

メッセージを送る

こちらのメッセージ送信フォームは閉鎖させて頂きました。
御用の方は新しい方のブログ にコメント頂くか、 連絡用のフォーム もありますので、そちらからご連絡ください。