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