[Microformats] クラスデザインパターン


前回の記事に引き続き、Microformatsについて勉強中ですが、
クラスデザインパターンというのがあるようです。

参考:
class-design-pattern · Microformats Wiki

一言で言ってしまえば、HTML中において、その部分が何であるかという意味を示すのにclass属性を使おうという考え方です。

基本的な使い方

まず、HTML要素として提供されている意味的な要素があればそれを使う。
一般的なところでは<hx>タグや<ul>/<li>その他諸々。ここは最低限押さえましょう。

で、適切な意味的な要素がない場合。この場合は<span><div>を使います。
「適切」のラインは別の議論が必要になると思いますが。。。

次に、「意味的なclass名」をつけます。代表例として「hCard」の記述例が挙げられています。

<div class="vcard">
<a class="url fn" href="http://tantek.com/">Tantek Çelik</a>,
<span class="org">Technorati</span>
</div>

クラス名「vcard」がMicroformatsの規格を使用していることを表しています。
fnは名前、urlはURL、orgは所属。分かりやすいですし、電子名刺の標準的なフォーマットであるvcardの規格に基づいているので、機械でも理解できるデータと言えます。

このように、インライン要素では<a><span>、ブロック要素では<div>を使うようにします。
ほとんどの場合、CSSをいじらずとも既存のページにも簡単に導入することができるというわけです。

ところで連絡先という意味では<address>属性もありますが、文書の作成者の意味合いが強いので使い方を選びますし、中身の書き方は特に決まっていません。HTML要素とMicroformatsのどちらを使うかという問題ではなく、適切にマークアップされたHTMLを拡張するのがMicroformatsと言えるかもしれません。

次回はいよいよ実践、新着記事のコーディングについて改めて考えてみようと思います!

コメントを残す

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