XHTMLへの移行ポイント｜XHTMLへの移行

現在地: Home » 上級スタイルシートレイアウト講座：目次 » XHTMLへの移行ポイント

XHTMLへの移行ポイント

XHTMLと聞くとなんだか難しそうな感じがしますよね。しかし、実際はそんなに難しくはありません。当サイト内の初級ホームページ作成講座レベルで掲載している内容も、XHTMLへの移行を考慮して、一部XHTML使用になっています。

「難しそう」はあくまでも自分の思い込みに過ぎないので、諦めずに頑張りましょう。

ウェブ標準XHTMLへの移行ポイント

DOCTYPE宣言

HTML文章を記述する際にDOCTYPE宣言の記述とブラウザのレタリングモードについて触れました。参考:レイアウトが崩れる原因

XHTMLでは下記のように記述します。

--HTML 4.01 Transitional(初級)--
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">


--XHTML 1.0 Strict--
<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

--XHTML 1.0 Transitional--
<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

上記はW3Cの形式に沿った正式な記述なのですが、問題がひとつだけあります。

<?xml version="1.0" encoding="Shift_JIS"?>部分はXML宣言と言いますが、「WIN版IE6」ではこのXML宣言を記述するとブラウザのレタリングモード(表示)が強制的に「互換モード」になってしまいます。

解決策としては、XML宣言は記述しないのが現在の方法です。

では、XHTML 1.0 StrictとXHTML 1.0 Transitionalのどちらを使用すべきか。これは、XHTMLへの移行段階から考慮しても「XHTML 1.0 TransitionalのXML宣言なし」を使うべきです。HTML同様Transitionalはある程度許容範囲があるので。

--採用文書型定義--
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

▲Top

小文字で記述

XHTMLでは要素名及び属性名は「すべて小文字」で入力しなければなりません。当サイト内では、この点を考慮してすべて小文字で説明してきたので、それほど苦にならないのではないでしょうか。

タグはすべて閉じる

XHTMLでは、タグはすべて閉じなければいけません。開始タグで始まり終了タグで閉じるのが基本です。下記にサンプルを載せますが、これに関しても当サイト内では、ほぼ閉じた型を取ったので苦にならないと思われます。

--HTML 省略可--
<ul>
<li>メニュー
<li>メニュー
<li>メニュー
</ul>

--XHTML--
<ul>
<li>メニュー</li>
<li>メニュー</li>
<li>メニュー</li>
</ul>

▲Top

空要素

今まで何も考える事無く使用していた<br> <hr> <img> <col> <input> <meta>などですが、この空要素も閉じなくてはいけません。下記参照。

<br> --- <br />

<hr> --- <hr />

<img> --- <img />

<meta> --- <meta />

属性値

HTMLでは省略が可能な属性値もXHTMLでは省略する事は出来ません。「属性値="属性値"」形式で記述しなければいけません。

<input type="radio" checked="checked">

▲Top

style要素

HTMLの<head>内に指定するCSSはブラウザが文字として読み込まないようにコメントアウトしていましたが、XHTMLでは今度は本当に「コメント」として扱われます。即ちスタイルが適用されないと言う事です。

しかし、CSSのメリットを享受するなら外部からCSSファイルを読み込むのが一番です。よってあまり詳しくは触れませんが「どうしても、このページには別のスタイルを指定したい」と言う時は下記を参考にして下さい。

--HTML --
<style type="text/css">
<!--
p{color : red;}
-->
</style>
</head>

--XHTML--
<style type="text/css">
  @import"ファイル名.css";
</style>
</head>

これも外部からCSSファイルを読み込んでいますがこちらが優先されます。

非推奨要素

次ページ参照:非推奨要素

▲Top