Difference between revisions of "class-design-pattern"

From Microformats Wiki
Jump to navigation Jump to search
(Broke into sections)
Line 1: Line 1:
 
= 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.
+
== Purpose ==
 +
Use the [[class-design-pattern]] to indicate semantic meaning about XHTML elements
  
For example, [[hcard]] adds information indicating that certain elements are a vCard URL, a Full Name and Organization by the class design pattern:
+
== How to use it ==
 +
* add the microformat information the <code>class</code> attribute of an enclosing element. <code>class</code> attributes allow for multiple values by space separating values.
 +
* if an appropriate enclosing element is not available, use <code>span</code> or <code>div</code> as appropriate to add one.
 +
 
 +
== 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>
 
<pre><nowiki>
Line 22: Line 29:
 
== See Also ==
 
== See Also ==
 
* John Udel [http://weblog.infoworld.com/udell/2004/02/09.html writes] about multi-valued CSS elements
 
* John Udel [http://weblog.infoworld.com/udell/2004/02/09.html writes] about multi-valued CSS elements
 +
* [http://www.w3.org/TR/REC-html40/struct/global.html#adef-class HTML 4.0] defintion of 'class', including notes about multivalues

Revision as of 11:31, 10 October 2005

Class design pattern

Purpose

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

How to use it

  • add the microformat information the class attribute of an enclosing element. class attributes allow for multiple values by space separating values.
  • if an appropriate enclosing element is not available, use span or div as appropriate to add one.

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 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="http://tantek.com/">Tantek Çelik</a>,
 <span class="org">Technorati</span>
</div>

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 multivalued CSS class elements (such as "url fn"). This 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
  • HTML 4.0 defintion of 'class', including notes about multivalues