hatom: Difference between revisions

From Microformats Wiki
Jump to navigation Jump to search
Line 436: Line 436:
   ...
   ...
   <div class="HENTRY entry" ID="post-60">
   <div class="HENTRY entry" ID="post-60">
     <h3>
     <h3 class="HEADING">
     <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>
Line 478: Line 478:
* Added <code>class="hfeed"</code> to Feed
* Added <code>class="hfeed"</code> to Feed
* Added <code>class="hentry"</code> to Entry
* Added <code>class="hentry"</code> to Entry
* Added <code>class="heading"</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="content"></code>...<code>&lt;/div></code> around the Entry Content

Revision as of 09:28, 10 January 2006

hAtom

hAtom is a microformat for content that can be syndicated, primarily but not exclusively weblog postings. hAtom is a strongly based on a subset of the Atom syndication format; every concept in hAtom has a corresponding definition in Atom.

This microformat is a draft; please address your concerns, issues, comments, etc. in hatom-issues.

Draft Specification

Editor

Authors

Contributors

Copyright

This specification is (C) 2005-2024 by the authors. However, the authors intend to submit (or already have submitted, see details in the spec) this specification to a standards body with a liberal copyright/licensing policy such as the GMPG, IETF, and/or W3C. Anyone wishing to contribute should read their copyright principles, policies and licenses (e.g. the GMPG Principles) and agree to them, including licensing of all contributions under all required licenses (e.g. CC-by 1.0 and later), before contributing.

Patents

This specification is subject to a royalty free patent policy, e.g. per the W3C Patent Policy, and IETF RFC3667 & RFC3668.

Introduction

Semantic XHTML Design Principles

Note: the Semantic XHTML Design Principles were written primarily within the context of developing hCard and hCalendar, thus it may be easier to understand these principles in the context of the hCard design methodology (i.e. read that first). Tantek

XHTML is built on XML, and thus XHTML based formats can be used not only for convenient display presentation, but also for general purpose data exchange. In many ways, XHTML based formats exemplify the best of both HTML and XML worlds. However, when building XHTML based formats, it helps to have a guiding set of principles.

  1. Reuse the schema (names, objects, properties, values, types, hierarchies, constraints) as much as possible from pre-existing, established, well-supported standards by reference. Avoid restating constraints expressed in the source standard. Informative mentions are ok.
    1. For types with multiple components, use nested elements with class names equivalent to the names of the components.
    2. Plural components are made singular, and thus multiple nested elements are used to represent multiple text values that are comma-delimited.
  2. Use the most accurately precise semantic XHTML building block for each object etc.
  3. Otherwise use a generic structural element (e.g. <span> or <div>), or the appropriate contextual element (e.g. an <li> inside a <ul> or <ol>).
  4. Use class names based on names from the original schema, unless the semantic XHTML building block precisely represents that part of the original schema. If names in the source schema are case-insensitive, then use an all lowercase equivalent. Components names implicit in prose (rather than explicit in the defined schema) should also use lowercase equivalents for ease of use. Spaces in component names become dash '-' characters.
  5. Finally, if the format of the data according to the original schema is too long and/or not human-friendly, use <abbr> instead of a generic structural element, and place the literal data into the 'title' attribute (where abbr expansions go), and the more brief and human readable equivalent into the element itself. Further informative explanation of this use of <abbr>: Human vs. ISO8601 dates problem solved

Format

In General

The Atom Syndication Format provides the conceptual basis for this microformat, with the following caveats:

  • Atom provides a lot more functionality that we need for a "blog post" microformat, so we've taken the minimal number of elements needed. This can (and probably should) be expanded.
  • the "logical" model of hAtom is that of Atom. If there is a conflict, Atom should be taken as correct.
  • the "physical" model of hAtom -- the actual writing of elements -- is a lot more varied than Atom provides for, due to the variety of ways weblogs are actually produced in the wild. The hAtom microformat provides a number of rules for "briding the gap"
for example, if an entry is missing an author (required by Atom), it is assumed to be that of the XHTML page

Schema

Schema elements are based on the Atom nomenclature and follow the microformat pattern of prefixing a unique identifier (in this case, atom) on the outermost container elements -- the Feed or Entry. The parts of this microformat are based on analysis of many weblog, bulletin board and media posts and can be read blog-post-brainstorming#Discovered_Elements. Note the renaming of 'EntryGroup' to 'Feed' to be more consistent with Atom ternminology.

