Current Blog Formats

There is a need for developing standard classes for blog posts (i.e. a microformat!).

This page serves to document the current list of individual blog post schemas, formats, and efforts as background for the design of a simple blog post MicroFormat.

Discussion Participants

Editor

Chris Messina, Round Two, Inc.

Authors

Interested Folks

Tools

Blogger

http://www.blogger.com/home

Blogger is one the earliest, best known and probably most widely used blogging platform. Blogger was bought by Google in February of 2003. Blogger allows users to create and edit their own templates and also provides a large number of (more or less) attractive templates from which the user can select. Unfortunately, you must log into a blogger account to see the template selection.

Here are several Blogger templates, randomly selected from the presets. More recent templates seem to be converging on a vocabulary for identifying parts of posts. This may because they share an evolutionary history from a common template. I've included three examples here:

<body>
 <div id="content">
  <div id="main">
   ENTRIES
  </div>
 </div>
</body>

<h2 class="date-header">POST DATE</h2>
<div class="post">
 <a name="POST #"></a>
 <h3 class="post-title">
  <a href="POST URI" title="external link">POST TITLE</a>
 </h3>
 <p>POST CONTENT</p>
 <p class="post-footer">
  <em>posted by AUTHOR @ <a href="POST URI" title="permanent link">POST DATETIME</a></em>
 </p>
</div>

<body>
 <div id="main">
  <div id="main2">
   ENTRIES
  </div>
 </div>
</body>

<div class="post">
 <a name="POST #"></a>
 <h3 class="post-title">
  <a href="sample_post.html" title="permanent link">POST TITLE</a>
 </h3>
 <div class="post-body">
   POST CONTENT
 </div>
 <p class="post-footer">
   <em>posted by AUTHOR @ <a href="POST URI" title="permanent link">POST TIME</a></em>
 </p>
</div>

<body>
 <div id="leftcontent">
 ENTRIES
 </div>
</body>
  
<div class="Post">
 <a name="POST #"></a>
 POST CONTENT
 <span class="PostFooter">
  <a href="POST URI">POST TIME</a> 
 </span>
</div>

Key CSS Elements

newer templates seem to use "main" to identify a enclosure for all entries
newer templates use "post" to identify a weblog entry
newer templates use "post-title" to identify the entry's title
beyond this there is little standardization

Template Concepts

all posts
an individual post
post title
post author
post posting time
post content
post URI (permalink)

Blosxom

Drupal

http://drupal.org
varies per theme

LiveJournal

http://www.livejournal.com/

MovableType

http://www.sixapart.com/movabletype/

MovableType is a perl-based blogging platform. Note that the MT is old and widely deployed and there are very many different variants on the templates in the wild.

The standard template for the weblog's main page (the "main index") has the following structure:

<body>
 <div class="content">
 <h2>DATE HEADER</h2>
 <h3 id="a####">POST TITLE</h3>
 POST CONTENT
 [ OPTIONAL LINK TO MORE POST CONTENT ]
 <p class="posted">Posted by AUTHOR at <a href="POST URI">POST DATE</a>
 </div>
</div>

<div class="content">
 <p align="right">
  <h2>POST DATE</h2>
 </p>
 <h3>POST TITLE</h3>
 POST CONTENT
 <div id="more">
  MORE POST CONTENT (optional)
 </div>
 <p class="posted">Posted by AUTHOR at DATE</p>
</div>

Key CSS Elements

"content" can enclose an individual entry or all entries, depending on the context
"h2" encloses the post date (literally: the time is not included)
"h3" encloses the title
there is no standard enclosure for all the content
there is no clear identification of "here's all the entries"
there is no clear identification of the post's author
the permalink is not necessarily on the page anywhere

Template Concepts

all posts
an individual post
post title
post author
post posting time
post content, which includes the next two
post content (first part)
post content (expended part)
post URI (permalink)

TypePad

http://www.sixapart.com/typepad/

Typepad is a MovableType hosting service. It provides a list of default templates and [ "template modules"] from which users can construct or modify their own templates. Looking at several Typepad blogs, most or all of them following the nomenclature and struct defined by these templates.

The standard structure is as follows:

<body class="layout-two-column-right">
 <div id="container">
  <div id="container-inner" class="pkg">
   <div id="pagebody">
    <div id="pagebody-inner" class="pkg">
     <div id="alpha">
      <div id="alpha-inner" class="pkg">
        INDIVIDUAL ENTRY
      </div>
     </div>
    </div>
   </div>
  </div>
 </div>
</body>

<div class="entry" id="entry-#####">
  <h3 class="entry-header">POST TITLE</h3>
 <div class="entry-content">
  <div class="entry-body">
    POST CONTENT
  </div>
   <a id="more"></a>
   <div class="entry-more">
     MORE POST CONTENT
   </div>
 </div>
 <p class="entry-footer">
   POST FOOTER
 </p>
