hcard-complete-example: Difference between revisions

From Microformats Wiki
Jump to navigation Jump to search
 
(4 intermediate revisions by the same user not shown)
Line 2: Line 2:
== An example of a hCard using all available vCard properties ==
== An example of a hCard using all available vCard properties ==


this is the start of a page being worked on by JamieKnight and vbgunz (VictorGonzalez) with the aim to markup and explain and example, which will use all the available properties of hCard from the cheat sheet, and the vCard specification. this page is ongoing.
this is the start of a page being worked on by JamieKnight and vbgunz (VictorGonzalez) with the aim to markup and explain an example, which will use all the available properties of hCard from the cheat sheet, and the vCard specification. this page is ongoing work and contributions are welcome.
 


== Address (ADR) ==
== Address (ADR) ==
this is a complete example of a adr subsection inside a div element.
this is a complete example of a adr subsection inside a div element.


<pre>
  &lt;div class=&quot;adr&quot; &gt;
  &lt;span class=&quot;type&quot; &gt;home&lt;/span&gt; 
  &lt;span class=&quot;post-office-box&quot; &gt;9890&lt;/span&gt;
  &lt;span class=&quot;street-address&quot; title=&quot;*&quot;&gt;2 example road &lt;/span&gt;
  &lt;span class=&quot;extended-address&quot; &gt;flat 7a &lt;/span&gt;
  &lt;span class=&quot;region&quot; &gt;region name&lt;/span&gt;
  &lt;span class=&quot;locality&quot; &gt;locality name &lt;/span&gt;
  &lt;span class=&quot;postal-code&quot; &gt;TA2 6HU &lt;/span&gt;
  &lt;span class=&quot;country-name&quot; &gt;United Kingdom &lt;/span&gt;
  &lt;/div&gt;


&lt;div class=&quot;adr&quot; &gt;
hCard mimics vCard in the ability to have multiple addresses (adr) defined. for example "work, home, ect" this is represented in the types attribute as follows:
&lt;span class=&quot;type&quot; &gt;home&lt;/span&gt; 
to represent home:
&lt;span class=&quot;post-office-box&quot; &gt;9890&lt;/span&gt;
&lt;span class=&quot;street-address&quot; title=&quot;*&quot;&gt;2 example road &lt;/span&gt;
  &lt;span class=&quot;type&quot; &gt;home&lt;/span&gt;
&lt;span class=&quot;extended-address&quot; &gt;flat 7a &lt;/span&gt;
&lt;span class=&quot;region&quot; &gt;region name&lt;/span&gt;
&lt;span class=&quot;locality&quot; &gt;locality name &lt;/span&gt;
&lt;span class=&quot;postal-code&quot; &gt;TA2 6HU &lt;/span&gt;
&lt;span class=&quot;country-name&quot; &gt;United Kingdom &lt;/span&gt;
&lt;/div&gt;
 
</pre>
 
hCard mimics vCard in the ability to have multiple addresses (adr) defined. for example "work, home, ect" this is represented in the types attribute as follows:
 
<pre>
&lt;span class=&quot;type&quot; &gt;home&lt;/span&gt;
</pre>


or, to represent work  
or, to represent work  
 
<nowiki>
  &lt;span class=&quot;type&quot; &gt;work&lt;/span&gt;
&lt;span class=&quot;type&quot; &gt;work&lt;/span&gt;
</nowiki>

Latest revision as of 23:43, 17 February 2007

An example of a hCard using all available vCard properties

this is the start of a page being worked on by JamieKnight and vbgunz (VictorGonzalez) with the aim to markup and explain an example, which will use all the available properties of hCard from the cheat sheet, and the vCard specification. this page is ongoing work and contributions are welcome.

Address (ADR)

this is a complete example of a adr subsection inside a div element.

 <div class="adr" >
 <span class="type" >home</span>  
 <span class="post-office-box" >9890</span>
 <span class="street-address" title="*">2 example road </span>
 <span class="extended-address" >flat 7a </span>
 <span class="region" >region name</span>
 <span class="locality" >locality name </span>
 <span class="postal-code" >TA2 6HU </span>
 <span class="country-name" >United Kingdom </span>
 </div>

hCard mimics vCard in the ability to have multiple addresses (adr) defined. for example "work, home, ect" this is represented in the types attribute as follows: to represent home:

 <span class="type" >home</span>

or, to represent work

 <span class="type" >work</span>