HTML5入門

１件の記事を表示するページ　ver2.00

前回の反省をふまえ、articleをつかいました。

記事をarticleにいれました

記事の見出し、本文、SNSボタン、著者情報をarticleにいれました。

HTML5 Valid にしました

W3CのMarkup Validation Serviceを利用して、 このページの妥当性をチェックしました。以下の対応により、めでたく妥当なHTML5文書であると認められました。 ワーニングが１件あるようですが、気にしません。

CSS3 Valid にできませんでした……

W3CのCSS Validation Serviceを利用して、 このページに使用しているCSSの妥当性をチェックしました。

CSSレベル3で確認したところ、 「moz-box」「webkit」などのブラウザ固有に指定しているところがエラーになります。 これは現状、深くは追求せずに妥協しました。なぜならHTML5マークアップの練習が目的なので……。

いずれ正式なCSS3の仕様が確定すれば不要になるでしょう。それまでは、その部分を削除してもよかったかもしれません。グラデーションやメニューのボックス表示のところだけでしたので。

他にはスペルミスがみつかりました orz しっかり確認しないとダメですね。

Chromeで表示確認しました

しかし、IE8, Firefox3.6, Opera11.01 ではひどいことになりました。

CSS3の実装に問題があるのか、ブラウザの実装状況がおいついていないのか、わかっていません。

自習している分にはかまいませんが、しっかりしたサイトを作るには こういうことが大切になってくるかもしれません。

次回にむけて

一応、ひと段落しました。ただ、一般的なブログを参考にすると、まだまだ改良の余地がありそうです。 さらに、HTML5のセマンティクスならではの利用方法もあるはずです。

メタデータをつける

ここでいうメタデータとは、記事に対する付加情報のことです。たとえば投稿日時があります。 これはすでにマークアップしています。まだマークアップしていないメタデータには、タグやカテゴリがあります。

かんがえてみると、記事の著者もメタデータです。これらを加味してマークアップしなおしてみるのもよさそうです。

メタデータを利用する

たとえば、投稿日時を利用して、すべての記事のなかから最新記事を５件だけ抽出する。

たとえば、タグを利用して、すべての記事のなかから現在の記事と関連の強い記事だけを抽出する。

Microdataを利用する

Microdataはメタデータを埋め込むための規格です。 こちらにあるように、 GoogleなどのサーチエンジンがMicrodataを利用して検索結果の表示に生かしているそうです。

HTML5マークアップを利用する

HTML5は、意味づけがより一層つよくなったため、文書の中から意図したデータだけをえらんで取得しやすくなりました。

これにより、広告やナビゲーション、コメントなど、いらない要素をすべて省いて、記事だけをあつめることができるのではないでしょうか。 Web上にあるすべてのHTML5文書からarticleをさがせばできるかもしれません。 さらにメタデータから興味のあるものや、最近の記事だけに絞ったり、 articleの中のアウトラインだけをもってきて記事の構成だけ把握することが可能かもしれません。