hatom-examples: Difference between revisions

From Microformats Wiki
Jump to navigation Jump to search
m (→‎hAtom examples: Added out-of-date marker)
(Updated to hAtom 0.1)
Line 1: Line 1:
= hAtom examples =
<h1>hAtom examples</h1>
 
{{out-of-date}}


'''Work in progress!'''
'''Work in progress!'''


= Contributors =
* [[User:DavidJanes|David Janes]]
* [[User:RobertBachmann|Robert Bachmann]]


=== Transformation 1 ===
= Transformation 1 =


A well behaved weblog.
A well behaved weblog.
Line 62: Line 63:
   ...
   ...
   <div class="HENTRY entry" ID="post-60">
   <div class="HENTRY entry" ID="post-60">
     <h3 class="HEADLINE">
     <h3 class="ENTRY-TITLE">
     <a href="http://www.microformats.org/blog/..." rel="bookmark" title="...">Wiki Attack</a>
     <a href="http://www.microformats.org/blog/..." rel="bookmark" title="...">Wiki Attack</a>
     </h3>
     </h3>
     <DIV CLASS="CONTENT">
     <DIV CLASS="ENTRY-CONTENT">
     <p>We had a bit of trouble with ...</p>
     <p>We had a bit of trouble with ...</p>
     <p>We&#8217;ve restored the wiki and ...</p>
     <p>We&#8217;ve restored the wiki and ...</p>
Line 84: Line 85:
     </li>
     </li>
     <li>
     <li>
       <address class="vcard"><a class="url fn" href="http://theryanking.com">Ryan King</a></address>
       <address class="vcard AUTHOR"><a class="url fn" href="http://theryanking.com">Ryan King</a></address>
     </li>
     </li>
     <li>
     <li>
Line 106: Line 107:
* Added <code>class="headline"</code> to Entry Title
* Added <code>class="headline"</code> to Entry Title
* Moved <code>id="###"</code> from <code>&lt;h3></code> to Entry
* Moved <code>id="###"</code> from <code>&lt;h3></code> to Entry
* Added <code>&lt;div class="content"></code>...<code>&lt;/div></code> around the Entry Content
* Added <code>&lt;div class="entry-content"></code>...<code>&lt;/div></code> around the Entry Content
* Added <code>&lt;abbr class="PUBLISHED" title="YYYY-MM-DDThh:mm:ss+ZZ:ZZ"></code>...<code>&lt;/abbr></code> around the Entry Datetime
* Added <code>&lt;abbr class="published" title="YYYY-MM-DDThh:mm:ss+ZZ:ZZ"></code>...<code>&lt;/abbr></code> around the Entry Datetime
* Added <code>class="author"</code> to &lt;address>


Also note:
Also note:
Line 114: Line 116:
* We did not need to add a <code>rel="bookmark"</code> to Entry Permalinks
* We did not need to add a <code>rel="bookmark"</code> to Entry Permalinks


=== Transformation 2 ===
= Transformation 2 =


A not-so well behaved weblog (an older blogspot weblog)
A not-so well behaved weblog (an older blogspot weblog)
Line 158: Line 160:
  <DIV CLASS="HFEED">
  <DIV CLASS="HFEED">
   <div class="HENTRY posts" ID="112993192128302715">
   <div class="HENTRY posts" ID="112993192128302715">
   <strong CLASS="HEADLINE CONTENT">
   <strong CLASS="ENTRY-TITLE ENTRY-CONTENT">
     Nelson's final prayer
     Nelson's final prayer
   </strong>  
   </strong>  
   <SPAN CLASS="CONTENT">
   <SPAN CLASS="ENTRY-CONTENT">
     written on the night before Trafalgar:<blockquote>May the Great God, ... heart.
     written on the night before Trafalgar:<blockquote>May the Great God, ... heart.
   </SPAN>
   </SPAN>
   <DIV>
   <DIV>
     <span class="byline">posted by <span class="author">Natalie</span> at  
     <span class="byline">posted by <span class="author vcard"><span class="fn">Natalie</span></span> at  
     <a REL="BOOKMARK" href="HTTP://NATALIESOLENT.BLOGSPOT.COM/2005_10_16_nataliesolent_archive.html#112993192128302715">
     <a REL="BOOKMARK" href="HTTP://NATALIESOLENT.BLOGSPOT.COM/2005_10_16_nataliesolent_archive.html#112993192128302715">
     <ABBR CLASS="PUBLISHED" TITLE="2005-10-24T09:49:00-00:00">9:49 PM</ABBR></a>
     <ABBR CLASS="PUBLISHED" TITLE="2005-10-24T09:49:00-00:00">9:49 PM</ABBR></a>
