Jon Tan / silo / microformats / Badge up your POSH!

POSH is an acronym for Plain Old Semantic HTML; beautiful markup, the way is was intended to be. There’s more about POSH on the microformats wiki.

This is a simple html badge using relative values. Em values are used exclusively so the button will scale depending on browser settings. If you use a badge in your own pages and have adjusted font sizes in your CSS you will need to tweak the values slightly. The font in the examples is a 10px (0.625em / 62.5%) Arial scaled from the standard default browser size of 16px (1em / 100%).

Examples:

  1. POSH
  2. I’m POSH
  3. Love POSH
  4. With POSH

#1 includes the mathematical symbol for “identical to” or “equivalent to” ( ). Please feel free to use and adapt as you wish.

Markup for example 1:

White space inserted for legibility.

<em class="posh-badge">
    <a href="http://microformats.org/wiki/posh" rel="bookmark" 
     title="Discover more about plain old semantic HTML.">
        <span title="Equivalent to:">&#8801;</span> 
        <abbr title="Plain old semantic HTML">POSH</abbr>
    </a>
</em>

CSS:

White space inserted for legibility. The CSS is also in the <head> of this page.

.posh-badge{
    font-size:0.625em;
    line-height:1.4em;
    font-style:normal;
    font-family:arial,sans-serif;
    letter-spacing:0.1em;
    text-shadow:0 0 #000;
    text-align: center;
    color:#eed;
    padding:0 0.3em 0 0;
    background:#9c0;
    border: 0.1em solid #690;
    }

.posh-badge span{
    letter-spacing:0;
    color:#fff;
    padding:0 0.2em;
    margin-right:0.1em;
    background:#690;
    border-right:0.1em solid #690;
    }

.posh-badge abbr{
    border:0;
    }

.posh-badge a:link,
.posh-badge a:visited{
    color:#fff;
    text-decoration:none;
    }

.posh-badge a:focus,
.posh-badge a:hover,
.posh-badge a:active{
    color:#360;
    }

.posh-badge span a:focus,
.posh-badge span a:hover,
.posh-badge span a:active{
    color:#fff;
    }

Tested in:

Windows XP Pro:
Firefox 2.0
Opera 9
IE6 / 7
Mac OSX:
Safari 1.3.2 / 2.0
Firefox 1.5
Camino 1

Please feel free to test yourself to expand this list and let me know so it can be updated / amended.

Reference:

  1. POSH on the microformats wiki.

Related:

  1. An experiment building the microformats logo with CSS and HTML.
  2. Semantic information design ethics.

Sharing

  1. Tweet this or follow Jon on Twitter
  2. Del.ici.ious logoAdd to del.icio.us
  3. Digg iconPost to Digg
  4. Feed iconRSS / Atom feed (log)