class-design-pattern: Difference between revisions

From Microformats Wiki
Jump to navigation Jump to search
(update with references to semantic-xhtml and class-names pages, add more detail to steps, and reorder/collapse)
m (Changed protection level for "class-design-pattern" [edit=sysop:move=sysop])
(11 intermediate revisions by 8 users not shown)
(No difference)

Latest revision as of 08:39, 7 April 2013

Class design pattern


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


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

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 (<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