microformatsを使おう

microformats-logo

Do’s & Don’ts of Modern Web Designというサイトに「microformatsを使おう」という掲載があったので、microformatsについてまとめてみます。
“Use Microformats to enhance markup semantics” The Do’s & Don’ts of Modern Web Design

microformatsとは

class属性、rel属性を使って、XHTMLをもう少し詳しくマークアップしよう、という規格です。

背景

文書構造を意識したHTMLのマークアップ方法はすっかり浸透して、TABLEタグでレイアウトをしているWebページはあまり見かけなくなりました。

でも、Webページの掲載情報がそのサイト内にとどまらず、他のサイトからも利用されたり、様々なソフトウェアで使われるようになった今、どうやらこれだけでは不十分。

たとえばイベント情報を掲載する場合には、文書構造(見出し、本文、etc)だけではなく、日時、場所、概要、詳細、URLといった意味付けも記述しておきたいところです。

きれいにマークアップされたWebページでは、そのような表現をclass属性で付けられています。

<div class=”event”>
<span class=”title”>microformatsセミナー</span>
<span class=”date”>2009年5月12日</span>
<span class=”location”>東京都港区</span>
</div>

でも、同じ種類の項目なのに、Webサイトごとにclass名が違っていては、
その都度、class名の付け方を読み解かなくてはなりません。
もちろんプログラムに理解させることもできません。

そこでmicroformats。

そこでmicroformatsです。class属性、rel属性の付け方を統一できるところは統一しましょう、という規格です。
いままでと同じ(X)HTMLの記述のまま、ちょっとルールを追加するだけなので簡単です。

上記の例をmicroformatsの仕様で書き換えると、、、

<div class=”vevent”>
<span class=”summary”>microformatsセミナー</span>
<span class=”dtstart”>2009年5月12日</span>
<span class=”location”>東京都港区</span>
</div>

となります。
覚えてしまえば、いちいちclass名を考える必要がなくなって楽ですね。

microformatsはすでにたくさんのサイトで使われています(Google、Flickrなど)。みんなで使えばどんどん便利になりそうです。

また、ブラウザを拡張させるUserScript「LDRize」も、microformatsに沿った記述をすることで、その機能の恩恵にあずかることができます。

ページ送りをコントロールするUserScript「AutoPagerize」は、独自のclass定義を使っていますが、「統一したclass指定で外部ツールの恩恵にあずかる」という考え方は同じだなと思います。
ただ、特定のツールのみを意識したマークアップをするというのはちょっと残念なので、microformatsがさらに充実して、その辺もカバーされといいなと期待しています。
(ページ構造に関する記述だからAutoPagerizeがHTML5に対応すればいいのかも。)

とはいうものの、、、

自分は今まであまり使っていませんでした、microformats、、、。
自分も含めて、もっとみんな使ったほうがいいですね。

microformats Wiki

ONE COMMENT

Comment RSS feed for this Article
  1. ツカ
    May 13, 2009

    アユムが前に言ってた
    サイトが、ユーザ独自のCSSデザインで見れるようになる、
    な世界に近づく話だね。

    ちなみに、うちは必要にせまられなければ採用しないと思う、、

POST A COMMENT