HTML5でマークアップをする際に使いたい2つのWebツール
デザイナーの植村です。
もう年の瀬ですね。
今年はスマートフォン元年と言われていますが、
同時にHTML5元年でもあったように思います。
Web関連のセミナーやカンファレンスでも積極的に取り上げられていて、
Webの歴史が大きく動いているのを肌で感じています。
HTML5の正式勧告は2014年と言われていて、
まだ現時点では草案(2011年5月に最終草案)の段階なのですが、
スマートフォン用のWebサイトではHTML5が当たり前のように使われていますし、
一部のPCサイトでも積極的に使用されています。
私自身、今年はHTML5を使用したマークアップを行う場面が増えました。
そこで、HTML5でマークアップをする際に使いたい
２つのWebツールを紹介したいとおもいます。
1．HTML5 Outliner
http://gsnedders.html5.org/outliner/
従来のHTMLは、<h1>タグなどを使っていわゆる「章」を
暗黙的に構造化していたのですが、
HTML5からは更に明確な文章構造を求める必要があり、
そのために<section>や<header>、
<footer>などの新しいタグが追加になっています。
それらのタグを使って「章」ごとに区切ることで
よりセマンティック(意味論的)なソースになるのですが、
そのソースの文章構造をツリーで表示してくれるのがHTML5 Outlinerになります。
きちんと構造化されていれば、人間はもちろん、
機械でも簡単に中身を理解する事ができます。
つまり、検索エンジンにとっても本文が抽出しやすく、
より正確な検索結果に繋げることが出来るのです。
2．Another HTML Lint HTML5
1997年度に石野恵一郎氏によってPerl5で作成された
「Another HTML Lint」のHTML5版です。
シンプルな構文チェッカーなのですが、なかなか採点が厳しく、
きっちり作られているように見えるWebサイトでも、
ビックリするような低い数字が出る場合があります(笑)
エラー一つ一つに対して解説がつくという親切設計。
上記のHTML5 Outlinerと合わせて使う事で、
より完成度の高いマークアップを実現できるでしょう。
上記2つのツールは、
HTML5を始めたばかりの人には特に使って頂きたいです！