Nomenclature

Note: Please see the hatom-issues#New_Nomenclature document for discussion on property names.

Concept Atom Identifier hAtom Microformat Usage
Feed atom:feed Add class="hfeed"
Entry atom:entry Add class="hentry"; if practical, also define id="unique-identifier" to the Entry.
Entry Title atom:title Add class="headline". Using <h#> also is encouraged.
Entry Content atom:content Add class="content" to all appropriate blocks. Multiple Entry Content blocks are logically considered one concatenated atom:content equivalent.
Entry Summary atom:summary Add class="excerpt" to all appropriate blocks. Multiple Entry Summary blocks are logically considered one concatenated atom:summary equivalent.
Entry Permalink atom:link Add rel="bookmark".
Entry Published atom:published Use <abbr class="published" title="YYYYMMYYThh:mm:ss±ZZ:ZZ">...</abbr>, following the datetime-design-pattern.
Entry Updated atom:updated Use <abbr class="updated" title="YYYYMMYYThh:mm:ss±ZZ:ZZ">...</abbr>, following the datetime-design-pattern.
Entry Author atom:author Add class="author". Using <address class="author">...</address> is recommended. A hCard SHOULD be added.

Nesting Rules

Concept Nests In hAtom Opaque Cardinality Logical Cardinality
Informative
Feed HTML document No 1-N 1-N
Entry Feed No 0-N 0-N
Entry Title Entry
Entry Permalink 		No 0-N 0-1
Entry Content Entry Yes 0-N 0-1
Entry Summary Entry Yes 0-N 0-1
Entry Permalink Entry
Entry Title
Entry Published 		No 0-N 1
Entry Published Entry
Entry Permalink 		No 0-N 0-1
Entry Updated Entry
Entry Permalink 		No 0-N 1
Entry Author Entry Yes 0-N 1-N
hAtom Opaque

"hAtom Opaque" specifies whether a hAtom parser should "look inside" the element for further hAtom content. If there are multiple rules applied to the same element take the OR of the two (i.e. "Yes" always wins)

hAtom Opaque is designed to make parsing rules less ambiguous. In particular, it allows "quoted" hAtom elements (from another blog being blockquoted, for example) ti be ignored. It also allows 'embedded' hAtom to be potentially delivered within hAtom itself, and to prevent accidental 'leaking' of other microformat information up into the hAtom container.
OPEN ISSUE: how is rel-tag treated inside content blocks, since this is where we are likely to find them.
Cardinality

How many times can an element of the given type appear in it's nesting/parent element.

Logical Cardinality

This column is informative. From a modeling/logical perspective, the number of times can an element appear.

This is all rule dependent, see below. For example, an Entry Permalink may appear 6 times, but each one must be the same value; an Entry Content element may appear 3 times, but they are all concatenated together to make a single logical element.

Deferred Elements

These elements (and many others) from Atom will not be in hAtom 1.0.

Concept Atom Identifier hAtom Microformat Usage
Feed atom:feed
Feed Title atom:feed/title
Feed Permalink atom:feed/link
Entry Contributor atom:entry/contributor

Rules and Definitions

See the Nesting Rules section above for placement of these elements.

Feed
  • an XHTML Feed element is identified by class="hfeed"
  • a Feed element represents the concept of an atom feed
In particular, as a container for Entrys.
  • the Feed element is required, even if there is a single Entry
  • hAtom documents MAY have multiple, non-nested Feed elements
This may happen on news pages, or weblogs with "mini-blogs" on the sidebar.

DavidJanes: We need to work on this section. Is hfeed always going to be required?

Entry
  • an Entry element is identified by class="hentry"
  • an Entry element represents the concept of an atom entry
  • a weblog entry MUST be enclosed in a single Entry element
That's what it's for, after all.
  • an Entry MUST have an enclosing Feed element
  • This enclosing element can be the same as the Entry -- i.e. class="hfeed hentry" is OK for feeds with a single entry.
Entry Title
  • an Entry Title element is identified by class="title"
  • an Entry Title element alternately be identified by <h#>
  • an Entry Title element represents the concept of an atom entry title
