https://microformats.org/wiki/api.php?action=feedcontributions&user=Wf3Fpv&feedformat=atomMicroformats Wiki - User contributions [en]2024-03-28T15:14:44ZUser contributionsMediaWiki 1.38.4https://microformats.org/wiki/index.php?title=class-design-pattern&diff=18245class-design-pattern2007-07-09T15:03:28Z<p>Wf3Fpv: </p>
<hr />
<div><h1> Class design pattern </h1><br />
<br />
== Purpose ==<br />
Use the [[class-design-pattern]] to indicate semantic meaning about XHTML elements. See the discussion of [[semantic-class-names]] for background.<br />
<br />
== How to use it ==<br />
* always use the most appropriately [[semantic-xhtml|semantic (X)HTML]] element for the content. if an appropriate semantic element is not available, use <code>span</code> or <code>div</code>. always avoid [[presentational-xhtml|presentational (X)HTML]].<br />
* add semantics to (X)HTML by using [[semantic-class-names]]. The <code>class</code> attribute is a space separated list of class names.<br />
* always choose names following the [[naming-principles|microformats naming principles]].<br />
<br />
== Description ==<br />
<br />
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|hCard]] adds information indicating that certain elements represent vCard person or organization, its URL, Formatted Name, and Organization by the class design pattern:<br />
<br />
<pre><nowiki><br />
<div class="vcard"><br />
<a class="url fn" href="http://tantek.com/">Tantek Çelik</a>,<br />
<span class="org">Technorati</span><br />
</div><br />
</nowiki></pre><br />
<br />
Note in particular:<br />
<br />
* 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.<br />
* the use of both inline (</div>Wf3Fpv