blog-post-formats

From Microformats Wiki
blog-post-formats /
Revision as of 11:40, 11 October 2005 by DavidJanes (talk | contribs) (Moved more examples over)
Jump to navigation Jump to search

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

Authors

Interested Folks

Tools

Blogger

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

LiveJournal

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

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

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

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

Here is the basic structure of an Atom document, showing only required and recommended elements and the number of them that may appear (the rules are little more complicated than shown here, as some elements become optional or required depending on what else is included).

feed           - 1
  id            - 1
  title         - 1; type "text"
  updated       - 1
  link          - 0-1 recommended; type "link"
  author        - 0-N recommended; type "person"
   name           - 1
   email          - 0-1 recommended
   uri            - 0-1 recommended
  entry         - 0-N
   id            - 1
   title         - 1; type "text"
   updated       - 1
   published     - 0-1
   author        - 0-N recommended; type "person"
   content       - 0-1 recommended; type "text";
                   "contains or links to the complete content of the entry"
   link          - 0-N recommended; type "link"
   summary       - 0-1 recommended; type "text"

A note about Atom types

  • person - describes a person, corporation, or similar entity
  • text - contains human-readable text; @text defines the encoding of the text itself: "text" (default), "html", "xhtml"
  • link - is patterned after html's link element; @href is required; @rel, @type, @hreflang, @title, and @length are optional.
  • published and updated are datetimes

Here's an example Atom feed

<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">

  <title>Example Feed</title>
  <link href="http://example.org/"/>
  <updated>2003-12-13T18:30:02Z</updated>
  <author>
    <name>John Doe</name>
  </author>
  <id>urn:uuid:60a76c80-d399-11d9-b93C-0003939e0af6</id>

  <entry>
    <title>Atom-Powered Robots Run Amok</title>
    <link href="http://example.org/2003/12/13/atom03"/>
    <id>urn:uuid:1225c695-cfb8-4ebb-aaaa-80da344efa6a</id>
    <updated>2003-12-13T18:30:02Z</updated>
    <summary>Some text.</summary>
  </entry>

</feed>

RSS 2.0

RSS 2.0 is not to be confused with RSS 1.0 is based on RDF. More about the various versions of RSS and the reason for their existance can be read on Wikipedia

Here is the basic structure of an RSS document, showing only required and recommended elements and the number of them that may appear:


Here's an example RSS 2.0 feed [some editing needed internally to make entities show the correct way]:

<?xml version="1.0"?>
<rss version="2.0">
   <channel>
      <title>Liftoff News</title>
      <link>http://liftoff.msfc.nasa.gov/</link>
      <description>Liftoff to Space Exploration.</description>
      <language>en-us</language>
      <pubDate>Tue, 10 Jun 2003 04:00:00 GMT</pubDate>
      <item>

         <title>Star City</title>
         <link>http://liftoff.msfc.nasa.gov/news/2003/news-starcity.asp</link>
         <description>How do Americans ...
           <a href="http://howe.iki.rssi.ru/GCTC/gctc_e.htm">Star City</a>.
         </description>
         <pubDate>Tue, 03 Jun 2003 09:39:21 GMT</pubDate>
         <guid>http://liftoff.msfc.nasa.gov/2003/06/03.html#item573</guid>

      </item>
   </channel>
</rss>


An XHTML profile for RDF Site Summaries

http://www.w3.org/2000/08/w3c-synd/#

Discussion Forum / Bulletin Board Formats

Discussion forum posts are similar to blog posts, so may be relevant. 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

Moodle is an open source course management system used in education. It includes a discussion forum. The forum does not support templating.

<body class="mod-forum" id="mod-forum-discuss">
 <div id="page">
  <div id="header">
   <div class="headermain">COURSE TITLE</div>
   <div class="headermenu">(controls)</div>
  </div>
  <table class="navbar">
   <tr>
    <td>
     <div class="breadcrumb">
	  <a href="BREADCRUMB LINK">BREADCRUMB TITLE</a>+
	 </div>
     (controls)
    </td>
   </tr>
  </table>
  <div id="content">
   (controls)
   ENTRIES
  </div>
 </div>
</body>

