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

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:

POSH on the microformats wiki.

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

Warning: file_get_contents(): http:// wrapper is disabled in the server configuration by allow_url_fopen=0 in /nfs/c08/h05/mnt/123736/domains/v1.jontangerine.com/html/silo/inc/syndication.php on line 7

Warning: file_get_contents(http://tinyurl.com/api-create.php?url=http%3A%2F%2Fv1.jontangerine.com%2Fsilo%2Fmicroformats%2Fposh-badge%2F): failed to open stream: no suitable wrapper could be found in /nfs/c08/h05/mnt/123736/domains/v1.jontangerine.com/html/silo/inc/syndication.php on line 7

Sharing

This is the archive of jontangerine.com version one, made in 2006, launched in 2007, and active until 2012. It’s archived to preserve the original design and its content that was referenced in multiple posts, books and galleries. There's a holding page before the new site arrives.