Line 174: Line 176:
   <div class="HENTRY posts" ID="112993022840118939">
   <div class="HENTRY posts" ID="112993022840118939">
   <strong CLASS="HEADING CONTENT">I really, truly </strong>
   <strong CLASS="HEADING CONTENT">I really, truly </strong>
   <SPAN CLASS="CONTENT">
   <SPAN CLASS="ENTRY-CONTENT">
     didn't go ... view.
     didn't go ... view.
   </SPAN>
   </SPAN>
Line 180: Line 182:
     <span class="byline">
     <span class="byline">
     posted by <span class="author">Natalie</span> at  
     posted by <span class="author">Natalie</span> at  
     <a REL="BOOKMARK" href="HTTP://NATALIESOLENT.BLOGSPOT.COM/2005_10_16_nataliesolent_archive.html#112993022840118939">
     <a REL="BOOKMARK" href="2005_10_16_nataliesolent_archive.html#112993022840118939">
     <ABBR CLASS="PUBLISHED" TITLE="2005-10-24T09:49:00-00:00">9:28 PM</ABBR></a>
     <ABBR CLASS="PUBLISHED" TITLE="2005-10-24T09:49:00-00:00">9:28 PM</ABBR></a>
     </span>
     </span>
Line 194: Line 196:
* Added <code>class="hfeed"</code> to Feed
* Added <code>class="hfeed"</code> to Feed
* Added <code>class="hentry"</code> to each Entry
* Added <code>class="hentry"</code> to each Entry
* Added <code>class="headline"</code> to each Entry Title
* Added <code>class="entry-title"</code> to each Entry Title
* Moved <code>id="###"</code> up to the Entry (and deleted the empty anchor block)
* Moved <code>id="###"</code> up to the Entry (and deleted the empty anchor block)
* Added <code>rel="bookmark"</code> to the Entry Permalinks
* Added <code>rel="bookmark"</code> to the Entry Permalinks
* Made the Entry Permalink non-relative
* Added <code>&lt;span class="entry-content"></code>...<code>&lt;/div></code> around the Entry Title (!)
* Added <code>&lt;span class="content"></code>...<code>&lt;/div></code> around the Entry Title (!)
* Added <code>&lt;span class="entry content"></code>...<code>&lt;/div></code> around the Entry Content
* Added <code>&lt;span class="content"></code>...<code>&lt;/div></code> around the Entry Content
* Added <code>&lt;abbr class="published" title="YYYY-MM-DDThh:mm:ss+ZZZZ"></code>...<code>&lt;/abbr></code> around the Entry Datetime
* Added <code>&lt;abbr class="published" title="YYYY-MM-DDThh:mm:ss+ZZZZ"></code>...<code>&lt;/abbr></code> around the Entry Datetime
* Added <code>&lt;span class="author"&gt;</code> to the poster's name
* Added <code>&lt;span class="author vcard"&gt;</code> and <code>&lt;span class="fn"&gt;</code> to the poster's name


Also note:
Also note:
Line 208: Line 209:
* cleaned up lots of crap HTML presentation stuff, with the assumption it would be fixed in the stylesheet
* cleaned up lots of crap HTML presentation stuff, with the assumption it would be fixed in the stylesheet
* this is one of the uglier transformations you're likely to see
* this is one of the uglier transformations you're likely to see
* we've respected the poster's poster apparent wish for anonimity by not adding an hCard


=== Transformation 3 ===
 
= Transformation 3 =


