blog-post-examples: Difference between revisions

From Microformats Wiki
Jump to navigation Jump to search
(removed spam links)
 
(37 intermediate revisions by 14 users not shown)
Line 1: Line 1:
= Blog Post Examples =
This page is for documenting real world examples of what people publish in blog posts, what markup they use, and what implied schemas can be inferred from their behaviors.  See also: [[blog-post-formats]], [[blog-post-brainstorming]], [[hatom|hAtom]].
__TOC__
= Introduction =
= Introduction =
== Discussion Participants ==
== Discussion Participants ==


=== Editor ===
hallu
* [http://blogmatrix.blogmatrix.com/ David Janes], [http://www.blogmatrix BlogMatrix, Inc.]


=== Authors ===
=== Authors ===
* [http://blogmatrix.blogmatrix.com/ David Janes], [http://www.blogmatrix BlogMatrix, Inc.]
* [http://blogmatrix.blogmatrix.com/ David Janes], [http://www.blogmatrix BlogMatrix, Inc.]
* [[MichalMigurski]]
* [[MichalMigurski]]
=== Contributors ===
* [http://rbach.priv.at/ Robert Bachmann]
* [http://tantek.com/ Tantek Çelik]
* [http://maetl.coretxt.net.nz Mark Rickerby]
* [http://bs-markup.de Björn Seibert]


=== Interested Folks ===
=== Interested Folks ===


= Specific Examples from the Wild =
= Specific Examples from the Wild =
== Entry Container ==


=== Entries are within a container ===  
== EntryGroup ==
All entries are within an enclosing 'div'. This is common with weblog home pages ([http://microformats.org/ example]) or archive with multiple entries.
 
=== Entries are within an EntryGroup block ===  
All entries are within an enclosing 'div' -- the EntryGroup. This is common with weblog home pages ([http://microformats.org/ example]) or archive with multiple entries.


<pre><nowiki>
<pre><nowiki>
Line 51: Line 63:
Note also the header at the top explaining what this feed is. We may want to exploit this also.
Note also the header at the top explaining what this feed is. We may want to exploit this also.


=== Entries are not within an explicit container ===
=== Entries are within an explicit EntryGroup ===
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: <code>&lt;body></code>. This is also a common use case for weblogs and archives also.
There are multiple entries on a single page but there is no explicit block element for the entries themselves -- though of course, there is at least one block that has the entries: <code>&lt;body></code>. This is also a common use case for weblogs and archives also.


=== Multiple groups of entries ===
=== Multiple EntryGroups on a page ===
There may be multiple groups of entries on a single page that are tenously connected ([http://news.google.ca/nwshp?hl=en&tab=wn&q= example-2]). Also, many weblogs have 'miniblogs' on the side that act much inthe same way.
There may be multiple groups of entries on a single page that are tenously connected ([http://news.google.ca/nwshp?hl=en&tab=wn&q= example-2]). Also, many weblogs have 'miniblogs' on the side that act much inthe same way.


Line 123: Line 135:
</nowiki></pre>
</nowiki></pre>


Note that's no guarentee that a container (as shown above as the <code>id=content</code> div) will be around the singleton entry.
Note that's no guarentee that a block (as shown above as the <code>id=content</code> div) will be around the singleton entry.


== EntryGroup Title ==
== EntryGroup Permalink ==
== Individual Entry ==
== Individual Entry ==


Line 156: Line 170:
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)
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 ==
== Entry Titles ==
=== Title enclosed in <code>&lt;h#></code> block element ===  
=== Entry Title enclosed in <code>&lt;h#></code> block element ===  
* [http://www.microformats.org/blog/2005/09/30/web-essentials-audio/ example]
* [http://www.microformats.org/blog/2005/09/30/web-essentials-audio/ example]


Line 167: Line 181:
</pre>
</pre>


=== Title enclosed in a <code>&lt;div></code> block element ===
=== Entry Title enclosed in a <code>&lt;div></code> block element ===
''I've seen this but I can't find an example, hopefully implying this is somewhat rare''.
''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 <code>&lt;b></code> ===
=== Entry Title enclosed in an inline presentation element, such as <code>&lt;b></code> ===
* [http://nataliesolent.blogspot.com/ example]
* [http://nataliesolent.blogspot.com/ example]


Line 180: Line 194:
</pre>
</pre>


=== Title enclosed in a <code>&lt;span></code> (inline element) ===
=== Entry Title enclosed in a <code>&lt;span></code> (inline element) ===
* [http://www.andrewsullivan.com/ example]
* [http://www.andrewsullivan.com/ example]


Line 189: Line 203:
</pre>
</pre>


=== No title ===
=== No Entry Title ===
* [http://www.instapundit.com/ example]
* [http://www.instapundit.com/ example]


== Content ==
== Entry Content ==
 
=== Entry without content ===
That is, the entry has just a link and the title pointing to a different URI (which may actually have content). This is something frequently seen on news sites (which after all, can generate feeds)
 
* [http://www.cbc.ca/news/ example]
 
<pre><nowiki>
<ul>
<li>
  <a href="/story/.../ndp-libs051016.html">NDP sets conditions for backing Liberals</a>
</li>
<li>
  <a href="/story/.../teachers-bc051016.html">Go back to work, B.C. ...</a>
</li>
<li>
  <a href="/story/.../alberta-strike2_051015.html">Plant managers charged ...</a>
</li>
<li>
  <a href="/story/.../bc-mystery-illness051015.html">B.C. seniors' home reports...</a>
</li>
</ul>
</nowiki></pre>
 
=== Entry contains summary content only ===
This is common on media sites. MovableType also provides this as a default option, so it's often seen on MT blogs,
 
* [http://thecommunityengine.com/home/ example]
 
<pre><nowiki>
<div class="inlineBlog">
<h3 id="a003068">
  <a href="http://thecommunityengine.com/h.../xfolk_vegomatic.html" class="taggedlink">xFolk Veg-o-matic Alpha</a>
</h3>
<p class="abstract extended">
  We provide a way to surf the web and slice and dice information you find there into your own custom output stream.
</p>
<p class="categorylist">
  Sections: 
  <a href="http://thecommunityengine.com/home/archives/tools_and_analytics" rel="tag">Tools and Analytics</a>
</p>
<p class="taglist">Topics: 
  <a href="http://thecommunityengine.com/home/archives/tags/greasemonkey" rel="tag">greasemonkey</a>
  <a href="http://thecommunityengine.com/home/archives/tags/microformats" rel="tag">microformats</a>
  <a href="http://thecommunityengine.com/home/archives/tags/xfolk" rel="tag">xFolk</a>
</p>
<p>
  The folks at ... the rest of the content
</p>
<p class="extended">
  <a href="http://thecommunityengine.com/.../xfolk_vegomatic.html#more">Continue reading "xFolk Veg-o-matic Alpha"</a>
</p>
...
</div>
</nowiki></pre>
 
Notes:
* there's a lot of things going on in this example
* there's an "abstract" at the top
* there's sections for "categories" and "tags"
* there's a summary section "The folks at ... the rest of the content"
* there's a link to the full content at the bottom
 
=== Entry contains complete content ===
 
* [http://www.microformats.org/blog/2005/10/19/more-than-styling/ example]
 
<pre><nowiki>
<div class="entry single">
<h2 id="post-61">Class attributes are about more than styling</h2>
 
<p>When people talk about microformats, ... </p>
<blockquote cite="http://www.w3.org/TR/REC-html40/struct/global.html#h-7.5.2">
  ... quoted text from elsewhere
</blockquote>


* entry with no content present -- that is, just a link and the title pointing to a different URI which may actually have content
<p>There&#8217;s a couple of points I&#8217;d like to highlight here:</p>
* entry with summary content only ([example http://www.torontosun.com/Money/home.html])
* entry with complete content
... more 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 ==
<h4 class="tags">Technorati Tags:</h4>
<ul class="tags">
  <li><a href="http://www.technorati.com/tag/css" rel="tag">css</a></li>
  ...
</ul>
 
<ul class="post-info">
  ... footer stuff ...
</ul>
</div>
</nowiki></pre>
 
=== Entry breaks content into multiple sections ===
* [http://www.samizdata.net/blog/ example]
* we also identify this as 'Split Content'
 
<pre><nowiki>
<div class="blogbody">
<a name="008148"></a>
 
<div class="title">
  Face to face: why places will continue to exist
</div>
 
<div class="posted">
  <strong>Brian Micklethwait (London)</strong>
  &nbsp;&nbsp;
  <a href="...">Science & Technology</a>
</div>
 
<p>It is not just that I dislike filling in forms....</p>
... the first section of the content ...
 
... this link makes the extended section show ...
<span id="varP8148">
  <img src="http://www.samizdata.net/blog/img/bullet_tri.gif" width="16" height="10" alt="" />
  <a href="..." onclick="showMore(8148,'...');return false;">
  Read more.
  </a>
</span>
 
<div id="varXYZ8148" style="display: none">
  <p>The very gadgets – computers linked...</p>
  ... the rest of the extended content ...
 
  ... this link makes the extended section hide ...
  <img src="..." width="16" height="10" alt="" />
  <a href="#008148" onclick="showMore(8148,0);return true;">
    Read less.
  </a>
  </div>
</div>
</div>
</nowiki></pre>
 
== Entry Datetimes ==
Datetimes are rarely expressed in consistent formats on weblogs. Weblogs generally express the creation date of the posting, not the modified time.
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 ===
=== Dates 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)
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)


Line 221: Line 364:
</nowiki></pre>
</nowiki></pre>


=== Date or Datetime in weblog footer ===
=== Entry Date or Datetime in entry 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.
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.


Line 237: Line 380:
</nowiki></pre>
</nowiki></pre>


== Permalinks ==
== Entry 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).
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 ===
=== Entry Permalink is around or inside title ===
see immediate following example
see immediate following example
=== Permalink is in header of post ===
=== Entry Permalink is in header of post ===
see immediate following example
see immediate following example
=== Permalink uses absolute URI ===
=== Entry Permalink uses absolute URI ===
* [http://microformats.org/ example]
* [http://microformats.org/ example]


Line 259: Line 402:
</nowiki></pre>
</nowiki></pre>


=== Permalink is in footer of post ===
=== Entry Permalink is in footer of post ===
* [http://blogs.herald.com/dave_barrys_blog/2005/10/yet_another_ins.html example]
* [http://blogs.herald.com/dave_barrys_blog/2005/10/yet_another_ins.html example]


Line 271: Line 414:
</nowiki></pre>
</nowiki></pre>


=== Permalink uses relative URI ===
=== Entry Permalink uses relative URI ===
see immediate following example
see immediate following example
=== Permalink includes fragment ===
=== Entry 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.
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.


Line 287: Line 430:
</nowiki></pre>
</nowiki></pre>


=== No permalink ===
=== No Entry Permalink ===
This is common on single article archive pages, some social weblogs ([http://raymitheminx.blogspot.com/ example]) and most big media webpages (i.e. non-blogs)
This is common on single article archive pages, some social weblogs and most big media webpages (i.e. non-blogs)
* [http://instapundit.com/archives/026056.php example]
* [http://instapundit.com/archives/026056.php example]


Line 296: Line 439:
  <div class="footer">posted at 11:35 PM by <b>Glenn Reynolds</b></div>
  <div class="footer">posted at 11:35 PM by <b>Glenn Reynolds</b></div>
</nowiki></pre>
</nowiki></pre>
== Entry Author ==


= Other Stock Examples =  
= Other Stock Examples =  
Line 351: Line 496:
</nowiki></pre>
</nowiki></pre>


=== Stock Blosxom Installation, with [http://blosxom.com/downloads.html "Blosxom Flavour Sampler"] ===
=== Stock Blosxom Installation, with [http://blosxom.com/downloads.html "Blosxom Flavor Sampler"] ===
<pre><nowiki>
<pre><nowiki>
<p>
<p>
Line 363: Line 508:
</p>
</p>
</nowiki></pre>
</nowiki></pre>
=== Stock Textpattern 4.0.3 Installation ===
<pre><nowiki>
<div id="content">
<h3><a href="http://txpdefault/article/2/second-post" title="Permanent link to this article">Second Post</a> &#183; a few seconds ago by chris</h3>
<p>This is a short second post for illistration.</p>
<p class="comments_invite"><a href="http://txpdefault/article/2/second-post#comment"  class="comments_invite">Comment</a></p>
<div align="center"><img src="http://txpdefault/images/1.gif" style="height:1px;width:400px" class="divider" alt="" /></div><h3><a href="http://txpdefault/article/1/first-post" title="Permanent link to this article">First Post</a> &#183; 4 minutes ago by textpattern</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rutrum est eu mauris. In volutpat blandit felis. Suspendisse eget pede. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Quisque sed arcu. Aenean purus nulla, condimentum ac, pretium at, commodo sit amet, turpis. Aenean lacus. Ut in justo. Ut viverra dui vel ante. Duis imperdiet porttitor mi. Maecenas at lectus eu justo porta tempus. Cras fermentum ligula non purus. Duis id orci non magna rutrum bibendum. Mauris tincidunt, massa in rhoncus consectetuer, lectus dui ornare enim, ut egestas ipsum purus id urna. Vestibulum volutpat porttitor metus. Donec congue vehicula ante.</p>
<p class="comments_invite"><a href="http://txpdefault/article/1/first-post#comment"  class="comments_invite">Comment</a> [1]</p>
<div align="center"><img src="http://txpdefault/images/1.gif" style="height:1px;width:400px" class="divider" alt="" /></div>
</div>
</nowiki></pre>
= Rough Examples =
Moved here from [[blog-description-format]] for documentation purposes.
== Existing practice ==
=== Entry Wrappers ===
<pre><nowiki><div class="entry"></div></nowiki></pre>
The entry wrapper format has widespread usage, but seems to show up in slightly different contexts.
Some blogs (ala Wordpress) use the entry div as a wrapper to the actual post body, and wrap the whole thing in an additional div:
<pre><nowiki><div class="post">
    <div class="entry">
    </div>
</div></nowiki></pre>
A vast number of sites, including many blogs contain the main page content within a id="content" div:
<pre><nowiki><div id="content"></div></nowiki></pre>
=== Metadata ===
Wordpress uses class="postmetadata" to contain meta information, date, others use their own syntax - class="topics", class="description".
=== Basic Elements ===
Titles are usually denoted with an H2 or H3 heading. Use of class="title" seems rare, but some sites do use this explicit markup.
class="summary" is used to denote an item summary, usually in a paragraph element.
=== Permalinks ===
rel="bookmark" and rel="permalink" are both used in various places to denote a permalink to the specified entry.


=See Also=
=See Also=
* [[blog-post-examples]]
* [[blog-post-formats]]
* [[blog-post-brainstorming]]
* [[blog-post-brainstorming]]
* [[blog-post-formats]]
* [[hatom|hAtom]] - the draft proposal based on this information
* [[blog-post-examples]]
* [[blog-description-format]] - how to describe a blog (as opposed to the individual entries, which is what we're doing here)
* [[blog-description-format]] - how to describe a blog (as opposed to the individual entries, which is what we're doing here)

Latest revision as of 09:35, 17 January 2017

Blog Post Examples

This page is for documenting real world examples of what people publish in blog posts, what markup they use, and what implied schemas can be inferred from their behaviors. See also: blog-post-formats, blog-post-brainstorming, hAtom.

Introduction

Discussion Participants

hallu

Authors

Contributors

Interested Folks

Specific Examples from the Wild

EntryGroup

Entries are within an EntryGroup block

All entries are within an enclosing 'div' -- the EntryGroup. 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 within an explicit EntryGroup

There are multiple entries on a single page but there is no explicit block element for the entries themselves -- though of course, there is at least one block that has the entries: <body>. This is also a common use case for weblogs and archives also.

Multiple EntryGroups on a page

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 block (as shown above as the id=content div) will be around the singleton entry.

EntryGroup Title

EntryGroup Permalink

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)

Entry Titles

Entry Title enclosed in <h#> block element

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

Entry Title enclosed in a <div> block element

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

Entry 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>

Entry 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 Entry Title

Entry Content

Entry without content

That is, the entry has just a link and the title pointing to a different URI (which may actually have content). This is something frequently seen on news sites (which after all, can generate feeds) 

<ul>
 <li>
  <a href="/story/.../ndp-libs051016.html">NDP sets conditions for backing Liberals</a>
 </li>
 <li>
  <a href="/story/.../teachers-bc051016.html">Go back to work, B.C. ...</a>
 </li>
 <li>
  <a href="/story/.../alberta-strike2_051015.html">Plant managers charged ...</a>
 </li>
 <li>
  <a href="/story/.../bc-mystery-illness051015.html">B.C. seniors' home reports...</a>
 </li>
</ul>

Entry contains summary content only

This is common on media sites. MovableType also provides this as a default option, so it's often seen on MT blogs, 

<div class="inlineBlog">
 <h3 id="a003068">
  <a href="http://thecommunityengine.com/h.../xfolk_vegomatic.html" class="taggedlink">xFolk Veg-o-matic Alpha</a>
 </h3>
 <p class="abstract extended">
  We provide a way to surf the web and slice and dice information you find there into your own custom output stream.
 </p>
 <p class="categorylist">
  Sections:  
  <a href="http://thecommunityengine.com/home/archives/tools_and_analytics" rel="tag">Tools and Analytics</a> 
 </p>
 <p class="taglist">Topics:  
  <a href="http://thecommunityengine.com/home/archives/tags/greasemonkey" rel="tag">greasemonkey</a> 
  <a href="http://thecommunityengine.com/home/archives/tags/microformats" rel="tag">microformats</a> 
  <a href="http://thecommunityengine.com/home/archives/tags/xfolk" rel="tag">xFolk</a> 
 </p>
 <p>
  The folks at ... the rest of the content
 </p>
 <p class="extended">
  <a href="http://thecommunityengine.com/.../xfolk_vegomatic.html#more">Continue reading "xFolk Veg-o-matic Alpha"</a>
 </p>
 ...
</div>

Notes:

  • there's a lot of things going on in this example
  • there's an "abstract" at the top
  • there's sections for "categories" and "tags"
  • there's a summary section "The folks at ... the rest of the content"
  • there's a link to the full content at the bottom

Entry contains complete content

<div class="entry single">
 <h2 id="post-61">Class attributes are about more than styling</h2>

 <p>When people talk about microformats, ... </p>
 
 <blockquote cite="http://www.w3.org/TR/REC-html40/struct/global.html#h-7.5.2">
  ... quoted text from elsewhere
 </blockquote>

 <p>There’s a couple of points I’d like to highlight here:</p>
 
 ... more content ...

 <h4 class="tags">Technorati Tags:</h4>
 <ul class="tags">
  <li><a href="http://www.technorati.com/tag/css" rel="tag">css</a></li>
  ...
 </ul>

 <ul class="post-info">
  ... footer stuff ...
 </ul>
</div>

Entry breaks content into multiple sections

  • example
  • we also identify this as 'Split Content'
<div class="blogbody">
 <a name="008148"></a>

 <div class="title">
  Face to face: why places will continue to exist
 </div>

 <div class="posted">
  <strong>Brian Micklethwait (London)</strong>
    
  <a href="...">Science & Technology</a>
 </div>

 <p>It is not just that I dislike filling in forms....</p>
 ... the first section of the content ...

 ... this link makes the extended section show ...
 <span id="varP8148">
  <img src="http://www.samizdata.net/blog/img/bullet_tri.gif" width="16" height="10" alt="" />
  <a href="..." onclick="showMore(8148,'...');return false;">
   Read more.
  </a>
 </span>
  
 <div id="varXYZ8148" style="display: none">
  <p>The very gadgets – computers linked...</p>
  ... the rest of the extended content ...

  ... this link makes the extended section hide ...
  <img src="..." width="16" height="10" alt="" />
   <a href="#008148" onclick="showMore(8148,0);return true;">
    Read less.
   </a>
  </div>
 </div>
</div>

Entry Datetimes

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

Dates 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>

Entry Date or Datetime in entry 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>

Entry 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).

Entry Permalink is around or inside title

see immediate following example

Entry Permalink is in header of post

see immediate following example

Entry 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>

Entry 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>

Entry Permalink uses relative URI

see immediate following example

Entry 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 Entry Permalink

This is common on single article archive pages, some social weblogs 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>

Entry Author

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 Flavor 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>

Stock Textpattern 4.0.3 Installation

<div id="content">

	<h3><a href="http://txpdefault/article/2/second-post" title="Permanent link to this article">Second Post</a> · a few seconds ago by chris</h3>
	<p>This is a short second post for illistration.</p>

 
<p class="comments_invite"><a href="http://txpdefault/article/2/second-post#comment"  class="comments_invite">Comment</a></p>
<div align="center"><img src="http://txpdefault/images/1.gif" style="height:1px;width:400px" class="divider" alt="" /></div><h3><a href="http://txpdefault/article/1/first-post" title="Permanent link to this article">First Post</a> · 4 minutes ago by textpattern</h3>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rutrum est eu mauris. In volutpat blandit felis. Suspendisse eget pede. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Quisque sed arcu. Aenean purus nulla, condimentum ac, pretium at, commodo sit amet, turpis. Aenean lacus. Ut in justo. Ut viverra dui vel ante. Duis imperdiet porttitor mi. Maecenas at lectus eu justo porta tempus. Cras fermentum ligula non purus. Duis id orci non magna rutrum bibendum. Mauris tincidunt, massa in rhoncus consectetuer, lectus dui ornare enim, ut egestas ipsum purus id urna. Vestibulum volutpat porttitor metus. Donec congue vehicula ante.</p>


 
<p class="comments_invite"><a href="http://txpdefault/article/1/first-post#comment"  class="comments_invite">Comment</a> [1]</p>

<div align="center"><img src="http://txpdefault/images/1.gif" style="height:1px;width:400px" class="divider" alt="" /></div>


</div>

Rough Examples

Moved here from blog-description-format for documentation purposes.

Existing practice

Entry Wrappers

<div class="entry"></div>

The entry wrapper format has widespread usage, but seems to show up in slightly different contexts.

Some blogs (ala Wordpress) use the entry div as a wrapper to the actual post body, and wrap the whole thing in an additional div: 

<div class="post">
    <div class="entry">
    </div>
</div>

A vast number of sites, including many blogs contain the main page content within a id="content" div: 

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

Metadata

Wordpress uses class="postmetadata" to contain meta information, date, others use their own syntax - class="topics", class="description".

Basic Elements

Titles are usually denoted with an H2 or H3 heading. Use of class="title" seems rare, but some sites do use this explicit markup.

class="summary" is used to denote an item summary, usually in a paragraph element.

Permalinks

rel="bookmark" and rel="permalink" are both used in various places to denote a permalink to the specified entry.

See Also

Retrieved from "http://microformats.org/wiki/index.php?title=blog-post-examples&oldid=65854"