XHTML5 移行メモ

　長いことXHTML1.1のまま運営してきたこのサイトですが、やはり新しいモノ好きなわたしは最新のHTMLを使いたくなってきます。
　てなわけでまたもやサイト大改造。全ページXHTML5に切り換えました。
　……相変わらず見た目は変わりませんがね。
　ですがまあ、コード的にキレイになったので良しとしましょう。ええ自己満足の極み。

　さて、そんなXHTML5ですが、移行作業してたら結構あちこちでつまずきました。
　ここはいつものアレ、「忘れる前にメモ」の原則に従ってメモ残しておきます。
　最新技術が大好きというデジタル浮気性の方はお試しあれ。

XHTML5は外部DTDを参照しない

　XHTML1.1では、以下のようなDOCTYPE宣言になってましたが、

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

　XHTML5ではこうなります。

<!DOCTYPE html>

　みじかっ！
　書きやすくなったのはいいんですが、外部DTDの参照がなくなったので以下の問題が発生します。

実体参照(特殊文字)を名前で指定できない

　Content-typeを「text/html」で出力してる人には関係ないですが、厳密に「application/xhtml+xml」を吐いてる場合はいささか困ったことになります。
　「<」(<)とか「&」(&)とかの実体参照はXMLの基本仕様に入ってるので問題ありませんが、「©」(©)や「»」(»)、さらには空白( )など、追加の実体参照はXHTML5では使えません。
　なにせこの辺の特殊文字はDTDに書かれてるので、外部DTDを指定しないXHTML5では構文エラーになってしまうのです。
　そんなわけで、これらの文字を使いたいときは「©」(©)のように、エンティティコードを直接指定して書くことになります。うおお面倒くさっ！

　WordPressの記事の中に含まれてる文字なども影響しますので、以下のようなフィルタを作って変換させてます。(いちいち書き直すのも面倒くさいし)
　テーマファイルの function.php に記述するのが吉でしょう。

<?php
/**
 * HTML実体参照フィルタ
 */
$html_entity_before	= array('&nbsp;', '&copy;', '&laquo;', '&raquo;');
$html_entity_after	= array('&#160;', '&#169;', '&#171;' , '&#187;' );

function html_entity_filter($html)
{
	global $html_entity_before, $html_entity_after;
	return str_replace($html_entity_before, $html_entity_after, $html);
}

// WordPressにフィルタを登録
add_filter('the_content',	'html_entity_filter');
add_filter('get_calendar',	'html_entity_filter');
?>

　フィルタを通さず、実体参照付きのコードを直接出力するようなプラグイン(Pagebarなど)を使ってる場合は、プラグインのPHPを直接いじらねばなりません。
　こればっかりは一度エラーを吐かせてみないことにはわからないので、試験環境などでがっつりテストしてください。

またしてもIEが足を引っ張る

　現行の最新版であるIE8はだいぶマシですが、それでもHTML5/XHTML5のような新しいタグを無視するクセはいまだに抜けてません。
　次期バージョンのIE9になれば対応してくれるそうですが、ユーザーが常に最新版入れてくれるとは限らないので対策を立てましょう。

// IE系レンダリングエンジン(互換ブラウザも含む)、バージョン8以下に適用
if(navigator.userAgent.match(/MSIE [5-8]\./))
{
    // とりあえず必要なタグだけ登録
    var html5 = "article,aside,footer,header,nav,section".split(",");

    for(var i = 0; i < html5.length; i ++)
        document.createElement(html5[i]);
}

　こんな感じのJavaScriptを書いて、IEに強制的にタグを登録します。
　IE8以下はブラウザに登録されてないタグを無視してしまうので、こう書かないといくらCSSでブロック指定しても反映されません。
　ちなみに面倒だったので自サイトで使ってるタグしか登録してませんが、XHTML5には他にも多くのタグが追加されてます。使う場合は順次登録してください。

XML宣言を引っこ抜く

　今さら言うまでもありませんが、XHTMLはXML文書です。
　なもんで普通は以下のようなXML宣言をファイルの先頭に記述しなければなりません。