A media page (from [http://www.cbc.ca/story/world/national/2005/11/22/birdlfu051122.html CBC Newsworld]).
A media page (from [http://www.cbc.ca/story/world/national/2005/11/22/birdlfu051122.html CBC Newsworld]).
Line 267: Line 268:
<div class="news">
<div class="news">
  <div class="HFEED HENTRY story">
  <div class="HFEED HENTRY story">
   <h1 class="HEADLINE">China confirms new bird flu outbreaks</h1>
   <h1 class="ENTRY-TITLE">China confirms new bird flu outbreaks</h1>
   <span class="byline">Last Updated
   <span class="byline">Last Updated
   <ABBR CLASS="POSTED" TITLE="2005-11-23T04:26:18Z">Tue, 22 Nov 2005 23:26:18 EST</ABBR>
   <ABBR CLASS="POSTED" TITLE="2005-11-23T04:26:18Z">Tue, 22 Nov 2005 23:26:18 EST</ABBR>
Line 274: Line 275:


   <div class="text">
   <div class="text">
   <p CLASS="CONTENT">
   <p CLASS="ENTRY-CONTENT">
   China has confirmed three new outbreaks of bird flu, ...
   China has confirmed three new outbreaks of bird flu, ...
   </p>
   </p>
Line 297: Line 298:
     </tr>
     </tr>
   </table>
   </table>
   <p CLASS="CONTENT">State media says the new outbreaks are in...</p>
   <p CLASS="ENTRY-CONTENT">State media says the new outbreaks are in...</p>
   <p CLASS="CONTENT">The news comes a day after China announced the ...</p>
   <p CLASS="ENTRY-CONTENT">The news comes a day after China announced the ...</p>
   <p CLASS="CONTENT">In China's eastern Anhui province, authorities have ...</p>
   <p CLASS="ENTRY-CONTENT">In China's eastern Anhui province, authorities have ...</p>
   <p CLASS="CONTENT">The province says the measure will prevent domestic ...</p>
   <p CLASS="ENTRY-CONTENT">The province says the measure will prevent domestic ...</p>
   <p CLASS="CONTENT">Vietnamese health officials have confirmed that a  ...</p>
   <p CLASS="ENTRY-CONTENT">Vietnamese health officials have confirmed that a  ...</p>
   <p CLASS="CONTENT">Doctors from the health department in the northern  ...</p>
   <p CLASS="ENTRY-CONTENT">Doctors from the health department in the northern  ...</p>
   <p CLASS="CONTENT">Bird flu has killed 42 people in Vietnam since December  ...</p>
   <p CLASS="ENTRY-CONTENT">Bird flu has killed 42 people in Vietnam since December  ...</p>
   <p CLASS="CONTENT">The World Health Organization fears the H5N1 strain of  ...</p>
   <p CLASS="ENTRY-CONTENT">The World Health Organization fears the H5N1 strain of  ...</p>
   </div>
   </div>


   <p><font face="Verdana,Arial" size="1">with files from the <ADDRESS CLASS="CONTRIBUTOR">Australian Broadcasting Corporation</ADDRESS></font></p>
   <p><font face="Verdana,Arial" size="1">with files from the Australian Broadcasting Corporation</font></p>
  </div>
  </div>
  ...
  ...
Line 315: Line 316:
Changes:
Changes:
* Added <code>&lt;div class="hfeed hentry"></code> around the single entry on the page
* Added <code>&lt;div class="hfeed hentry"></code> around the single entry on the page
* Added <code>&lt;div class="headline"></code> to the Entry Title
* Added <code>&lt;div class="entry-title"></code> to the Entry Title
* Added <code>&lt;span class="content"></code>...<code>&lt;/div></code> around every single paragraph -- this looks pathological but it may be the way this would need be produced from a template. The latter part of the document could be enclosed in a single "content" div but note that we did this so the "INDEPTH" part would not be marked as content,
* Added <code>&lt;span class="entry-content"></code>...<code>&lt;/div></code> around every single paragraph -- this looks pathological but it may be the way this would need be produced from a template. The latter part of the document could be enclosed in a single "content" div but note that we did this so the "INDEPTH" part would not be marked as content,
* Added <code>&lt;abbr class="published" title="YYYYMMDDThh:mm:ss+ZZZZ"></code>...<code>&lt;/abbr></code> around the Entry Datetime
* Added <code>&lt;abbr class="published" title="YYYYMMDDThh:mm:ss+ZZZZ"></code>...<code>&lt;/abbr></code> around the Entry Datetime
* Added <code>&lt;address></code> to the CBC Newsroom
* Added <code>&lt;address></code> to the CBC Newsroom
* Added <code>&lt;address class="contributor"></code> to a contributor's name


Also note:
Also note:
Line 325: Line 325:
* There is no <code>rel="bookmark"</code> so it is assumed to be the URI of the page
* There is no <code>rel="bookmark"</code> so it is assumed to be the URI of the page


=== Transformation 4 ===
= Transformation 4 =


A bulletin board ([http://forums.punbb.org/viewtopic.php?id=9135 PunBB])
A bulletin board ([http://forums.punbb.org/viewtopic.php?id=9135 PunBB])
Line 447: Line 447:
     <h2>
     <h2>
     <span><span class="conr">#1&nbsp;</span>
     <span><span class="conr">#1&nbsp;</span>
     <a REL="BOOKMARK" href="HTTP://FORUMS.PUNBB.ORG/viewtopic.php?pid=54390#p54390">
     <a REL="BOOKMARK" href="viewtopic.php?pid=54390#p54390">
       <ABBR CLASS="POSTED" TITLE="20051016T103624-0500">2005-10-16 10:36:24</ABBR>
       <ABBR CLASS="POSTED" TITLE="20051016T103624-0500">2005-10-16 10:36:24</ABBR>
     </a></span>
     </a></span>
Line 467: Line 467:
       </div>
       </div>
       <div class="postright">
       <div class="postright">
       <h3 class="HEADLINE">PunBB 1.2.9</h3>
       <h3 class="entry-title">PunBB 1.2.9</h3>
       <div class="CONTENT postmsg">
       <div class="CONTENT postmsg">
         <p>Just a quick note this time....</p>
         <p>Just a quick note this time....</p>
Line 485: Line 485:
     <h2>
     <h2>
     <span><span class="conr">#2&nbsp;</span>
     <span><span class="conr">#2&nbsp;</span>
     <a REL="BOOKMARK" href="HTTP://FORUMS.PUNBB.ORG/viewtopic.php?pid=54392#p54392">
     <a REL="BOOKMARK" href="viewtopic.php?pid=54392#p54392">
       <ABBR CLASS="POSTED" TITLE="20051016T1105441-0500">2005-10-16 10:54:41</ABBR>
       <ABBR CLASS="POSTED" TITLE="20051016T1105441-0500">2005-10-16 10:54:41</ABBR>
     </a></span>
     </a></span>
Line 493: Line 493:
       <div class="postleft">
       <div class="postleft">
       <dl>
       <dl>
         <dt><strong><ADDRESS CLASS="VCARD"><a CLASS="URL" href="profile.php?id=5298">IdleFire</a></ADDRESS></strong></dt>
         <dt><strong><ADDRESS CLASS="AUTHOR VCARD"><a CLASS="URL FN" href="profile.php?id=5298">IdleFire</a></ADDRESS></strong></dt>


         <dd class="usertitle"><strong>Member</strong></dd>
         <dd class="usertitle"><strong>Member</strong></dd>
Line 503: Line 503:
       <div class="postright">
       <div class="postright">


       <h3 class="HEADLINE"> Re: PunBB 1.2.9</h3>
       <h3 class="entry-title"> Re: PunBB 1.2.9</h3>
       <div class="CONTENT postmsg">
       <div class="CONTENT postmsg">
         <p>...</p>
         <p>...</p>
Line 533: Line 533:
* Added <code>class="hentry"</code> to each Entry
* Added <code>class="hentry"</code> to each Entry
* Added <code>rel="bookmark"</code> to the Entry Permalinks
* Added <code>rel="bookmark"</code> to the Entry Permalinks
* Made the Entry Permalink non-relative
* Added <code>&lt;span class="entry-title"></code>...<code>&lt;/div></code> around the Entry Title
* Added <code>&lt;span class="headline"></code>...<code>&lt;/div></code> around the Entry Title
* Added <code>&lt;span class="entry-content"></code>...<code>&lt;/div></code> around the Entry Content
* Added <code>&lt;span class="content"></code>...<code>&lt;/div></code> around the Entry Content
* Added <code>&lt;abbr class="posted" title="YYYYMMDDThh:mm:ss+ZZZZ"></code>...<code>&lt;/abbr></code> around the Entry Datetime
* Added <code>&lt;abbr class="posted" title="YYYYMMDDThh:mm:ss+ZZZZ"></code>...<code>&lt;/abbr></code> around the Entry Datetime
* Added <code>&lt;address></code> to the poster's name
* Added <code>&lt;address class="author vcard"></code> to the poster's name


Also note:
Also note:
* We did not need to add <code>id="###"</code> to the Entry
* We did not need to add <code>id="###"</code> to the Entry


=== More Examples ===
= More Examples =

Revision as of 21:10, 15 March 2006

hAtom examples

Work in progress!

Contributors

Transformation 1

A well behaved weblog.

Original: 

<body>
 <div id="wrap">
  <div id="content">
   ...
   <div class="entry">
    <h3 id="post-60">
     <a href="http://www.microformats.org/blog/..." rel="bookmark" title="...">Wiki Attack</a>
    </h3>
    <p>We had a bit of trouble with ...</p>
    <p>We’ve restored the wiki and ...</p>
    <p>If anyone is working to combat said spammers ...</p>

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

    <ul class="post-info">
     <li>
      <a href="http://www.microformats.org/blog/..." rel="bookmark" title="...">October 10th, 2005</a>
     </li>
     <li>
      <address class="vcard"><a class="url fn" href="http://theryanking.com">Ryan King</a></address>
     </li>
     <li>
      <a href="http://www.microformats.org/blog/...">4 Comments</a>
     </li>
    </ul>
   </div>
   
   <div class="entry">
   ....
   </div>
   ...
  </div>
 </div>
</body>

Transformed to hAtom compliant (shown in UPPER CASE for visibility only): 

<body>
 <div id="wrap">
  <div CLASS="HFEED" id="content">
   ...
   <div class="HENTRY entry" ID="post-60">
    <h3 class="ENTRY-TITLE">
     <a href="http://www.microformats.org/blog/..." rel="bookmark" title="...">Wiki Attack</a>
    </h3>
    <DIV CLASS="ENTRY-CONTENT">
     <p>We had a bit of trouble with ...</p>
     <p>We’ve restored the wiki and ...</p>
     <p>If anyone is working to combat said spammers ...</p>
    </DIV>

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

    <ul class="post-info">
     <li>
      <a href="http://www.microformats.org/blog/..." rel="bookmark" 
        title="..."><ABBR CLASS="PUBLISHED" TITLE="2005-10-10T14:07:00-07:00">October 10th, 2005</ABBR></a>
     </li>
     <li>
      <address class="vcard AUTHOR"><a class="url fn" href="http://theryanking.com">Ryan King</a></address>
     </li>
     <li>
      <a href="http://www.microformats.org/blog/...">4 Comments</a>
     </li>
    </ul>
   </div>
   
   <div class="HENTRY entry" ID="post-59">
   ....
   </div>
   ...
  </div>
 </div>
</body>

Changes:

  • Added class="hfeed" to Feed
  • Added class="hentry" to Entry
  • Added class="headline" to Entry Title
  • Moved id="###" from <h3> to Entry
  • Added <div class="entry-content">...</div> around the Entry Content
  • Added <abbr class="published" title="YYYY-MM-DDThh:mm:ss+ZZ:ZZ">...</abbr> around the Entry Datetime
  • Added class="author" to <address>

Also note:

  • We did not need to add a <address> element
  • We did not need to add a <h#> element
  • We did not need to add a rel="bookmark" to Entry Permalinks

Transformation 2

A not-so well behaved weblog (an older blogspot weblog)

Original: 

<body bgcolor="...">

 <div class="posts">
  <a name="112993192128302715"> </a><br>
  <div style="clear:both;"></div><strong>Nelson's final prayer</strong> 
  written on the night before Trafalgar:<blockquote>May the Great God, ... heart.
  <div style="clear:both; padding-bottom: 0.25em;"></div>
  <br>
  <span class="byline">
   posted by Natalie at 
   <a href="2005_10_16_nataliesolent_archive.html#112993192128302715">9:49 PM</a>
  </span>
 </div>

 <div class="posts">
  <a name="112993022840118939"> </a>
  <br>
  <div style="clear:both;"></div><strong>I really, truly </strong>didn't go ... view.
  <div style="clear:both; padding-bottom: 0.25em;"></div>
  <br>
  <span class="byline">
   posted by Natalie at 
   <a href="2005_10_16_nataliesolent_archive.html#112993022840118939">9:28 PM</a>
  </span>
 </div>
 ...

</body>

Transformed to hAtom compliant (shown in UPPER CASE for visibility only): 

<body bgcolor="...">

 <DIV CLASS="HFEED">
  <div class="HENTRY posts" ID="112993192128302715">
   <strong CLASS="ENTRY-TITLE ENTRY-CONTENT">
    Nelson's final prayer
   </strong> 
   <SPAN CLASS="ENTRY-CONTENT">
    written on the night before Trafalgar:<blockquote>May the Great God, ... heart.
   </SPAN>
   <DIV>
    <span class="byline">posted by <span class="author vcard"><span class="fn">Natalie</span></span> at 
     <a REL="BOOKMARK" href="HTTP://NATALIESOLENT.BLOGSPOT.COM/2005_10_16_nataliesolent_archive.html#112993192128302715">
     <ABBR CLASS="PUBLISHED" TITLE="2005-10-24T09:49:00-00:00">9:49 PM</ABBR></a>
    </span>
   </DIV>
  </div>

  <div class="HENTRY posts" ID="112993022840118939">
   <strong CLASS="HEADING CONTENT">I really, truly </strong>
   <SPAN CLASS="ENTRY-CONTENT">
    didn't go ... view.
   </SPAN>
   <DIV>
    <span class="byline">
     posted by <span class="author">Natalie</span> at 
     <a REL="BOOKMARK" href="2005_10_16_nataliesolent_archive.html#112993022840118939">
     <ABBR CLASS="PUBLISHED" TITLE="2005-10-24T09:49:00-00:00">9:28 PM</ABBR></a>
    </span>
   </DIV>
  </div>
 ...
 </DIV>

</body>

Changes:

  • Added class="hfeed" to Feed
  • Added class="hentry" to each Entry
  • Added class="entry-title" to each Entry Title
  • Moved id="###" up to the Entry (and deleted the empty anchor block)
  • Added rel="bookmark" to the Entry Permalinks
  • Added <span class="entry-content">...</div> around the Entry Title (!)
  • Added <span class="entry content">...</div> around the Entry Content
  • Added <abbr class="published" title="YYYY-MM-DDThh:mm:ss+ZZZZ">...</abbr> around the Entry Datetime
  • Added <span class="author vcard"> and <span class="fn"> to the poster's name

Also note:

  • the ID/fragments are not XHTML -- this is a big problem.
  • there are multiple content blocks, because Natalie Solent embeds the title in the content
  • cleaned up lots of crap HTML presentation stuff, with the assumption it would be fixed in the stylesheet
  • this is one of the uglier transformations you're likely to see


Transformation 3

A media page (from CBC Newsworld).

Original: 

<div class="news">
 <div class="story">
  <h1>China confirms new bird flu outbreaks</h1>
  <span class="byline">Last Updated Tue, 22 Nov 2005 23:26:18 EST</span>
  <div class="text"><a href="/news/credit.html">CBC News</a></div>

  <div class="text">
   <p>
   China has confirmed three new outbreaks of bird flu, ...
   <p>
    <ul>
     <li><font SIZE="1">INDEPTH: </font><font SIZE="2"> 
     <a href="http://www.cbc.ca/news/background/avianflu/">Avian Flu</a></font>
    </ul>
   </p>
   <table align="right" cellpadding="0" cellspacing="4" hspace="4" width="220">
    <tr>
    <td align="center">
    <img src="http://www.cbc.ca/gfx/pix/birdflu_china_cp_7707271.jpg" width="220" height="223" hspace="3" border="0">
    </td>
    </tr>
    <tr>
    <td align="center">
    <div class="caption">
    <font size="1" face="verdana,arial"><i></i></font>
    </div>
    </td>
    </tr>
   </table>
   <p>State media says the new outbreaks are in...</p>
   <p>The news comes a day after China announced the ...</p>
   <p>In China's eastern Anhui province, authorities have ...</p>
   <p>The province says the measure will prevent domestic ...</p>
   <p>Vietnamese health officials have confirmed that a  ...</p>
   <p>Doctors from the health department in the northern  ...</p>
   <p>Bird flu has killed 42 people in Vietnam since December  ...</p>
   <p>The World Health Organization fears the H5N1 strain of  ...</p>
  </div>

  <p><font face="Verdana,Arial" size="1">with files from the Australian Broadcasting Corporation</font></p>
 </div>
 ...
</div>

Transformed to hAtom compliant (shown in UPPER CASE for visibility only): 

<div class="news">
 <div class="HFEED HENTRY story">
  <h1 class="ENTRY-TITLE">China confirms new bird flu outbreaks</h1>
  <span class="byline">Last Updated
  	<ABBR CLASS="POSTED" TITLE="2005-11-23T04:26:18Z">Tue, 22 Nov 2005 23:26:18 EST</ABBR>
  </span>
  <ADDRESS CLASS="VCARD"><div class="text"><a CLASS="URL" href="/news/credit.html">CBC News</a></div></ADDRESS>

  <div class="text">
   <p CLASS="ENTRY-CONTENT">
   China has confirmed three new outbreaks of bird flu, ...
   </p>
   <p>
    <ul>
     <li><font SIZE="1">INDEPTH: </font><font SIZE="2"> 
     <a href="http://www.cbc.ca/news/background/avianflu/">Avian Flu</a></font>
    </ul>
   </p>
   <table align="right" cellpadding="0" cellspacing="4" hspace="4" width="220">
    <tr>
    <td align="center">
    <img src="http://www.cbc.ca/gfx/pix/birdflu_china_cp_7707271.jpg" width="220" height="223" hspace="3" border="0">
    </td>
    </tr>
    <tr>
    <td align="center">
    <div class="caption">
    <font size="1" face="verdana,arial"><i></i></font>
    </div>
    </td>
    </tr>
   </table>
   <p CLASS="ENTRY-CONTENT">State media says the new outbreaks are in...</p>
   <p CLASS="ENTRY-CONTENT">The news comes a day after China announced the ...</p>
   <p CLASS="ENTRY-CONTENT">In China's eastern Anhui province, authorities have ...</p>
   <p CLASS="ENTRY-CONTENT">The province says the measure will prevent domestic ...</p>
   <p CLASS="ENTRY-CONTENT">Vietnamese health officials have confirmed that a  ...</p>
   <p CLASS="ENTRY-CONTENT">Doctors from the health department in the northern  ...</p>
   <p CLASS="ENTRY-CONTENT">Bird flu has killed 42 people in Vietnam since December  ...</p>
   <p CLASS="ENTRY-CONTENT">The World Health Organization fears the H5N1 strain of  ...</p>
  </div>

  <p><font face="Verdana,Arial" size="1">with files from the Australian Broadcasting Corporation</font></p>
 </div>
 ...
</div>

Changes:

  • Added <div class="hfeed hentry"> around the single entry on the page
  • Added <div class="entry-title"> to the Entry Title
  • Added <span class="entry-content">...</div> around every single paragraph -- this looks pathological but it may be the way this would need be produced from a template. The latter part of the document could be enclosed in a single "content" div but note that we did this so the "INDEPTH" part would not be marked as content,
  • Added <abbr class="published" title="YYYYMMDDThh:mm:ss+ZZZZ">...</abbr> around the Entry Datetime
  • Added <address> to the CBC Newsroom

Also note:

  • We may the document more XHTML compliant
  • There is no rel="bookmark" so it is assumed to be the URI of the page

Transformation 4

A bulletin board (PunBB)

Original: 

<body>
 <div id="punwrap">
  <div id="punviewtopic" class="pun">

   <div id="brdheader" class="block">
    ... header stuff ...
   </div>

   <div id="announce" class="block">
    ... announcement stuff ...
   </div>

   <div class="linkst">
    ... controls for the blog
   </div>

   <div id="p54390" class="blockpost rowodd firstpost">
    <h2>
     <span><span class="conr">#1 </span>
     <a href="viewtopic.php?pid=54390#p54390">2005-10-16 10:36:24</a></span>
    </h2>
    <div class="box">
     <div class="inbox">
      <div class="postleft">
       <dl>
        <dt><strong><a href="profile.php?id=2">Rickard</a></strong></dt>

        <dd class="usertitle"><strong>PunBB Developer</strong></dd>
        <dd class="postavatar"><img src="img/avatars/2.png" width="60" height="60" alt="" /></dd>
        <dd>From: 127.0.0.1</dd>
        <dd>Registered: 2001-11-02</dd>
        <dd>Posts: 7806</dd>
        <dd class="usercontacts"><a href="http://www.punbb.org/">Website</a></dd>

       </dl>
      </div>
      <div class="postright">
       <h3>PunBB 1.2.9</h3>
       <div class="postmsg">
        <p>Just a quick note this time....</p>

       </div>
       <div class="postsignature"><hr />"Programming is like sex: ...</div>
      </div>
      <div class="clearer"></div>
      <div class="postfootleft"><p>Offline</p></div>
      <div class="postfootright"><div> </div></div>
     </div>
    </div>

   </div>

   <div id="p54392" class="blockpost roweven">
    <h2><span><span class="conr">#2 </span><a href="viewtopic.php?pid=54392#p54392">2005-10-16 10:54:41</a></span></h2>
    <div class="box">
     <div class="inbox">
      <div class="postleft">
       <dl>
        <dt><strong><a href="profile.php?id=5298">IdleFire</a></strong></dt>

        <dd class="usertitle"><strong>Member</strong></dd>
        <dd class="postavatar"></dd>
        <dd>Registered: 2005-10-14</dd>
        <dd>Posts: 27</dd>
       </dl>
      </div>
      <div class="postright">

       <h3> Re: PunBB 1.2.9</h3>
       <div class="postmsg">
        <p>...</p>
       </div>
      </div>
      <div class="clearer"></div>
      <div class="postfootleft"><p>Offline</p></div>

      <div class="postfootright"><div> </div></div>
     </div>
    </div>
   </div>
   
   ... more entries ...

   <div id="brdfooter" class="block">
    ... footer stuff ...
   </div>

  </div>
 </div>
</body>

Transformed to hAtom compliant (changes shown in UPPER CASE for visibility only): 

<body>
 <div id="punwrap">
  <div id="punviewtopic" class="pun">

   <div id="brdheader" class="block">
    ... header stuff ...
   </div>

   <div id="announce" class="block">
    ... announcement stuff ...
   </div>

   <div class="linkst">
    ... controls for the blog
   </div>

   <DIV CLASS="HFEED">
   <div id="p54390" class="HENTRY blockpost rowodd firstpost">
    <h2>
     <span><span class="conr">#1 </span>
     <a REL="BOOKMARK" href="viewtopic.php?pid=54390#p54390">
      <ABBR CLASS="POSTED" TITLE="20051016T103624-0500">2005-10-16 10:36:24</ABBR>
     </a></span>
    </h2>
    <div class="box">
     <div class="inbox">
      <div class="postleft">
       <dl>
        <dt><strong><ADDRESS><a href="profile.php?id=2">Rickard</a></ADDRESS></strong></dt>

        <dd class="usertitle"><strong>PunBB Developer</strong></dd>
        <dd class="postavatar"><img src="img/avatars/2.png" width="60" height="60" alt="" /></dd>
        <dd>From: 127.0.0.1</dd>
        <dd>Registered: 2001-11-02</dd>
        <dd>Posts: 7806</dd>
        <dd class="usercontacts"><a href="http://www.punbb.org/">Website</a></dd>

       </dl>
      </div>
      <div class="postright">
       <h3 class="entry-title">PunBB 1.2.9</h3>
       <div class="CONTENT postmsg">
        <p>Just a quick note this time....</p>

       </div>
       <div class="postsignature"><hr />"Programming is like sex: ...</div>
      </div>
      <div class="clearer"></div>
      <div class="postfootleft"><p>Offline</p></div>
      <div class="postfootright"><div> </div></div>
     </div>
    </div>

   </div>

   <div id="p54392" class="HENTRY blockpost roweven">
    <h2>
     <span><span class="conr">#2 </span>
     <a REL="BOOKMARK" href="viewtopic.php?pid=54392#p54392">
      <ABBR CLASS="POSTED" TITLE="20051016T1105441-0500">2005-10-16 10:54:41</ABBR>
     </a></span>
    </h2>
    <div class="box">
     <div class="inbox">
      <div class="postleft">
       <dl>
        <dt><strong><ADDRESS CLASS="AUTHOR VCARD"><a CLASS="URL FN" href="profile.php?id=5298">IdleFire</a></ADDRESS></strong></dt>

        <dd class="usertitle"><strong>Member</strong></dd>
        <dd class="postavatar"></dd>
        <dd>Registered: 2005-10-14</dd>
        <dd>Posts: 27</dd>
       </dl>
      </div>
      <div class="postright">

       <h3 class="entry-title"> Re: PunBB 1.2.9</h3>
       <div class="CONTENT postmsg">
        <p>...</p>
       </div>
      </div>
      <div class="clearer"></div>
      <div class="postfootleft"><p>Offline</p></div>

      <div class="postfootright"><div> </div></div>
     </div>
    </div>
   </div>
   
   ... more entries ...
   </DIV>

   <div id="brdfooter" class="block">
    ... footer stuff ...
   </div>

  </div>
 </div>
</body>


Changes:

  • Added <div class="hfeed"> around the entries (as opposed to an existing <div that enclosed more than entries.
  • Added class="hentry" to each Entry
  • Added rel="bookmark" to the Entry Permalinks
  • Added <span class="entry-title">...</div> around the Entry Title
  • Added <span class="entry-content">...</div> around the Entry Content
  • Added <abbr class="posted" title="YYYYMMDDThh:mm:ss+ZZZZ">...</abbr> around the Entry Datetime
  • Added <address class="author vcard"> to the poster's name

Also note:

  • We did not need to add id="###" to the Entry

More Examples

Retrieved from "http://microformats.org/wiki/index.php?title=hatom-examples&oldid=5413"