blog-post-examples
Introduction
Discussion Participants
Editor
Authors
Interested Folks
Specific Examples from the Wild
Entry Container
Entries are within a container
All entries are within an enclosing 'div'. This is common with weblog home pages (example) or archive with multiple entries.
<div id="content"> <h2 id="home-title"> Latest microformats news <a href="http://www.microformats.org/feed/" title="link to RSS feed" id="feed-link"> <img src="/img/xml.gif" width="23" height="13" alt="XML" /> </a> </h2> <div class="entry"> <h3 id="post-60"> <a href="http://www.microformats.org/blog/2005/...">Wiki Attack</a> </h3> ... </div> <div class="entry"> <h3 id="post-59"> <a href="http://www.microformats.org/blog/2005/...">Web Essentials Audio</a> </h3> ... </div> <div class="entry"> <h3 id="post-57"> <a href="http://www.microformats.org/blog/2005/...">WebZine FollowUp</a> </h3> ... </div> </div>
Note also the header at the top explaining what this feed is. We may want to exploit this also.
Entries are not within a container
There are multiple entries on a single page but there is no explicit container element for the entries themselves -- though of course, there is at least one container that has the entries: <body>
. This is also a common use case for weblogs and archives also.
Multiple groups of entries
There may be multiple groups of entries on a single page that are tenously connected (example-2). Also, many weblogs have 'miniblogs' on the side that act much inthe same way.
<div id="fullcol"> <div id="sumcol"> <!-- collection 1 header --> <b> <a href="http://www.truthlaidbear.com/topicpage.php?topic=harrietmiers" class="linktitle">Harriet Miers</a> </b> </div> <div id="commcol"> <img src="http://www.truthlaidbear.com/topics/topic_harrietmiers_sm.png" > </div> <div id="commcol"> <!-- collection 1/entry 1 --> <b> <a href="http://polipundit.com/index.php?p=10420" class="linktitle">Harriet Miers Must...</a> </b> <br> ... </div> <div id="commcol"> <!-- collection 1/entry 2 --> <b> <a href="http://instapundit.com/archives/026104.php" class="linktitle">A MIERS MELTDOWN? </a> </b> <br> ... </div> </div> <div id="fullcol"> <div id="sumcol"> <!-- collection 2 header --> <b> <a href="http://www.truthlaidbear.com/topicpage.php?topic=iraq" class="linktitle">Iraq</a> </b> </div> <div id="commcol"> <img src="http://www.truthlaidbear.com/topics/topic_iraq_sm.png" > </div> <div id="commcol"> <!-- collection 2/entry 1 --> ... </div> <div id="commcol"> <!-- collection 2/entry 2 --> ... </div> </div>
Single entry on a page
This is common with weblogs that archive on a per entry basis (example).
<div id="content"> <h2 id="home-title"> Latest microformats news <a href="http://www.microformats.org/feed/" title="link to RSS feed" id="feed-link"> <img src="/img/xml.gif" width="23" height="13" alt="XML" /> </a> </h2> </div>
Note that's no guarentee that a container (as shown above as the id=content
div) will be around the singleton entry.
Individual Entry
Individual entries are within a container
Common.
<div class="entry"> <h3 id="post-60"> <a href="http://www.microformats.org/blog/2005/...">Wiki Attack</a> </h3> ... </div>
Individual entries are not within a container
Common.
<a name="112877372228959075"> </a> <br> <strong>Just one problem, Minister.</strong> Last week, Bill Rammell, <br>
Disjointed entries
That is, 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>
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>
<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>
Other Stock Examples
Example of blog posts in unmodified weblog software installations.
Stock Wordpress 1.5 Installation
<div class="post"> <h2 id="post-237"> <a href="http://192.168.1.113/~migurski/wordpress/?p=237" rel="bookmark" title="Permanent Link to More election maps">More election maps</a> </h2> <small>November 9th, 2004 <!-- by site admin --></small> <div class="entry"> <p>via <a href="http://www.markme.com/jd/archives/006288.cfm">John Dowdell of JD on MX:</a></p> <blockquote> <p>More election maps: Ben Metcalfe, a software engineer at the BBC, has his own list here… includes some not in that “Flash the only winner” item from The Inquirer, which Kevin also elaborated upon. Additionally, Andrew Lucking pointed to the…</p> </blockquote> </div> <p class="postmetadata"> Posted in <a href="http://192.168.1.113/~migurski/wordpress/index.php?cat=1" title="View all posts in General" rel="category tag">General</a> <strong>|</strong> <a href="http://192.168.1.113/~migurski/wordpress/?p=237#comments"> No Comments »</a> </p> <!-- <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/"> <rdf:Description rdf:about="http://192.168.1.113/~migurski/wordpress/?p=237" dc:identifier="http://192.168.1.113/~migurski/wordpress/?p=237" dc:title="More election maps" trackback:ping="http://192.168.1.113/~migurski/wordpress/wp-trackback.php?p=237" /> </rdf:RDF> --> </div>
Stock MoveableType 3.15 Installation
<h3 id="a000002">Example Entry</h3> <p>This is the entry body.</p> <p class="extended"><a href="http://localhost/archives/2005/08/example_entry_1.html#more">Continue reading "Example Entry"</a></p> <p class="posted">Posted by migurski at <a href="http://localhost/archives/2005/08/example_entry_1.html">03:49 </a> | <a href="http://localhost/archives/2005/08/example_entry_1.html#comments">Comments (0)</a></p>
Stock Blosxom Installation, with "Blosxom Flavour Sampler"
<p> <a name="post-identifier"><b>Post Title</b></a> <br /> Post body text. </p> <p align="right"> <i>[<a href="/permalink/post-identifier">post-identifier</a>] <a href="/permalink/2005/08/15#post-identifier">permanent link</a></i> </p>
See Also
- blog-post-brainstorming
- blog-post-formats
- blog-post-examples
- blog-description-format - how to describe a blog (as opposed to the individual entries, which is what we're doing here)