Dan Cederholm, web design guru, recently posted another quiz on his site. He was asking how to represent an address in HTML. The most popular was this:
<address>
ABC Widgets, Inc.<br />
100 - 1234 West Main Street<br />
Anytown, State<br />
Zip<br />
Ph: 555-555-1234<br />
Fax: 555-555-1234<br />
</address>
This is great if your looking for a compact solution to display a simple address. But its a classic case of WYSIAYG (What you see is all you get). If instead, the address was marked up in a standard manner, then search engines and other crawlers could mine this data. Just look at what google has done with the <ul> and <dl> elements. This kind of data mining wouldn't be possible without the proper structure.
Enter XHTML and custom schemas. If google and the other search engines were to define standard schemas (or just put their stamp of approval on the existing schemas) I believe sites would start to use them because of the improved search results they would receive.
Here is my solution with a custom schema:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns:html="http://www.w3.org/1999/xhtml" xmlns:postal="http://www.foo.bar/postal">
<html:head>
<style type="text/css">
postal\:address postal\:city {
display: inline;
}
postal\:address * {
display: block;
}
postal\:city:after { content: ", " }
postal\:phone:before { content: "Ph: " }
</style>
<html:title>Postal Address</html:title>
</html:head>
<html:body>
<postal:address>
<postal:name>ABC Widgets, Inc.</postal:name>
<postal:streetaddress>100 - 1234 West Main Street</postal:streetaddress>
<postal:city>Anytown</postal:city>
<postal:state>State</postal:state>
<postal:zip>Zip</postal:zip>
<postal:phone>555-555-1234</postal:phone>
</postal:address>
</html:body>
</html>
This example works fine in standards complaint browsers like mozilla, firefox and opera. If the search engines started to push the use of custom schemas, it might help nudge Microsoft into supporting the existing standards. Also note that the extra cruft like punctuation and labels for the address are added through CSS.
<< Home