class-design-pattern: Difference between revisions
Jump to navigation
Jump to search
(update with references to semantic-xhtml and class-names pages, add more detail to steps, and reorder/collapse) |
No edit summary |
||
| Line 23: | Line 23: | ||
* 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 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 ( | * the use of both inline ( | ||
Revision as of 23:59, 23 June 2007
Class design pattern
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 (X)HTML element for the content. if an appropriate semantic element is not available, use
spanordiv. always avoid presentational (X)HTML. - add semantics to (X)HTML by using semantic-class-names. The
classattribute is a space separated list of class names. - always choose names following the 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 class attribute of an enclosing element. For example, hCard adds information indicating that certain elements represent vCard person or organization, its URL, Formatted 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 in particular:
- 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 (