Disambiguation
  • the first hAtom valid element with a class="title" is the Entry Title
hAtom valid meaning somewhere where we expect it (like not inside Entry Content, for example).
  • otherwise, the first hAtom valid <h#> element to appear in an hAtom document is the Entry Title
  • otherwise, the Entry Title is the empty string
Atom does not allow for an entry not to have a title.
Entry Content
  • an Entry Content element is identified by class="content"
  • an Entry Content element represents the concept of an atom content
  • an Entry MAY have 0 or more Entry Content elements
We recognize this varies from the Atom spec: see the next rule.
  • the "logical Entry Content" of an Entry is the concatenation, in order of appearance, of all the Entry Contents within the Entry
Many weblogs split content into multiple sections with a "Read More" link and javascript tricks. This is also needed in cases where Entry Titles are coded inline and are considered part of the content.
  • the "logical Entry Content" MUST be complete; that is, contain the entire content of the Entry
Otherwise it should be marked as Entry Summary.
Entry Summary
  • an Entry Summary element is identified by class="excerpt"
  • an Entry Summary element represents the concept of an atom summary
  • an Entry MAY have 0 or more Entry Summary elements
We recognize this varies from the Atom spec: see the next rule.
  • the "logical Entry Summary" of an Entry is the concatenation, in order of appearance, of all the Entry Summarys within the Entry
Entry Permalink
  • an Entry Permalink element is identified by rel="bookmark"
We recognize that we have broken from Atom terminology at this point. See hatom-issues for discussion.
This may be a microformat in itself: rel-bookmark.
  • an Entry Permalink element represents the concept of an atom link in an entry
  • Entry Permalinks SHOULD be absolute URIs
  • Entry Permalinks MUST be the same as the atom:link (or rss:link) used in syndication feeds
The intention of the previous two rules to gently force people to use strings that can be byte compared for equivalence. In general, the canonical URI should be the link used in an Atom entry.
Is there a problem with FeedBurner?
  • if an Entry has multiple elements marked as the Entry Permalink, they MUST have exactly the same URI
  • an Entry SHOULD have an Entry Permalink
There are circumstances (such as media pages) where this won't happen. See the next rule.
  • there can be at most 1 Entry in an XHTML document without an Entry Permalink; the Entry Permalink of this Entry is the URI of the page
This rule is needed for media pages (i.e. a news article on cnn.com). There is some ugliness of with this because the URI could be non-canonical.
Disambiguation
  • The first valid element in an Entry marked as an Entry Permalink is the Entry Permalink
Entry Published
  • an Entry Published element is identified by class="published"
  • a Entry Published element represents the concept of atom published
  • the machine readable datetime should be encoded with an <abbr> element using the datetime-design-pattern; the machine readable datetime should be complete, that is, specified to the second with the timezone included
This is to be consistent with the Atom Datetime Construct.
  • optionally, this can be specified by an HTML element with the ISO datetime in the text.
This is a little uglier for the reader, but it's possible.
Disambiguation
  • The first valid element in an Entry marked as an Entry Published is the Entry Published element
Entry Updated
  • an Entry Updated element is identified by class="updated"
  • a Entry Updated element represents the concept of atom updated
  • the machine readable datetime should be encoded with an <abbr> element using the datetime-design-pattern; the machine readable datetime should be complete, that is, specified to the second with the timezone included
This is to be consistent with the Atom Datetime Construct.
  • if there is no Entry Updated element, the value is assumed to be that of Entry Published
Entry Published is more often available in weblog templates, so we're going with that.
  • if there is no Entry Updated and Entry Published elements, transformation to Atom is problematic
This is because a published element is required. Suggestions would be appreciated here.
  • optionally, this can be specified by an HTML element with the ISO datetime in the text.
This is a little uglier for the reader, but it's possible.
Disambiguation
  • The first valid element in an Entry marked as an Entry Updated is the Entry Updated element
Entry Author
  • an Entry Author element is represented by class="author"
  • an Entry Author element SHOULD use an XHTML <address> element
  • an Entry Author element represents the concept of an atom author
  • an Entry Author element SHOULD contain an hCard