</div>

I cannot seem to track down in the templates where the POST FOOTER is defined. However, we can see the results from a sample blog:

<span class="post-footers">Posted by AUTHOR_NAME in CATEGORY</span> 
<span class="separator">|</span> 
<a class="permalink" href="ENTRY_URI">Permalink</a>
| <a href="COMMENT_URI">Comments (2)</a>
| <a href="TRACKBACKS_URI">TrackBack (0)</a>

Key CSS Elements

"entry" encloses all elements within an entry
"entry-content" contains all the entry text, plus additional text saying "here's more"
"entry-header" contains the title of the post
"permalink" contains the post's URI
there is no clear identification of "here's all the entries"
there is no clear identification of the post's author

Template Concepts

all posts
an individual post
post title
post author
post posting time
post content, which includes the next two
post content (first part)
post content (expended part)
post URI (permalink)

WordPress

http://wordpress.org

WordPress is a popular GPLed blogging system based on PHP and MySQL. WordPress calls their templates "themes" -- more information. Wordpress does not have a standardized set of CSS elements for identifying parts of the weblog content. I've included a number of examples of what is seen in the wild (move to [examples]?)

Example 1: Fresh Bananas

<body id="blog">
 <div id="wrap">
  <div id="content" class="two_column">
   <div class="left">
    ENTRIES
   </div>
  </div>
 </div>
</body>

<h2>POST TITLE</h2>
POST CONTENT (PARTIAL)
<p>
 <a href="POST URRI" title="Contiue reading this post">Continue reading</a>
</p>

Example 2: VanillaMist

<body>
 <div id="main">
  <div id="content">
   ENTRIES
  </div>
 </div>
</body>

<div class="post">
 <p class="post-date">Wed 6 Jul 2005
 </p>
 <div class="post-info">
  <h2 class="post-title">
   <a href="http://vanillamist.com/blog/?p=89" rel="bookmark" title="Permanent Link: Podcasts and a new version of Connections soon">Podcasts and a new version of Connections soon</a>
  </h2>
  Posted by AUTHOR under <a href="POST URI" title="View all posts in Blogs and Blogging" rel="category tag">CATEGORY</a>

  <div class="post-content">
   POST CONTENT
  </div>

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

Example 3: Boredom

<body>
 <div id="content">
 </div>
</body>

<div class="post">
 <h2 id="post-5">
  <a href="POST URI" rel="bookmark" title="Permanent Link to POST TITLE">POST TITLE</a>
 </h2>
 <small>POST DATE</small>
 <div class="entry">
  POST CONTENT
 </div>
 <p class="postmetadata">
 </p>
</div>

Key CSS Elements

There is very little reuse amongst the various templates selected.

Template Concepts

Post
Title
Author
Date
Content (partial)
Content (full)

A list of all the template elemenents is available here.

Xanga

http://www.xanga.com/

Syndication Feed Formats

All of the blogging tools above can produce syndication feeds from the same underlying content and thus prossibly worth discussing here.

Stephen Downes postulates a syndication/weblog equivalency rule, that RSS + XSLT = XHTML and XHTML + XSLT = RSS. In practice, this may not be exactly true due to syndication feeds often only provide summaries of the entry text and the definition of certain elements of syndications feeds may have ambiguous meaning or interpretation.

This section may be moved elsewhere.

Atom

http://www.atomenabled.org/

RSS 2.0

http://blogs.law.harvard.edu/tech/rss

Discussion Forum / Bulletin Board Formats

Discussion forum posts are similar to blog posts, so may be relevant. Typically discussion forum software does not appear to support HTML templating. Due to the complexity of table-based layouts, much of the mark-up in the following examples has been stripped. The mark-up and analysis also excludes controls (such as reply buttons).

Moodle

http://moodle.org/

Moodle is an open source course management system used in education. It includes a discussion forum.

<table class="forumpost">
 <tr>
  <td>
   <img src="AVATAR"/>
  </td>
  <td class="topic>
   <div class="subject">POST TITLE</div>
   <div class="author">by <a>AUTHOR</a> - POST DATE</div>
  </td>
 </tr>
 <tr>
  <td class="content">
   POST CONTENT
   <div class="commands"><a>Show Parent</a> | <a>Reply</a></div>
  </td>
 </tr>
</table>

Key CSS Elements

"forumpost" identifies a post
"subject" identifies the post subject
"author" identifies the author, but also includes the date and other text
"content" identifies the content area, but includes some controls also

Concepts

post title
post author
post date
post content
original post (to which this is a reply)
author avatar

phpBB

http://www.phpbb.com/

phpBB is a popular GPL discussion forum system.

