HTML5をXHTMLにも準拠するように書く方法がW3Cに掲載されてたので、普段使いそうな部分を軽くまとめてみました(2011年3月現在)。この書き方 (Polyglot) にしておくとXMLパーサもXHTMLパーサもHTMLパーサも同じように文書を解釈してくれます。無難かつ綺麗な感じもするので、これからはこれに則ってHTMLを書くことにしてみようと思ってます。
MathMLやSVGに関する部分などは省いてますので詳細は以下を参照してください。
ソース:Polyglot Markup: HTML-Compatible XHTML Documents
概要
PolyglotなHTMLは、
- ValidなHTMLドキュメントである
- Well-formedなXMLドキュメントである
- HTMLとして処理してもXMLとして処理しても同一のDOMを持つ
特定のXML DTDに準拠している必要はありません。
最小必要構成
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title></title> </head> <body> </body> </html>
HTML5のDoctypeを使用し、htmlタグには上記ネームスペースを割り当てます。
langとxml:langは両方同じ値を指定します。
文書自体はUTF-8かUTF-16で作成します。(UTF-8推奨)。
普段使いそうな構成
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <meta charset="utf-8"/> <link rel="stylesheet" type="text/css" href="external.css"/> <script src="external.js"></script> <title></title> </head> <body> </body> </html>
meta charset=”"は必須ではなく推奨。”utf-8″の部分はCase-insensitive。
タグごとの書き方
table
tbody要素が必須です。
<pre>
<table>
<tbody>
<tr>
<td>...</td>
</tr>
</tbody>
</table>
</pre>
また、colタグを使用するときはcolgroupタグが必須です。
textareaとpre
改行から始めてはいけません。
<pre>require 'rubygems' require 'nokogiri' ...</pre>
void要素
void要素(閉じタグを使わない要素)の一覧は以下の通りです。
- area
- base
- br
- col
- command
- embed
- hr
- img
- input
- keygen
- link
- meta
- param
- source
これらの要素は<br/>のように短縮形で書きます。
これら以外の要素は中身が空の時でも短縮形を使わず<p></p>と書きます。
文字参照
以下の場合はかならず文字参照を使います。
- CDATAセクション外の&と<
- 属性値の中で改行やタブ文字などを使うとき
文字参照で名前を使っていいのは以下のものだけです。
- amp
- lt
- gt
- apos
- quot
それ以外のものは数値参照で表します。例えば
- nbsp –  
- copy – ©
- reg – ®
- laquo – «
- raquo – »
- mdash – —
完全な一覧はこの辺りを参照:
http://en.wikibooks.org/wiki/Unicode/Character_reference/0000-0FFF
http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references
その他のルール
- noscriptタグは使えません
- document.write()とdocument.writeln()は使えません。innerHTMLはOK
- ページ内に<または&を含むjsやcssを書くときはCDATAセクションに入れます
- < ![CDATA[ここにunsafeなコンテンツ]]>
- xml:spaceとxml:base属性は使えません
- id属性値にスペースを含めてはいけません
- タグ名/要素名はすべて小文字です
- 属性値は大文字/小文字を統一します(全部小文字にしておけばOK)。
- 属性値はシングルクオートかダブルクオートで囲います
W3CにサンプルHTMLもありますので参考にどうぞ。

