class-design-pattern

2006-04-02T12:42:35Z

MatthiasLuedtke: /* See Also */

= Class design pattern =

== Purpose ==
Use the [[class-design-pattern]] to indicate semantic meaning about XHTML elements

== How to use it ==
* add semantics to (X)HTML by using [http://www.w3.org/TR/REC-html40/struct/global.html#adef-class class names]. The <code>class</code> attribute is a space sepearted list of class names.
* if an appropriate semantic element is not available, use <code>span</code> or <code>div</code>.

== 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]] adds information indicating that certain elements are a vCard URL, a Full 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 especially the preceding example:

* 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 (<a> and <span>) and block (<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

== 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/REC-html40/struct/global.html#adef-class HTML 4.0 defintion of 'class'], including notes about multiple class names

Microformats Wiki - User contributions [en]

class-design-pattern