BPR3 markup

·
What the BPR3 markup currently looks like:

<span style="float: left; padding: 5px;">
  <a href="http://bpr3.org/?p=52">
    <img alt="Blogging on Peer-Reviewed Research" src="http://bpr3.org/images/rbicons/ResearchBlogging-Large-Trans.png" width="120" height="90" />
  </a>
</span>
What the BPR3 markup should look like (in my opinion):

<-- somewhere in the blog post -->
<a rel="tag" class="bpr3" href="http://bpr3.org/tag/science"></a>
<-- in the body of the review -->
<a href="http://dx.doi.org/{DOI}" rev="review">{title of the article being reviewed}</a>
<-- in the stylesheet or as an embedded style element -->
<style type="text/css">
  a.bpr3{
    display:block; height:90px; width:120px;
    background:url("http://bpr3.org/images/rbicons/ResearchBlogging-Large-Trans.png");
  }
</style>
What's the difference?
  • Instead of linking to a meaningless URL (http://bpr3.org/?p=52), the icon links to a URL with defined semantics, independent of any content-management system (http://bpr3.org/tag/{category}).
  • Use of a standard microformat (rel-tag) to say, unambiguously, "this page has been assigned the tag "science", as defined by the owner of the "http://bpr3.org/tag" space. The "http://bpr3.org/tag" space could also contain other tags, such as "biology" or "geography", for categorisation.
  • The image used to represent this tag is in the stylesheet, so can be altered at any time without having to go through and change each individual page.
  • The article(s) being reviewed is/are identified by 'rev="review"' attributes on their links.

The styling would ideally have used a CSS3 selector: a[href^="http://bpr3.org/tag/"], but not all browsers support that yet.