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 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;
    }