Design Patterns for Weblogs: The Individual Entry

I want to quickly jot down here an idea I’ve had for the basic html structure of an individual weblog entry post. I’ve never been happy with the standard design patterns: the extant naming conventions have never really worked for me as I don’t think that they adequately capture the semantics of the actual content structure of a weblog post. Then it hit me that a weblog entry is like a complete, miniature page in its own right! It has a header for the title of the entry and a by-line, a contents area, and a footer with additional meta-data and contact details (in other words, a comments invitation):

<div class="entry">

    <div class="header">

        <h2>Entry Title</h2>

        <p>Written by Joe Blogs</p>

    </div>

    <div class="content">

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
        nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
        aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
        nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
        officia deserunt mollit anim id est laborum.</p>


    </div>

    <div class="footer">

    <p>Posted on the 21st of Month, under <a href="tag">Category</a>. <a>Comment?</a></p>


    </div>

</div>

The nice thing that this convention exposes is that it’s easy to see other content blocks in a page as having a similar structure. Therefore, you can mark up many things with this pattern and then use an encapsulating div with a specific "id", like “contents”, or “page-header” to provide the context.