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
- Links to the archive have
- Links to the about page have
- Links created via my "smart anchoring system" have
- "Previous entry" and "Next entry" links have
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 */
margin: 1.5em 0 0;
/* timestamp */
margin: -3.9em 0 0;
padding: 0 0 3em;
And here's some sample HTML. Note the headline comes before the timestamp:
<h3>November 28, 2002, 1:12 AM ET</h3>
This is a good example, I think, of separating presentation from semantic meaning.