If it does not, just consider the text to effectively be the FN. hReview also considers a hCard to be a SHOULD, not a MUST.
  • an Entry MAY have 0 or more Entry Author elements
  • if an Entry has 0 Entry Author elements, the "logical Entry Author" is assumed to be the author of the XHTML page
Atom requires at least one Author

XMDP Profile

<dl class="profile">
 <dt>class</dt>
 <dd><p>
  <a rel="help" href="http://www.w3.org/TR/html401/struct/global.html#adef-class">
   HTML4 definition of the 'class' attribute.</a>
  This meta data profile defines some 'class' attribute values (class names) 
  and their meanings as suggested by a 
  <a href="http://www.w3.org/TR/WD-htmllink-970328#profile">
   draft of "Hypertext Links in HTML"</a>.
  <dl>
   <dt>hfeed</dt>
   <dd>
    The concept of atom:feed from 
    <a href="http://www.atomenabled.org/developers/syndication/atom-format-spec.php">The Atom Syndication Format</a>, 
    constrained and modified as per the <a href="http://microformats.org/wiki/hatom">hAtom microformat spec</a>.
   </dd>
   <dt>hentry</dt>
   <dd>
    The concept of atom:entry from 
    <a href="http://www.atomenabled.org/developers/syndication/atom-format-spec.php">The Atom Syndication Format</a>, 
    constrained and modified as per the <a href="http://microformats.org/wiki/hatom">hAtom microformat spec</a>.
   </dd>
   <dt>content</dt>
   <dd>
    The concept of atom:content from 
    <a href="http://www.atomenabled.org/developers/syndication/atom-format-spec.php">The Atom Syndication Format</a>, 
    constrained and modified as per the <a href="http://microformats.org/wiki/hatom">hAtom microformat spec</a>.
   </dd>
   <dt>excerpt</dt>
   <dd>
    The concept of atom:summary from 
    <a href="http://www.atomenabled.org/developers/syndication/atom-format-spec.php">The Atom Syndication Format</a>, 
    constrained and modified as per the <a href="http://microformats.org/wiki/hatom">hAtom microformat spec</a>.
   </dd>
   <dt>bookmark</dt>
   <dd>
    The concept of atom:link (without any "rel") with an atom:entry from 
    <a href="http://www.atomenabled.org/developers/syndication/atom-format-spec.php">The Atom Syndication Format</a>, 
    constrained and modified as per the <a href="http://microformats.org/wiki/hatom">hAtom microformat spec</a>.
   </dd>
   <dt>published</dt>
   <dd>
    The concept of atom:published from 
    <a href="http://www.atomenabled.org/developers/syndication/atom-format-spec.php">The Atom Syndication Format</a>, 
    constrained and modified as per the <a href="http://microformats.org/wiki/hatom">hAtom microformat spec</a>.
   </dd>
   <dt>updated</dt>
   <dd>
    The concept of atom:updatedfrom 
    <a href="http://www.atomenabled.org/developers/syndication/atom-format-spec.php">The Atom Syndication Format</a>, 
    constrained and modified as per the <a href="http://microformats.org/wiki/hatom">hAtom microformat spec</a>.
   </dd>
   <dt>author</dt>
   <dd>
    The concept of atom:author from 
    <a href="http://www.atomenabled.org/developers/syndication/atom-format-spec.php">The Atom Syndication Format</a>, 
    constrained and modified as per the <a href="http://microformats.org/wiki/hatom">hAtom microformat spec</a>.
   </dd>
  </dl>
 </dd>
</dl>

Parsing Details

Examples

This section is informative.

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="HEADING">
     <a href="http://www.microformats.org/blog/..." rel="bookmark" title="...">Wiki Attack</a>
    </h3>
    <DIV CLASS="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"><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="heading" to Entry Title
  • Moved id="###" from <h3> to Entry
  • Added <div class="content">...</div> around the Entry Content
  • Added <abbr class="PUBLISHED" title="YYYY-MM-DDThh:mm:ss+ZZ:ZZ">...</abbr> around the Entry Datetime

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="HEADING CONTENT">
    Nelson's final prayer
   </strong> 
   <SPAN CLASS="CONTENT">
    written on the night before Trafalgar:<blockquote>May the Great God, ... heart.
   </SPAN>
   <DIV>
    <span class="byline">posted by <address>Natalie</address> 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="CONTENT">
    didn't go ... view.
   </SPAN>
   <DIV>
    <span class="byline">
     posted by <address>Natalie</address> at 
     <a REL="BOOKMARK" href="HTTP://NATALIESOLENT.BLOGSPOT.COM/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
  • Moved id="###" up to the Entry (and deleted the empty anchor block)
  • Added rel="bookmark" to the Entry Permalinks
  • Made the Entry Permalink non-relative
  • Added <span class="heading">...</div> around the Entry Title
  • Added <span class="content">...</div> around the Entry Title (!)
  • Added <span class="content">...</div> around the Entry Content
  • Added <abbr class="published" title="YYYY-MM-DDThh:mm:ss+ZZZZ">...</abbr> around the Entry Datetime
  • Added <address> to the poster's name