<?xml version="1.0" encoding="utf-8" ?>

　……なんですが、XHTML5の場合はContent-Typeの問題にぶち当たります。
　XHTML1.0や1.1のときは「text/html」が(非推奨ながらも)使えたんですが、XHTML5では「application/xhtml+xml」または「application/xml」にしなければなりません。
　が、現状「application/xhtml+xml」に対応してないブラウザなんてうんとこさあります。

　そんなわけで、自サイトの文字コードがUTF-8の場合はXML宣言を書かずに、XHTML5ではなくHTML5として「text/html」を吐いてしまいましょう。
　(XML文書はUTF-8で書かれてる場合のみ、XML宣言を省略できます)
　Content-typeは<meta>タグには書かず、サーバ側で出力します。
　PHPで書くならこんな感じです。

<?php
// application/xhtml+xml を認識するブラウザではXHTMLとして出力
if(strstr($_SERVER['HTTP_ACCEPT'], 'application/xhtml+xml') !== false)
    header('Content-Type: application/xhtml+xml; charset=utf-8');
else
    header('Content-Type: text/html; charset=utf-8');
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja">
        .
        .
        .
</html>

まとめ

　駆け足で説明しましたが、これこの通りXHTML5はめたくそ面倒くさいです。
　正直HTML5の方が実用的ですし、そもそもXHTML自体が衰退の一途を辿ってるのでムリにXHTMLで書く必要はありませんが、表示チェックしながら構文チェックまでできるのがXHTMLの強みです。
　今どき「IEのバージョン○でご覧ください」なんて書きたくない方は、とことんブラウザ間の互換性が高いXHTMLでサイト構築してみるのも面白いと思いますよ。
　……人気ないですけどね、XHTML。(泣)

抹茶色のリニューアル - 2010年10月1日 (金)
サーバ移転のお知らせ - 2011年11月23日 (水)
Apache + Passenger で作る Redmine 環境 - 2011年5月13日 (金)
配色いじりまくり - 2010年10月18日 (月)
内部向けDNSの設定 - 2010年9月29日 (水)

トラックバック

トラックバック URL :

泥のようにさん - 2012年1月22日 (日) 14:13:48

XHTML5で実体参照を使う方法

HTML5にはXHTML版の記法も用意されていて、XMLが好きな人でも書けるようになっています。が、色々見ていたら「実体参照が使えない」という問題があるようで。。「<」(&lt;)…

シキシマヒロタカ。さん - 2011年2月11日 (金) 11:53:11

デジタル浮気ってなかなか新しい言葉ですね！

かのう神路さん - 2011年2月11日 (金) 15:00:44

> ボス
いま作ったｗ　今年の流行語大賞はコレで決まりネっ！
時代の先駆者かのう神路。

シキシマヒロタカ。さん - 2011年2月13日 (日) 19:26:30

×デジタル浮気性
○デジタル浮気

かのうさーんｗ

かのう神路さん - 2011年2月13日 (日) 20:02:26

> ボス
「デジタル浮気性」でいいんだよ？
「デジタル浮気の方は～」ではあきらかに文脈おかしいです。
「浮気」は行動、「浮気性」は性格を指す言葉ざんす。

シキシマヒロタカ。さん - 2011年2月13日 (日) 20:13:05

へっへっへ。
他の方はデジタル浮気性かもだけど、かのうさんは…。
へっへっへ。

かのう神路さん - 2011年2月13日 (日) 20:18:31

> ボス
ほっほっほ。
なにかな？　わたしはなにかな？　さあ恥ずかしがらずに言ってごらん。
ほっほっほ。

Cana さん - 2011年11月6日 (日) 9:43:37

うちもそろそろxhtml5に……と思って検索してたどり着きました。というか検索結果の１番目にいらっしゃいました(^_^)
いろいろ問題あるようですが、xhtmlには残って欲しいですね。タグ開きっぱなしは気持ち悪いので(^^;

XHTML5 移行メモ