This is a post that will be continually updated with further examples and more detailed content as I have time.
If you have worked with HTML or XHTML for any length of time there is no doubt you are probably familiar with ordered and unordered lists. There is a third list type that is not as familiar to web developers and it’s called a Definition List. The W3C says that the Definition List:
“should consist of a term/definition pairs although definition lists may have other applications”.
The definition list has three parts the <dl>…</dl> which is the equivalent of the <ul>…</ul> in an unordered list. Next we have two tag that together form the equivalent of the <li>…</li>, these are the definition title tags <dt>…</dt> and definition tags <dd>…</dd>.
The definition title can contain inline elements and the definition can contain block level elements such as a paragraphs and blockquotes. This gives us the possibility to add a lot of meaning to our code.
A simply list might look like this:
<dl>
<dt id=”absolute-value”>Absolute value: </dt>
<dd><blockquote cite=”http://zachwingo.info”><p>A number’s distance
from zero on the number line. The absolute value is written between
a double line such as |5| or |-5|. Both -5 and +5 are five numbers
or units away from zero so we say their absolute value or distance
is 5. </p></blockquote> </dd>
</dl>
The above code meets all standards and provides some very semantically rich code that is full of meaning and provides a lot of possibilities for styling with CSS.
This type of code is especially well suited for Glossaries, quotes, and anything else where you have a related term/definition. See the links below for some samples
I’m really not a fan of
MySpace or
Facebook but everyone you know has an account, so its a necessary evil if you want to keep in contact with all your friends. The layout is done with tables and is complicated but not impossible to do some amazing design work. I’m not very artistically creative, but I managed to make a fairly simple and decent looking profile div overlay for
MySpace.com. I hope to provide it as a download soon so check this post in a few days. I am really going to try and make sure it’s commented so the HTML challenged won’t have too many problems. Check it out at
http://myspace.com/typicalsaint
Microformats is a system designed to label data using existing XHTML to make it more machine readable. Microformats were created to make certain information like contact information machine readable without creating a whole new language. The basic syntax is very simple because you simply label the data by adding a class attribute to an existing element. Take for example the following code:
[code lang="xhtml"]
[/code]
This code is very simple and a common way to markup some contact information Microformats provide a way to tell machines how to use the information. We do this by adding some common XHTML tags with pre-defined class attributes. Our code should now look like this:
[code lang="xhtml"]
[/code]
This information can now be read by a machine and automatically imported into an address book. There isn’t a lot of support for this feature currently, but as browsers begin to implement this feature you will see something displayed much like what we often see indicating an email or rss feed is available. Until that happen you can use Technorati’s service which reads the page, finds the vCard information and creates a download in the .vcf format automatically.
To use technorati’s service take the first URL and add the full URL of the page where your vCard information is located to the end of the first. It should look like the second.
[code lang="xhtml"]
Basic URL
[/code]
[code lang="xhtml"]
Download vCard
[/code]
There are additional benefits to using this information. You will notice that all contact information is labeled using class attributes which gives you many more possibilities to style your data using CSS. This information remains semantically correct, validates and gives lots of flexibility for design. For more information about Microformats check out Microformats.org
