Take the First CSS Step

Concentrating on the credit portion, this bit of POSH code can be enhanced with even greater meaning by overlaying a microformat. For instance, one way to assign classes and pieces of information to the credit information might be:

<div id=”hcard-Robert-M-Cherny” class=”vcard”>
<h3>About the author:</h3>
<h4><a class=”url fn n” href=”http://navigationarts.com”>
<span class=”given-name”>Rob</span>
<span class=”family-name”>Cherny</span></a><br>
<span class=”title”>Lead Developer</span></h4>
<p>
<span class=”org”>NavigationArts, LLC</span><br>
<span class=”adr”>
<span class=”street-address”>
7901 Jones Branch Road</span><br>
<span class=”locality”>McLean</span>,
<span class=”region”>VA</span>,
<span class=”postal-code”>22102</span>
<span class=”country-name”>
United States of America</span><br>
<span class=”tel”>703.584.8920</span>
</span>
</p>
</div>

This example adopts the hCard microformat defined at microformats.org. The classes defined for vcard, given-name, additional-name, family-name, org, adr, and so forth identify key pieces of information. While on the markup-heavy side, it does, in a very granular way, specify the meaning of each element, which is of potentially great use.

In XML, tags give meaning to each field of information. With microformats, valid class and other attribute information can be added to the POSH code to enable understanding of the granular pieces of information.

This example is a lot to digest. Take a look at each part of it in detail to see how it comes together. First, explore the markup of the document. I have included a <caption> element inside the table to house the name of the recipe:

<table class=’recipe’>
<caption>
Spicy Thai Peanut Sauce
</caption>
<colgroup>
<col/>
<col/>

I could just as easily have put the name of the recipe in a heading element like <h1> and placed it outside the table. I chose the caption so the name of the recipe is bound to the table of ingredients. Later, if I choose to, I can include the name of the website or a logo above the table of ingredients. Next, I’ve added <colgroup> and <col/> elements. These can be used to control the layout of each column, although I haven’t chosen to take advantage of this capability yet. Although you can use these elements, they are not absolutely necessary. I can leave them out, causing no impact on the table’s final rendered layout. Next, I added the table headings, placed inside <thead> elements, and I used <th> instead of <td> to house the contents of each cell:

<col/>
<col/>
</colgroup>
<thead>
<tr>
<th> quantity </th>
<th> measurement </th>
<th> product </th>
<th> instructions </th>
</tr>
</thead>
<tbody>