So I’ve been thinking about standardizing how we “syndicate” posts (or blurbs) in HTML. Currently the decisions about how to organize divs and what to call classes are fairly arbitrary. But if there was a standard and predictable way of organizing what is essentially structured data, then we’d have a much easier time building stylesheets and dealing with edge cases and contingencies.

There are two problems that this proposed microformat and its associated CSS recommendations are meant to solve. The first is preventing excessively long text (usually long hyperlinked URLs) from breaking out of the post-content container. The second is preventing floated blocks (usually images) from breaking out of the bottom of the post-content container.

As I understand it, with microformats the choice of which tags to use (h1 vs. h2 vs. div) and the hierarchical location of the tags is not nearly as important as a standard lexicon of class names. In the syndication world, the RSS’s use item to refer to a chunk of content and Atom uses entry, neither of which I like. I’ve used blurb as a class name previously, usually because I was structuring blurbs and not full content. However this format should work for both blurbs and full content items, in which case I think post is the most appropriate. But I could be persuaded otherwise. My concern is that it’s not sufficiently generic. Would it make sense to call a full text article a post?

Proposed Blog Post Microformat

<div class="post">
    <div class="post-header">
    <h1 class="post-title"></h1>
    </div>

    <div class="post-content">
        <div class="post-content-footer"></div>
    </div>
    <div class="post-footer"></div>
</div>

Some optional classes might include: post-date, post-byline

Blog Post Microformat Illustration

Recommended Minimal CSS elements

/* prevents overlong text without spaces
   from poking out the side of div.post-content */
div.post-content {
    overflow:hidden;
}

/* prevents floated blocks from poking
   out the bottom of the post-content div */
div.post-content-footer {
    clear:both;
}

Prior Art

• http://microformats.org/wiki/blog-post-formats
• http://microformats.org/wiki/blog-post-brainstorming

This post first appeared on From the Belly of the Beasts, a weblog from some of the people who build O’Reilly websites.