Holovaty.com code improvements

Written by Adrian Holovaty on December 1, 2002

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.

Comments

Posted by Alek on December 1, 2002, at 10:12 p.m.:

Now, when I try to select the headline text, I select the date instead.

Posted by Stuart Langridge on December 1, 2002, at 11:14 p.m.:

Only minor problem with the date-above-the-headline formatting trick; if the page is narrow enough that the headlne wraps, they overlay...

Posted by Marc on December 2, 2002, at 2:40 a.m.:

Some nice thoughts ... and a good solution. But then ... it all depends on what "semantic meanings" one things about.

For me when writing a weblog - which is some kind of diary - entries are related to the day I wrote them ... therefore the date gets the <h2> and the headline gets an <h3>.

I guess there's no final rule :-)

shoutz

marc

Posted by Marcin S on December 3, 2002, at 11:36 p.m.:

Another problem is that in IE5.01 (corporate browser - not personal choice) there is no headline :)

Posted by dan on December 4, 2002, at 1:43 a.m.:

Also...along with the "rel" shouldn't you add the "title" attribute to your links as well?

Posted by Adrian on December 4, 2002, at 2:07 a.m.:

Marcin: Are you on PC, Mac or Unix?

Thanks to everybody for pointing out the various issues. I'm in the middle of a move to Kansas right now, but I'll try to get things fixed soon.

Posted by Adrian on December 4, 2002, at 2:21 a.m.:

Greetings from a hotel computer...I've changed the CSS back temporarily for a few days, while I get settled. I'll restore it after I've worked out the kinks (and thanks to those who've pointed out the kinks.)

Posted by dan on December 4, 2002, at 4:29 a.m.:

Have a safe trip Adrian.

Posted by Ben Poole on December 5, 2002, at 12:50 p.m.:

I guess the other thing to note for beginners with all this is that using "rel," "start," "home," "author", and all those tags is that if you want them to appear in the "site navigation bar" (Gecko and Opera only I think? Not sure) you have to have these expressed in your page's <head> section, e.g.:

<link rel="bookmark" type="text/html" title="Blog entry" href="blog entry uri..." />

Posted by Ben Poole on December 5, 2002, at 7:44 p.m.:

Hmmm.. re-reading my comment, it sounds dumb... but maybe you get what I mean. Anyway, another rel I see get used a lot is "author."

Posted by Adrian on December 5, 2002, at 8:04 p.m.:

Good call, Ben. FYI, this site already uses the "rel"s in titles...see this old blog entry for more.

Posted by Ben Poole on December 6, 2002, at 1:49 p.m.:

So you did! I need to read more! Thanks for that - I'll be linking to that blog from mine as I discuss accessibility etc. over the coming days / weeks. I'm keen to get Domino sites in on the deal ;-)

Posted by Nilesh on December 13, 2002, at 5:48 a.m.:

Am I seeing something different than others? In the source I see the timestamp as H2 and the Post title as H3. Different from what you have explained....

Posted by Adrian on December 13, 2002, at 6:18 a.m.:

Nilesh: I pointed out earlier in the comments that I'd changed it back because some readers pointed out a few flaws. I'll restore it when I work out the kinks. :)

Posted by Nilesh on December 13, 2002, at 10:04 p.m.:

I missed on that, Adrian :)

Posted by agung frans on October 13, 2004, at 5:35 a.m.:

I'm new in CSS style. Anyone know good sample website?

Comments have been turned off for this page.