<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

  • "headermain" identifies the course title
  • "breadcrumb" identifies breadcrumbs
  • "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

  • course title
  • breadcrumb titles and links
  • post title
  • post author
  • post date
  • post content
  • original post (to which this is a reply)
  • author avatar

phpBB

phpBB is a popular GPL discussion forum system. This is based on the forum on the phpBB website.

<body>
 <table>
  <tr>
   <td class="bodyline" bgcolor="white">
    <table width="100%" cellspacing="0" cellpadding="10" border="0">
     <tr>
      <td>
       <table>
        <tr>
         <td>
          <a class="maintitle" href="FORUM LINK">FORUM TITLE</a>
         </td>
        </tr>
       </table>
       <table width="100%" cellspacing="2" cellpadding="2" border="0">
        <tr>
         (controls)
         <td align="left" valign="middle" width="100%">
          <span class="nav"><a href="BREADCRUMB LINK" class="nav">BREADCRUMB TITLE</a>+</span>
         </td>
        </tr>
       </table>

       ENTRIES
       (controls)
       (repeat of controls and navigation)
  ...
 </table>
</body>

<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

  • "maintitle" identifies the forum title and link
  • "nav" is used for breadcrumbs
  • "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

  • forum title and link
  • breadcrumb titles and links
  • post title
  • post author
  • post date
  • post content
  • author status
  • author join date
  • author avatar
  • author post count
  • author location

PunBB

PunBB is GPL forum software. This structure is from the forum on their web site.

<body>
 <div id="punwrap">
  <div id="punviewtopic" class="pun">
   <div id="brdheader" class="block">
    <div class="box">
     <div id="brdtitle" class="inbox">
      <h1><span>SITE SECTION TITLE</span></h1>
      <p><span>SITE SECTION BYLINE</span></p>
     </div>
     (controls)
    </div>
   </div>
  <div id="announce" class="block">
   <h2><span>ANNOUNCEMENT TITLE</span></h2>
   <div class="box">
    <div class="inbox">
     <div><span class="warntext">ANNOUNCEMENT CONTENT</span></div>
    </div>
   </div>
  </div>
  <div class="linkst">
   <div class="inbox">
    (controls)
    <ul>
     <li><a href="BREADCRUMB LINK">BREADCRUMB TITLE</a></li>+
    </ul>
   </div>
  </div>
  ENTRIES
 </div>
</body>

<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
  • h1 indicates the site section title
  • "announce" and "warntext" indicate the announcement title and content
  • ul inside "linkst" identifies breadcrumbs
  • 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

  • site section title and byline
  • announcement title and content
  • breadcrumb titles and links
  • 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

YaBB is a popular commercial/free forum system. This example is based on the forum on the YaBB site. I have stripped some presentational class names.

<body>
 <div class="container">
  <div class="maincontent">
   <div class="seperator">
    <table>
     (controls, login)
     <tr>
      <td>
       <span id="fscroller">FORUM WELCOME</span>
       (controls)
      </td>
     </tr>
    </table>
   </div>
   <div class="navbarcontainer">
    <table>
     <tr>
      <td>
       <span>
        <b><a href="BREADCRUMB LINK" class="nav">BREADCRUMB TITLE</a>+</b>
        (Moderators: <a href="MODERATOR LINK">MODERATOR NAME</a>+)
        <div class="seperator">
        <table>
         <tr>
          <td>
	   <span>FORUM DESCRIPTION.</span>
          </td>
         </tr>
        </table>
       </div>
      </span>
      </td>
      (controls)
     </tr>
    </table>
   </div>
   ENTRIES
  </div>
  (repeat of navigation)
 </div>
</body>

<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

  • forum welcome message
  • forum description
  • forum moderators (names and links)
  • breadcrumbs (titles and links)
  • 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

Specific Examples from the Wild

Entry Container

  • entries are within a container; that is, all entries are within an enclosing 'div'. This is common with weblog home pages (example) or archive with multiple entries.
  • entries are not within a container; that is, there are multiple entries on a single page but there is no explicit container element (example). This is also a common use case for weblogs and archives also.
  • there may be multiple groups of entries on a single page that are tenously connected (example-1 example-2).
  • there is only a single entry on a page. This is common with weblogs that archive on a per entry basis (example).

