microformats入門 – 意味的なHTMLとは。


microformatsについて知ったのはだいぶ前のWeb Designing誌の特集だったと思います。その頃はほとんど参考資料がありませんでしたが、現在は日本語にも対応しているmicroformats.orgのWikiが充実してきているようです。

まず、microformatsとはなにか。microformats.orgの説明を引用するとこんな感じ。

Microformatsとは、Webサイトで人やイベント、ブログ記事、レビュー、タグのような共通して公開されているものを記述する際に用いるマークアップパターンです。

http://microformats.org/wiki/Main_Page-ja

分かったような分からないようなという感じですが、そのmicroformatsの拠り所となる概念としてさらに「POSH」というものがあるそうです。

POSHとは、Webページを作成する際に意味的なHTMLを用いることのベストプラクティスを簡潔にあらわしたものです。

http://microformats.org/wiki/posh-ja

この説明だけではまた分かりにくいですが、「意味的なHTML」というところがポイントです。実際のタグで言うと、見出しならなるべく<hx>タグ、段落ならなるべく<p>タグ、一覧性のある項目ならなるべく<ul>/<li>タグなどを使う、ということです。

反対に「表現的なHTML」という言葉もあります。こちらの代表的なタグは太字の<b>や文字サイズを変える<small>などです。また、表組みとして情報を整理しているのではない、レイアウトのためだけの<table>タグも含まれます。

ただし、現在主流のXHTML1.0などに用意されている意味的な属性は、本当に最低限のものです。Webで公開する情報としてよくある「連絡先」や「タグ」、「イベント情報」などを表す属性はありません。で、乱暴に言ってしまえば、無いなら作っちまおうぜというのがmicroformatsなのです!(たぶん)

実際のWebの現場では、そんなこと言われなくても各々ローカルルールを決めてコーディングしていることと思います。大きめのサイトを複数人数でコーディングする場合、画像のファイル名の付け方まで最初に細かく決めてしまうのが普通です。そうしないと、「この人の担当ページが遅れているから、他の人がヘルプに入る」というようなリソース配分がスムーズに出来ないからです。

じゃあ、なぜわざわざ作らなきゃいけないかという理由ですが…
「機械でも読めるようにするため」というのが一番じゃないかと思います。

見出しタグ<hx>やページタイトル<title>では、せいぜいその部分がそのページの内容を表す重要な部分であろうという程度のことしか分かりません。しかし、「連絡先」や「タグ」、「イベント情報」などがマークアップによってページのどの部分に記述されているのかが分かると、サイト内のイベント情報だけをピンポイントで検索することが可能になると考えられます。

他にも、ブラウザがmicroformatsに対応することで、ただ閲覧するだけではない情報の活用の仕方が広がります。ページ内の連絡先をワンクリックでアドレスブックに保存したり、ページ内のイベント情報をワンクリックでカレンダーに保存したり。これは便利ですよね。
詳しくは古い記事ですが下記に分かりやすくまとまっています。

【Web 2.0 Expo】「データ形式Microformatsがブラウザを進化させる」,Mozillaがアピール:ITPro

しかししかし、世の中ユーザーに便利なだけでは動かない。僕がMicroformatsに期待しているのは、HTMLコーディングをより楽にしてくれるのではないかという点です。マークアップとCSSの書き方の組み合わせはいくらでもあります。しかし、標準的な書き方が確立されれば、その部分はどんどん自動化できるようになっていく。
ユーザーにとって便利で、しかも開発が楽になれば、世の中変わるんじゃないか。

と、華々しい想像も広がるところなのですが、まずは「意味的なHTMLを書くことは重要」ということが言いたいのです。より具体的には、単に見出しタグやリストに気をつけるだけじゃなく、「意味的なクラス名」を積極的に付けていこうということです。(続く…)

microformats入門 – 意味的なHTMLとは。」への1件のフィードバック

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です