View source for class-design-pattern

<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 (&lt;a> and &lt;span>) and block (&lt;div>) level elements. This provides the microformat designer with a range of options for inserting semantic information without interfering with existing presentation
* the use of multiple class names on a single element (such as <code>"url fn"</code>). This allows:
** single elements to have multiple meanings
** allows adding semantics to existing presentation

== Related ==
* [[semantic-xhtml]]
* [[semantic-class-names]]

== See Also ==
* [[Main_Page#Design_Patterns|All microformat design patterns]]
* John Udell [http://weblog.infoworld.com/udell/2004/02/09.html writes] about multiple class names
* [http://www.w3.org/TR/html401/struct/global.html#adef-class HTML 4.01 definition of the 'class' attribute], including notes about multiple class names