Individual Entry

  • individual entries are within a container (commonplace)
  • individual entries are not within a container (rare-ish)
  • not all sub-elements of an individual entry are in the container (for example, the author and date may follow in a separate block)

Titles

Title enclosed in <h#> block element

<div class="entry single">
 <h2 id="post-59">Web Essentials Audio</h2>
 ...
</div>

Title enclosed in a <div> block element

I've seen this but I can't find an example, hopefully implying this is somewhat rare.

Title enclosed in an inline presentation element, such as <b>

<a name="112877372228959075"> </a>
<br>
 <strong>Just one problem, Minister.</strong> Last week, Bill Rammell, 
<br>

Title enclosed in a <span> (inline element)

<a name="112897777851715476"> </a>
<br>
<SPAN CLASS="inc_subtitle">EMAIL OF THE DAY II: </SPAN>"After years ...

No title

Content

  • entry with no content present -- that is, just a link and the title pointing to a different URI which may actually have content
  • entry with summary content only ([example http://www.torontosun.com/Money/home.html])
  • entry with complete content
  • entry with complete content, but the content is broken into multiple sections ([example http://www.samizdata.net/blog/] - look for "Read More" sections)

Datetimes

Datetimes are rarely expressed in consistent formats on weblogs. Weblogs generally express the creation date of the posting, not the modified time.

Date between weblog entries

This is a common pattern but by no means universal pattern seen on weblogs -- a header or div inserted between weblog entries indicating that the date has changed. I cannot find an example where this header is systematically linked to the entries using that data (i.e. a common enclosing div)

<div class="post">
 <h3 class="storytitle" id="post-3151"><a href="http://dannyayers.com/...">...</a></h3> 
 ...
</div>

<div class="date">2005-10-07</div>	

<div class="post">
 <h3 class="storytitle" id="post-3150"><a href="http://dannyayers.com/...">...</a></h3>
 ...
</div>

Date or Datetime in weblog footer

Most weblogs follow this pattern. Dates or datetimes are in human readable format in varying fashions. Often only the time is indicated, as the date is implied. The date or datetime is sometimes also used an indication of the 'permalink' for a post.

<div class="entry single">
 <h2 id="post-59">Web Essentials Audio</h2>

 <p>...</p>
 <ul class="post-info">
  <li><a href="...">Friday, September 30th, 2005 at 12:31 pm</a></li>
 </ul>
</div>

Permalinks

Note that not only do some examples fit multiple categories, sometimes weblog posts place the multiple links to the permalink within a single post (for example, in the header and footer).

Permalink is around or inside title

see immediate following example

Permalink is in header of post

see immediate following example

Permalink uses absolute URI

<div class="entry">
 <h3 id="post-45">
  <a 
   href="http://www.microformats.org/blog/2005/08/21/foobar-microformats/" 
   rel="bookmark"
   title="Permanent Link to FooBar Microformats">FooBar Microformats</a>
  </h3>
   ...
</div>

Permalink is in footer of post

<h3>YET ANOTHER INSTANCE OF THE WORLD FINALLY CATCHING UP TO THE BLOG</h3>
<p>Today's news: Neuticles win ... award.</p>
<p class="posted">
Posted by judi on October  7, 2005 at 05:00 PM |
<a href="http://blogs.herald.com/dave_barrys_blog/2005/10/yet_another_ins.html">Permalink</a>
</p>

Permalink uses relative URI

see immediate following example

Permalink includes fragment

This is used when a weblog archives posts as a group (say, by month or week) rather than as individual posts. This is very common on older blogspot weblogs.

<a name="112876103554732697"> </a><br>
<strong>The ceremony of Explaining the Joke</strong> 
<br>
<span class="byline">posted by Natalie at 
<a href="2005_10_02_nataliesolent_archive.html#112876103554732697">8:18 AM</a></span>
<br>

No permalink

This is common on single article archive pages, some social weblogs (example) and most big media webpages (i.e. non-blogs)

 <a name="026056"></a>
 <p>ACCORDING TO THE WHITE HOUSE, ... hadn't we?</p>
 <div class="footer">posted at 11:35 PM by <b>Glenn Reynolds</b></div>

See Also