前回の記事に引き続き、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と言えるかもしれません。
次回はいよいよ実践、新着記事のコーディングについて改めて考えてみようと思います!