How should I format an address? - Page 3

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View

Re: How should I format an address?

Quoted text here. Click to load it

There are two things wrong with <address>

First of all it's only for the "addres sof the page's author / creator",
which also implies that more than one of them simultaneously is right
out.  Of course you might _mean_ the page's contact address, which is
fine, but it's not really appropriate to use this for address
directories etc.  (although commonly done, and it doesn't really break

Secondly <address> gives you no additional formatting over its content,
You still have to deal with these linebreask etc. That's a matter for
the old standbys of <div>, <span> and <br>, with plentiful use of the
class attribute. Take a look at the following example and see if it's
any use for you.

Note also that I've got an "address-uk" class on the address element, as
well as "address" itself.  This is that you can drive country-specific
address formats.

You might also look at vCard and similar vocabularies for "address"
information. so as to have some consistency about class names.

<style type="text/css" >

body {
    background-color: #F3E39B;

@media print {
@media screen {

    .address {
        background-color: #fff;
        color: #0;

        border: thick outset #F3E39B;
        margin: 20mm 50mm 5mm 20mm;
        padding: 1em 2em;
        min-width: 60mm;
        max-width: 180mm;

        font-style: normal;
        font-family: arial, helvetica, sans-serif;
        font-size: 12pt;

    .addressee {
        font-size: 120%;
        font-family: serif;
        margin-bottom: 0.33em;
        margin-left: -0.5em;

    .address .postal-town {
        margin: 0.25em 0;

    .address .postal-code {
        margin: 0.5em 0 0;
        font-size: 120%;
        text-transform: uppercase;
    .address .postal-code-barcode {
        display: none;

    .address.address-uk .postal-town {
        text-transform: uppercase;

    .address.address-uk .postal-code {
        text-transform: uppercase;
        font-size: 120%;

    .address.address-us .postal-state {
        display: inline;
        text-transform: uppercase;
    .address.address-us .postal-state:after {
        content: ', ';

    .address.address-us .postal-code {
        display: inline;

    .address.address-us .postal-code-barcode {
        display: block;
        font-family: 'the magic US postal barcode font',
'code 39', 'OCR A extended', fantasy;
/* Set only the right font here and make sure it's present */
        font-size: 6mm;
        margin: 10mm 0 0 20mm;


<div class="address address-uk" >
    <div class="addressee" >Biffa Bacon</div>
    <div class="street-address" >1 Bash Street
    <div class="postal-town" >Fulchester</div>
    <div class="postal-code" >AB1 23d</div>
    <div class="postal-code-barcode" >AB1 23d</div>

<div class="address address-us" >
    <div class="addressee" >Barbie Bimbo</div>
    <div class="street-address" >Barbie's Condo
    <br>Somewhere unfeasibly pink</div>
    <div class="postal-town" >Beverley Hills</div>
    <div class="postal-state" >CA</div>
    <div class="postal-code" >90210</div>
    <div class="postal-code-barcode" >90210</div>


 Cats have nine lives, which is why they rarely post to Usenet.

Site Timeline