class-design-pattern

(Difference between revisions)

Jump to: navigation, search
(See Also)
Current revision (08:39, 7 April 2013) (view source)
m (Changed protection level for "class-design-pattern" [edit=sysop:move=sysop])
 
(19 intermediate revisions not shown.)
Line 1: Line 1:
-
= Class design pattern =
+
<h1> Class design pattern </h1>
== Purpose ==
== Purpose ==
-
Use the [[class-design-pattern]] to indicate semantic meaning about XHTML elements
+
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 ==
== 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.  
+
* 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]].
-
* if an appropriate enclosing element is not available, use <code>span</code> or <code>div</code> as appropriate to add one.
+
* add semantics to (X)HTML by using [[semantic-class-names]].  The <code>class</code> attribute is a space separated list of class names.
 +
* always choose names following the [[naming-principles|microformats naming principles]].
== Description ==
== 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:
+
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:
<pre><nowiki>
<pre><nowiki>
Line 19: Line 20:
</nowiki></pre>
</nowiki></pre>
-
Note especially the preceding example:
+
Note in particular:
* 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 (&lt;a> and &lt;span>) and block (&lt;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 both inline (&lt;a> and &lt;span>) and block (&lt;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 <code>"url fn"</code>). This allows:
+
* the use of multiple class names on a single element (such as <code>"url fn"</code>). This allows:
** single elements to have multiple meanings
** single elements to have multiple meanings
-
** allows semantic meaning to be added to existing presentation
+
** allows adding semantics to existing presentation
 +
 
 +
== Related ==
 +
* [[semantic-xhtml]]
 +
* [[semantic-class-names]]
== See Also ==
== See Also ==
* [[Main_Page#Design_Patterns|All microformat design patterns]]
* [[Main_Page#Design_Patterns|All microformat design patterns]]
-
* John Udel [http://weblog.infoworld.com/udell/2004/02/09.html writes] about multi-valued CSS elements
+
* John Udell [http://weblog.infoworld.com/udell/2004/02/09.html writes] about multiple class names
-
* [http://www.w3.org/TR/REC-html40/struct/global.html#adef-class HTML 4.0] defintion of 'class', including notes about multivalues
+
* [http://www.w3.org/TR/html401/struct/global.html#adef-class HTML 4.01 definition of the 'class' attribute], including notes about multiple class names

Current revision

Contents

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

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:

Related

See Also

class-design-pattern was last modified: Sunday, April 7th, 2013

Views