Commentary on web design and other topics by Guy Leech, web fanatic.
Microformats add a lot of code; but they don’t have to. Through some clever use of elements that are around anyway, you can clear up on those extra div’s, and by knowing your specs you can do away with some elements of a microformat altogether.
The large code use has been noticed by Ryan Cannon on the microformats wiki, who has made a proposal to cut down on it. However, until that gets off the ground, we still have to use the code-monsters that exist today. So, I’m going to share with you the techniques I’ve used to save code space, and save you time in your next microformatted endeavour.
If you don’t know the difference between some fudge and a microformat, have a read over the microformats website.
hAtom is a draft specification for making a feed out of blog posts. It’s a neat idea, but seems cumbersome to implement. The examples given are very code-heavy, though that’s not really the fault of the specification, just blogging platforms.
The simplest way to have less code is to have less stuff, so lets look through what you really need to make a nice feed. There’s a lot of additional code you can use with hAtom. First in the line of fire is the hfeed element. Used to indicate the start of a hAtom feed, this defaults to the page if not found. So there’s no need to have an extra div for that.
The author field is required, but will default to any other hCard on the page. This means that if you have a footer that happens to include a hCard, there’s no need to declare the same information twice. Alternatively, if your body happens to be the hentry (more on that later), you can use any hCard on your page as the author field by adding class="author". You that with a personal logo; it’s your name, and so makes a perfect author tag.
Other optional extras include a summary of the content—personal preference here. You can also include a link to the page via rel="bookmark", but I think that linking to the page you’re on is a pretty silly idea. Until browsers default to having bookmark links saved as bookmarks, I’m not going to use it. The publication date is optional too.
The other way to use less code is to re-use your existing code. For example, the hentry element. This is where the actual feed, or blog post, begins. Usually wrapped in its own div, this can be applied directly to the body. This works in practice as with most blogs, the majority of the page is the blog post. And, don’t worry about your navigation showing up in the feed; you have to declare each part of the feed content separately—simply don’t include the navigation.
You can use PHP to help you out a little here: only give the body the class when it’s actually a blog entry page; there’s no need to feed people your contact details, and that’s not what hAtom was intended for anyway.
entry-title is easily applied to the heading of the page. It does default to the page title, but it’s so easy to add you may as well. Likewise, you can make your paragraphs into the entry-content; there’s no need to wrap an additional div around the whole lot. Also required is the time when the page was last updated, which is already everywhere. No need to change anything, just add the ‘updated’ class and you’re set. You do also have to add an ISO time-stamp to it, but that’s easily done.
And that’s all there is to it. In summary, there’s no need to have additional divs, just re-use your existing code, and save some space by letting hAtom default to the page, and optionally grab the author from any other hCard on the page.