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.
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 :-)
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.