class-design-pattern

2007-06-23T23:59:15Z

SqrY0r:

<h1> Class design pattern </h1>

== Purpose ==
Use the [[class-design-pattern]] to indicate semantic meaning about XHTML elements. See the discussion of [[semantic-class-names]] for background.

== How to use it ==
* always use the most appropriately [[semantic-xhtml|semantic (X)HTML]] element for the content. if an appropriate semantic element is not available, use <code>span</code> or <code>div</code>. always avoid [[presentational-xhtml|presentational (X)HTML]].
* add semantics to (X)HTML by using [[semantic-class-names]]. The <code>class</code> attribute is a space separated list of class names.
* always choose names following the [[naming-principles|microformats naming principles]].

== Description ==

This is one of the most frequently occurring design patterns in microformats. Semantic meaning can be indicated on XHTML content by using the <code>class</code> attribute of an enclosing element. For example, [[hcard|hCard]] adds information indicating that certain elements represent vCard person or organization, its URL, Formatted Name, and Organization by the class design pattern:

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

Note in particular:

* the section of the XHTML document that the microformat is being applied to is defined by <code>class="vcard"</code>. This is very common among non-trivial microformats.
* the use of both inline (

Microformats Wiki - User contributions [en]

class-design-pattern