HTML5でマークアップをする際に使いたい2つのWebツール


デザイナーの植村です。


もう年の瀬ですね。

今年はスマートフォン元年と言われていますが、

同時にHTML5元年でもあったように思います。


Web関連のセミナーやカンファレンスでも積極的に取り上げられていて、

Webの歴史が大きく動いているのを肌で感じています。


HTML5の正式勧告は2014年と言われていて、

まだ現時点では草案(2011年5月に最終草案)の段階なのですが、

スマートフォン用のWebサイトではHTML5が当たり前のように使われていますし、

一部のPCサイトでも積極的に使用されています。


私自身、今年はHTML5を使用したマークアップを行う場面が増えました。

そこで、HTML5でマークアップをする際に使いたい

2つのWebツールを紹介したいとおもいます。


1.HTML5 Outliner

http://gsnedders.html5.org/outliner/


従来のHTMLは、<h1>タグなどを使っていわゆる「章」を

暗黙的に構造化していたのですが、

HTML5からは更に明確な文章構造を求める必要があり、

そのために<section>や<header>、

<footer>などの新しいタグが追加になっています。


それらのタグを使って「章」ごとに区切ることで

よりセマンティック(意味論的)なソースになるのですが、

そのソースの文章構造をツリーで表示してくれるのがHTML5 Outlinerになります。


きちんと構造化されていれば、人間はもちろん、

機械でも簡単に中身を理解する事ができます。

つまり、検索エンジンにとっても本文が抽出しやすく、

より正確な検索結果に繋げることが出来るのです。




2.Another HTML Lint HTML5

http://www.htmllint.net


1997年度に石野恵一郎氏によってPerl5で作成された

「Another HTML Lint」のHTML5版です。


シンプルな構文チェッカーなのですが、なかなか採点が厳しく、

きっちり作られているように見えるWebサイトでも、

ビックリするような低い数字が出る場合があります(笑)


エラー一つ一つに対して解説がつくという親切設計。

上記のHTML5 Outlinerと合わせて使う事で、

より完成度の高いマークアップを実現できるでしょう。




上記2つのツールは、

HTML5を始めたばかりの人には特に使って頂きたいです!

コメントを残す

Copyright©2004- 2013 海外のホームページ作成|㈱メディアウェイブ All Rights Reserved.