HTML

  • Home
  • Tips & Memo
  • HTML
  • HTML5のバリデータチェック時に覚えておきたいこと

HTML5のバリデータチェック時に覚えておきたいこと

Category

HTML

HTML5でマークアップする際、バリデータチェックをしながらコーディングをされている方がほとんどだと思います。今までのXHTMLの感覚でコーディングをしていると、結構バリデータチェックで通らないことが多いんですよね...。「この書き方では通らないので、こう書かないと」とか「場合によっては、バリデータチェックが通らなくても有益なサービスであったり、便利なスクリプトなので使いたい」等、予め知っておくことでやり直しも減りますし、対応策なんかもあったりします。
そのあたりを簡単にまとめつつ、参考リンク等も貼り、徐々に追記していこうと思います。

Keyword:HTML5,バリデータチェック

HTML5のバリデータ

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.</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

List

関連記事(※当記事と関連性が高いと思われる記事)

HTML5導入前に覚えておきたいこと

2011/12/22
HTML5
スコア:29 ※スコアの数値が大きいほど、関連性の高い記事です。 SafariやFirefoxといったモダンブラウザは以前からHTML5の新要素に対応していましたが、Internet Explorerが対応していなかったため、以前と同... 続きを読む...

Flash CS6のHTML5サポート

2012/06/23
Flash CS6のHTML5サポート
スコア:27 ※スコアの数値が大きいほど、関連性の高い記事です。 Flash CS6に実装されたHTML5のサポート機能 これはどいことかというと、Flash CS6ユーザーが無償で利用できる拡張機能"Toolkit for Crea... 続きを読む...

HTML5.jsとIE9.js

2012/03/09
HTML5.jsとIE9.js
スコア:23 ※スコアの数値が大きいほど、関連性の高い記事です。 以前、当サイトの"HTML5導入前に覚えておきたいこと"の記事に関して、「html5.jsとIE9.jsのどちらを使う方がよいのですか?」といったお問い合わせをいただき... 続きを読む...

おすすめ書籍・商品(※当記事と関連性が高いと思われる書籍・商品)

ページの先頭へ