HTML5の参考リンク

[バリデータチェックツール]
●Validator.nu (X)HTML5 Validator
個人的にはこちらの方が見やすいと思います。
エラー箇所をソース表示時に反転表示してくれますし、画像レポートもあります。
●W3C Markup Validation Service
おなじみのW3Cのバリデータチェックツールです。

[HTML5関連]
●HTML5 differences from HTML4
W3C草案の”HTML5におけるHTML4からの変更点”です。
※最新版は2012.3.29付
●HTML5におけるHTML4からの変更点
上記の日本語訳です。
W3Cの方が先に更新されていることもありますので、ご注意ください。
※2011.5.25付(最新版の2012.3.29付の日本語訳は未掲載)
●HTML5.jp
羽田野氏が運営されているサイトです。
HTML5に関する情報をわかりやすく解説してくれています。
W3C仕様書の日本語訳もしてくださっているありがたいサイトです。
●@IT HTML5タグ チートシート
HTML5のタグとその概要説明をPDFとPNG画像でダウンロードできます。

HTML5で仕様が変わったタグ

XHTMLでの記述時にはよくやってしまいがちな、HTML5のバリデータチェックでは通らないものをいくつかあげてみようと思います。

●a要素のアンカーリンク
XHTMLでアンカーリンクを設定する場合、a要素のname属性とid属性を使い、別途記述したa要素のhref属性で参照していましたが、HTML5ではページのアンカーリンクのみにa要素を使うことはできなくなりました。また、name属性も廃止になっています。HTML5でアンカーリンクを設定する場合、要素に関わらすid属性を指定することでアンカーリンクを設定できるようになりました。

例

<!--XHTML-->
<h1><a name="top" id="top">HTML5</a></h1>
　･
　･
　･
<a href="#top">ページのトップへ</a>
　↓
<!--HTML5-->
<h1 id="top">HTML5</h1>
　･
　･
　･
<a href="#top">ページのトップへ</a>

●target属性
別ウィンドウでページを開きたい場合によく使っていた｢target=”_blank”｣、transitional(互換モード)では気にしていませんでしたが、strict(標準モード)では非推奨タグでした(javascriptなんかで代用していましたよねー)。ですが、HTML5ではtarget属性が非推奨ではなくなりました。

●address要素とsmall要素
XHTMLでの記述時にはaddress要素に”クレジットや公開年月日(コピーライト表記)”を含めていましたが、HTML5では”著者や管理者の連絡先情報に限られる”ため、コピーライト表記を含めることができなくなりました。ですから、コピーライト表記は、HTML5から”免責条項･著作権表記･警告等の細目テキスト”を表すようになったsmall要素(文章の注釈や補足としても使用可能)でマークアップします。

例

<!--HTML5-->
<footer id="copyright">
<address>
お問い合わせは<a href="mail to:○○○○○@○○○○○.com">○○○○○@○○○○○.com</a>まで
</address>
<p><small>Copyright © 2012 Web Creator Net. All Rights Reserved. j-phone-kyushu.com</small></p>
</footer>

●table要素のcellpadding属性･cellspacing属性
HTML5では、table要素の”cellpadding”や”cellspacing”等の表象的な属性がすべて削除されました。これらは本来CSSで取り扱われるべきだからです(※2012.3.25現在、HTML5でのバリデータチェックには通りませんが、表示上は反映されるようです。W3Cの草案内では、HTML5で書くことのできない”不在の属性”として扱われているようです。要するに非推奨ですので、HTMLタグ上では使用せずCSS側で指定します。この他、bgcolor･frame･align･width･rules属性も同じ扱いとなっています)。
また、table要素のborder属性には、”1″もしくは空文字列しか指定できなくなりました。
“cellpadding”や”cellspacing”といったセルの余白や間隔の設定をCSSで行う場合、以下のようにします。

CSSでtableの余白･間隔を指定

/* tableの余白･間隔を指定 */
table.space {
        border-collapse: collapse;
}
table.space tr td {
        padding: 0px;
}

補足

HTMLに<table class=”space”><tr><td>～</td></tr></table>と書きます。
上記は<table cellpadding=”0″ cellspacing=”0″>と一緒です。
“cellpadding”と”cellspacing”はHTML5では非推奨ですので、CSS側でプロパティに”border-collapse”、値に”collapse(隣接するセルのボーダーを重ねて表示)”を指定します。この場合、間隔をあけないので、table.space tr tdに”padding: 0px;”を指定します。
プロパティ”border-collapse”の値には、”separate(隣接するセルのボーダーを間隔をあけて表示)”もありますが、セルのボーダーの間隔を指定するプロパティ”border-spacing”を有効にする時に使いますので、IE7以前には対応していないプロパティである”border-spacing”を使うことはないと思いますので、値”separate”は覚えなくてよいと思います。

[間隔をあけたい場合は？]
cellpadding=”○”に相当するのが、table.space tr tdの”padding: ○px;”ですので、○の箇所に数値を指定します。

[セルに色と線を付けたい場合は？]
table.space tr tdに”background-color:;”と”border:;”を追記し、値に背景色とボーダーの種類･太さ･色を指定します。

table関連のタグをCSSで扱う時、今のところこれがベストなやり方だと思います。
モダンブラウザはもちろん、古いバージョンのIEでもきちんと表示してくれますし。

OGPはHTML5のバリデータチェックを通らない

[2012.4.26一部内容変更]
2012.3.29にW3C草案の”HTMLのドラフト文書”が約1年ぶりに更新されていましたので、一部内容を変更しました(※前回の更新はは2011.5.25)。それまでは、HTML5のバリデータチェックでproperty属性が通らなかったため、OGPを使用するとバリデータチェックを通りませんでした(※property属性はHTML5の属性ではないためです)。ですが、今回の”HTMLのドラフト文書”の更新以降、エラー対象から外されたようです。

HTML5でOGPを使用するとバリデータチェックが通らないため、OGPの使用を避けていた方がいらっしゃれば、この機会に対応されてみてはいかがでしょうか？
この際の注意点は、html要素に”xmlns:prefix”というネームスペースに対応した属性(※XMLの名前空間のことです)を記述しないようにしましょう(XHTMLの場合は必要です)。

▼バリデータチェックを通るようになった

Lightboxでa要素にrel属性を使用するとHTML5のバリデータチェックを通らない

もともとrel属性は、linkタグで使用するものだと思いますので、aタグで使用した場合、HTML5のバリデータチェックを通らないようです。これに関しては、classで使用すればバリデータチェックを通すことができます。
前回の記事でaタグにclassを使ったLightboxに関して触れていますので、よかったらそちらもご覧ください。
⇒ Flickr APIで画像情報を取得するPHPスクリプト:Lightbox