class-design-pattern

Class design pattern

This is one of the most frequently occurring design patterns in microformats. Semantic meaning can be indicated on XHTML content by using the 'class' 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:

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

Note especially the preceding example:

• 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 multivalued CSS class elements (such as "url fn"). This not only allows:
  • single elements to have multiple meanings
  • allows semantic meaning to be added to existing presentation

See Also

• John Udel writes about multi-valued CSS elements