Semantically Correct Blogroll

In tweaking the structure of things here in my quest for perhaps the perfect(ly structured) weblog I came to the problem of the blogroll, which is obviously a list but there is no obvious way to format it in list format (I know that’s the XHTML2 module documentation but it’s well-written and applicable). What follows is an explanation of how to create a semantically correct blogroll. I am a paid subscriber to the service, so there may be options available to me that aren’t available to everyone, or you may just need to do things a little differently to get the same result.

  1. First you can’t have anything in the first prepended or appended to updated links, because as we will see in a moment these are actually put outside the link "goodies" we’re going to play with later. So leave that blank. You can order your links however you’d like, I used to have them alphabetical but now that I’ve lost the visual indication of recently updated ones I’ve ordered them using the "Recent" option. (Should I be using an ordered list because of this? I haven’t decided yet)
  2. Set there to be no container, we’re going to have to make our own container in a minute.
  3. Originally I had thought that the opening and closing list item tags (<li>) could be put in the link "goodies" section, but it doesn’t work like expected, so for right now use the contributer only "Optional Linebreaks" option and put </li> in the field.
  4. For global targets I set it to "NOTARGET" but you may or may not need/want to depending on your personal philosophy on this issue.
  5. In the "Link Goodies" section prepend <li> to the link.
  6. You’re done! Almost. Check out what we have so far.

We’re not quite done yet, because we don’t actually have a list yet, all we have is a set of list items with no enclosure. This will work with lazy UAs, but it’s not correct. To enclose it I’m going use a modified version of the PHP method given on the site for including the blogroll, but if you don’t feel like you need the extra feature I’m going to lay out, you can just wrap the output from the stock script above in a ordered or unordered list tag.

Mike Little just dropped his blogroll in favor of his own link manager. He may be biased, but the issue he brought up of the blogrolling server provoked some thought. In terms of features, there’s no reason why I shouldn’t be using Mike’s script, but what really keeps me coming back to blogrolling is the community features, which aren’t easily duplicated without (you guessed it) a large community. So with that in mind, I began to think of ways I could cache things on my end, thereby making things easier on the blogrolling server and faster on my end. Two benefits that come to mind immediately is that it will eliminate an unnecessary request on the client-side (I’m using the javascript version currently.) and that the blogroll can be gzipped with the rest of my page for clients that support it. Here is the code I’m currently using. The code can either be embedded directly or included from another file. It caches using the unique blogroll id, so multiple blogrolls should not be a problem.

Also please don’t think that formatting your blogroll as a proper list entails having it look boring, the power of CSS allows you to customize the look of your list like never before, and though my blogroll isn’t styled (yet) the button-looking menus on your right are actually unordered lists. In fact, you will have more control over the appearance now that your blogroll is formatted as a list than if it was just a paragraph seperated by line breaks. If you have any questions about this leave a comment and I’ll be happy to help out. Of course Jason could add a list option tomorrow and make everything but the cache redundant. C’est la vie!

4 thoughts on “Semantically Correct Blogroll

  1. Oh, I forgot to mention; your pointer to Mark’s piece about opening links in new windows, reminded me I really should change my philosophy on that.

  2. Hey, good article. The new version of the site (which will hopefully be done soon) will have a lot more tools for developers to dig into things like this. I’ve added a caching engine into the PHP code as well in case I have an outage. Now if I could get JavaScript to do the same 🙂 Anyway if you want to get into it without the formatting you could grab the OPML source or the RSS source and parse it and format at will. There will be an XML-RPC interface into it soon as well which will offer more advanced options also. For the time being though good schtuff.

SHARE YOUR THOUGHTS