Also note:

  • the ID/fragments are not XHTML. Blech.
  • 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
  • we've respected the poster's poster apparent wish for anonimity by not adding an hCard

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="FEED ENTRY story">
  <h1>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="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="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="CONTENT">In China's eastern Anhui province, authorities have ...</p>
   <p CLASS="CONTENT">The province says the measure will prevent domestic ...</p>
   <p CLASS="CONTENT">Vietnamese health officials have confirmed that a  ...</p>
   <p CLASS="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="CONTENT">The World Health Organization fears the H5N1 strain of  ...</p>
  </div>

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

Changes:

  • Added <div class="feed entry"> around the single entry on the page
We have to make sure the nesting rules reflect nesting at the same level
  • Added <span class="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
  • Added <address class="contributor"> to a contributor's name

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
  • The Entry Title was correctly marked with a <h1> element

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="FEED">
   <div id="p54390" class="ENTRY blockpost rowodd firstpost">
    <h2>
     <span><span class="conr">#1 </span>
     <a REL="BOOKMARK" href="HTTP://FORUMS.PUNBB.ORG/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>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="ENTRY blockpost roweven">
    <h2>
     <span><span class="conr">#2 </span>
     <a REL="BOOKMARK" href="HTTP://FORUMS.PUNBB.ORG/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="VCARD"><a CLASS="URL" 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> 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="feed"> around the entries (as opposed to an existing <div that enclosed more than entries.
  • Added class="entry" to each Entry
  • Added rel="bookmark" to the Entry Permalinks
  • Made the Entry Permalink non-relative
  • Added <span class="title">...</div> around the Entry Title
  • Added <span class="content">...</div> around the Entry Content
  • Added <abbr class="posted" title="YYYYMMDDThh:mm:ss+ZZZZ">...</abbr> around the Entry Datetime
  • Added <address> to the poster's name

Also note:

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

More Examples

See hatom-examples.

Examples in the wild

This section is informative.

Implementations

This section is informative.


References

Normative References

Informative References

Specifications That Use hAtom

Similar Work

Work in progress

This specification is a work in progress. As additional aspects are discussed, understood, and written, they will be added. There is a separate document where we are keeping our brainstorms and other explorations relating to hAtom:

Hints and Tips

CSS tips

HTML typically styles address as a block level element in an italic font. This will make it inline and plain within hAtom elements: 

.entry address {
    display: inline;
    font-weight: normal;
    font-style: normal;
}

HTML typically puts a dotted line under <abbr> elements. This will put postage paid to that for Entry Updated and Entry Posted: 

.entry abbr.updated, .entry abbr.posted {
  font-style: normal;
  border: none;
}

MovableType Template

A datetime encoded in an ABBR element can be produced with the following template code: 

<abbr 
 class="posted" 
 title="<$MTEntryDate format="%Y%m%dT%H%M%S"$><$MTBlogTimezone
 no_colon="1"$>"><$MTEntryDate format="%X"$></abbr>

Discussions

Q&A

  • If you have any questions about hAtom, check the hAtom FAQ, and if you don't find answers, add your questions!

Issues

  • Please add any issues with the specification to the separate hAtom issues document.

Recent Changes

Most recent at top please. This section will eventually be removed but should be helpful for people tracking changes during specing.

  • Entry Permalink now SHOULD (as opposed to MUST) be a complete URI
  • Entry Title now preferentially uses class="title"
  • Entry Author most explicitly be marked class="author"
  • using an <address around Entry Author and Entry Contributor is no longer required

See Also

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