adrian holovaty

December 1, 2002, 2:51 PM ET

Holovaty.com code improvements

In the past few days, I've made a few changes under the hood of this site.

I've given permalink links the rel="bookmark" attribute, as Tantek Çelik has recommended. The rel attribute, according to the W3C, "describes the relationship from the current document to the anchor specified by the href attribute." It's an easy way to make HTML documents more meaningful.

With that in mind, I added rels wherever appropriate (as outlined in the W3C's list of link types):

• Links to this site's home page have rel="start".
• Links to the archive have rel="contents".
• Links to the about page have rel="help".
• Links created via my "smart anchoring system" have rel="bookmark".
• "Previous entry" and "Next entry" links have rel="prev" and rel="next", respectively.

Also, I employed a CSS negative-margins trick to rearrange weblog headlines. If you're viewing this site in a CSS-compatible browser (such as IE 5+, Mozilla, Netscape 6+, or Opera 6+), you'll notice each blog entry is preceded by a timestamp and a headline. Previously, I had marked up the timestamp as h2 and the headline as h3 -- but I decided the headline should be h2, because that makes more sense semantically and for users of text-only or nonconventional browsers.

So I made the headline h2 and the timestamp h3, but that meant rearranging the HTML so that the timestamp came after the headline -- and I still wanted the timestamp to be displayed above the headline. Thus, I played around with margins for a bit and ended up giving the timestamp a negative top margin, while the headline got a positive top margin to accomodate the timestamp. The result: The timestamp appears above the headline in CSS-compatible browsers (just as it did before), but the headline appears above the timestamp in all other browsers (and in the source). Here's the relevant CSS code:

/* headline */
h2 {
margin: 1.5em 0 0;
}

/* timestamp */
h3 {
margin: -3.9em 0 0;
padding: 0 0 3em;
}

And here's some sample HTML. Note the headline comes before the timestamp:

<h2>Headline here</h2>
<h3>November 28, 2002, 1:12 AM ET</h3>

This is a good example, I think, of separating presentation from semantic meaning.