class-design-pattern: Difference between revisions

From Microformats Wiki
Jump to navigation Jump to search
(β†’β€: cleaned up verbiage)
Line 29: Line 29:
== See Also ==
== See Also ==
* [[Main_Page#Design_Patterns|All microformat design patterns]]
* [[Main_Page#Design_Patterns|All microformat design patterns]]
* John Udel [ writes] about multiple class names
* John Udell [ writes] about multiple class names
* [ HTML 4.0 defintion of 'class'], including notes about multiple class names
* [ HTML 4.0 defintion of 'class'], including notes about multiple class names

Revision as of 12:42, 2 April 2006

Class design pattern


Use the class-design-pattern to indicate semantic meaning about XHTML elements

How to use it

  • add semantics to (X)HTML by using class names. The class attribute is a space sepearted list of class names.
  • if an appropriate semantic element is not available, use span or div.


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 1.0 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="">Tantek Γ‡elik</a>,
 <span class="org">Technorati</span>

Note especially the preceding example:

  • the section of the XHTML document that the microformat is being applied to is defined by class="vcard". 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 "url fn"). This allows:
    • single elements to have multiple meanings
    • allows adding semantics to existing presentation

See Also