Wulf's Webden

The Webden on WordPress

Green Tags


Every now and then I’ll be surfing round the web and see something that catches my eye and makes me start to ponder how I might incorporate a similar idea into my own web space. It is not stealing; it is not plagiarism; it is about inspiration and gradually growing, developing and improving what I publish.

My latest point of inspiration was the way Mark Hadley presents the Technorati links on his site. I have had similar links on my site for some time but the visual nature of his approach appealed – painting them in technorati green and using a mini icon instead of text to introduce the list. It might be a touch more confusing for those who don’t recognise the symbol but probably no less meaningful than writing “Tags:” and, if anyone is interested, enlightenment is only a click away.

I didn’t just lift the idea wholesale from his site. Mark presented his list as a style <div> section. I wanted to maintain a more semantic style of markup, making use of existing HTML structures rather than an arbitrary division. My choice has been to use the definition list (<dl>) format. The title, which I hide from view with the stylesheet, is the definition term (<dt>) and each individual tag is a data definition (<dd>).

That seems to work well, especially when reading my blog postings outside the context of my own website (for example, with a newsreader such as bloglines), where the list doesn’t have such a slick appearance (no access to my stylesheet) but is very readable. It also means that I can claim some of the work for my own rather than just being an ideas-magpie!

Leave a Reply

Required fields are marked *.

This site uses Akismet to reduce spam. Learn how your comment data is processed.