(X)HTML5に書換(XHTML+RDFa1.0からXHTML5へ)

XHTML+RDFa1.0で作成していたページで、グーグルアドセンスコードを同期タイプから非同期タイプに変えたら、W3C validatorのチェックで沢山のエラーになってしまいました。そこで、思い切ってXHTML+RDFa1.0からXHTML5へ書き換えを実行しました。

HTML5(XHTML5)への移行について

HTML5はHTML4やXHTMLの後継らしく、最近HTML5に移行楽天する人が増えてきました。HTML5では文字コードのUTF-8が推奨でShift_JISは非推奨になっているために、私は今まで、HTML5への移行にためらっていました。

既存のページを全てUTF-8に書き換えるのが面倒なのと、ウィンドウズパソコンで新規のページやページの更新でうまく文字コードをUTF-8にして作成できるかどうか自信がなかったのも移行できなかった理由のひとつです。

ウェブページの高速化に取り組む中で、非同期コードに書き換えていきましたが、それがことごとくW3Cのエラーになるのです。

最後に、グーグルアドセンスの広告コードを同期タイプから非同期タイプに変えたら、W3C validatorのチェックで沢山のエラーが出てしまいました。

グーグルアドセンスでは、非同期コードをHTML5の仕様にしているらしく、HTML4やXTHMLでのエラーは修正する予定がなさそうに見えました。そこで私は将来の事を優先して、思い切ってHTML5に移行することにしました。

文字コードについてはShift_JISが非推奨でも、これを使ってはいけないということではないので、Shift_JISで行くことにしました。(その後、最終的には文字コードをUTF-8に変更しました。)

XHTMLからXHTML5への書き換え方法

まず、XHTMLはXML文書ですが、HTML5でXML宣言をするとValidatorでエラーになります。そこでXML宣言を削除しました。

下記の最初の行で、DOCTYPEを書きます。<!DOCTYPE html>でHTML5だということになります。次に、日本語のテキストでは、html要素にlang属性も指定しないと日本語として認識しないことがあるのでhtmlタグ内にxml:langも指定しています。

次に、headタグでRDFa用の「og:」と「fb:」をprefixで指定しました。(htmlタグでも良いようです)

XML宣言で文字コードの指定が無くなったので、文字コードの指定はメタタグの中でUTF-8を指定しました。また、元々、HTTPヘッダーに文字セットを使用してデフォルトの文字コードを設定していますので、これだけで文字化けの問題はありません。

XHTML5の実際のコード

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#">
<meta charset="utf-8">
<title>タイトル</title>
</head>
<body>
本文
</body>
</html>

その他はXHTMLの時と特に変ったところはありません。普通にXHTMLで書けば良いだけです。

メタタグの書き換え

下記のメタタグはHTML5では必要ないので削除しました。というより書くとエラーになります。

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />

リンクタグの書き換え

ショートカットアイコンについては、下記の上の行がエラーとなるので削除しました。

<link rel="shortcut icon" href="ドメイン/favicon.ico" />
<link rel="icon" href="ドメイン/favicon.ico" />

このようにショートカットアイコンは次の行だけにしました。

<link rel="icon" href="ドメイン/favicon.ico" />

HTML5の文法をチェック

HTML5の文法をチェックするValidatorの代表的なものは次の通りです。時々、作成したページの文法をチェックしてみましょう。

http://validator.w3.org/

http://html5.validator.nu/

結果

上記の書き換えをして、Validatorのチェックをすると全てパスしました。Validatorでは「HTML5 + SVG 1.1 + MathML 3.0 + RDFa Lite 1.1 + ITS 2.0.」を使っていると表示されました。

HTML5への変更がこんなにあっけないものだとは思いませんでした。