<table class="forumline">
 <tr>
  <td class="catHead">(controls)</td>
 </tr>
 <tr>
  <td class="row1">
   <span class="name">
    <a name="###"></a>
    <b>AUTHOR</b>
   </span>
   <span class="postdetails">
    AUTHOR STATUS (registered etc.)
    <img src="AVATAR"/>
    Joined: AUTHOR JOIN DATE
    Posts: AUTHOR POST COUNT
    Location: etc.
   </span>
  </td>
  <td class="row1">
   <table>
    <tr>
     <td>
      <span class="postdetails">Posted: POST DATE Post subject: POST TITLE</span>
     </td>
     <td>(controls)</td>
    </tr>
    <tr>
     <td>
      <span class="postbody">
       CONTENT
      </span>
     </td>
    </tr>
   </table>
  </td>
 </tr>
 (controls)
</table>

Key CSS Elements

"forumline" encloses the post
"name" identifies the author
"postdetails" occurs twice, once providing information about the author, once enclosing the post date and title
"postbody" identifies the post content

Concepts

post title
post author
post date
post content
author status
author join date
author avatar
author post count
author location

PunBB

http://punbb.org/

<div id="HTML-ID" class="blockpost">
 <h2>
  <span class="conr">POST NUMBER</span>
  <a href="PERMALINK">POST DATE</a></h2>
 <div class="box">
  <div class="inbox">
   <div class="postleft">
    <dl>
     <dt><strong><a href="AUTHOR PROFILE LINK">AUTHOR NAME</a></strong></dt>
     <dd class="usertitle"><strong>AUTHOR STATUS (e.g. Moderator)</strong></dd>
     <dd class="postavatar"><img src="AVATAR"/></dd>
     <dd>From: AUTHOR LOCATION</dd>
     <dd>Registered: AUTHOR REGISTRATION DATE</dd>
     <dd>Posts: AUTHOR POST COUNT</dd>
     <dd class="usercontacts"><a href="AUTHOR URL">Website</a></dd>
    </dl>
   </div>
   <div class="postright">
    <h3>POST TITLE</h3>
    <div class="postmsg">
	 POST CONTENT
    </div>
    <div class="postsignature">AUTHOR SIGNATURE</div>
   </div>
   <div class="clearer"></div>
   <div class="postfootleft"><p>AUTHOR STATE (online, offline)</p></div>
   <div class="postfootright"><div></div></div>
  </div>
 </div>
</div>

Key CSS Elements

"blockpost" encloses a post; the element also has an HTML id
"conr" is the post number within the discussion thread
h2 encloses the post number, post date, and permalink, distinguishable by HTML a and span elements
h3 identifies the post title
"postmsg" identifies the post content
the author name and URL are in dl dt a
additional author information is in dl dd
"usertitle" identifies the author status
"postavatar" indentifies the author's avatar
"usercontacts" identifies author contact information

Concepts

post title
post author
post date
permalink
post sequence number
author status
author avatar
author location
author registration date
author post count
author URL
author profile link
author signature
author contact information (website)

YaBB

http://www.yabbforum.com/

YaBB is a popular commercial/free forum system.

<div class="displaycontainer">
<table>
 <tr>
  <td>
   <a><b>POST TITLE</b></a>
   AUTHOR STATUS (junior member, senior, etc.)<br />
   <img src="AVATAR/>
   AUTHOR BYLINE
   Posts: ###
   Gender: <img/>
  </td>
  <td>
   <div>
    <b>POST TITLE</b>
    <span><b>Reply #nnn on:</b> POST DATE</span>
   </div>
   <div>
    <span class="message">
     CONTENT
    </span>
   </div>
  </td>
 </tr>
 <tr>(controls)</tr>
</table>
</div>

Key CSS Elements

"displaycontainer" encloses a post
"message" identifies post content
no other fields are identified by meaningful mark-up

Concepts

post title
post author
post date
post content
original post (to which this is a reply)
author status
author byline
author avatar
author gender
author post count

Examples from the wild

Early work on extending standardized nodes in Drupal: http://factorycity.net/demos/drupal/event_system/microformats/
Microformat-style hooks in forum posts for Javascript annotation: http://www.geof.net/code/annotation/technical.html#microformats

blog-post-formats: Difference between revisions

Revision as of 20:39, 16 August 2005

Current Blog Formats

Discussion Participants

Editor

Authors

Interested Folks

Tools

Blogger

Key CSS Elements

Template Concepts

Blosxom

Drupal

LiveJournal

MovableType

Key CSS Elements

Template Concepts

TypePad

Key CSS Elements

Template Concepts

WordPress

Key CSS Elements

Template Concepts

Xanga

Syndication Feed Formats

Atom

RSS 2.0

Discussion Forum / Bulletin Board Formats

Moodle

Key CSS Elements

Concepts

phpBB

Key CSS Elements

Concepts

PunBB

Key CSS Elements

Concepts

YaBB

Key CSS Elements

Concepts

Examples from the wild

Navigation menu

Search