SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 30
  1. #1
    SitePoint Wizard silver trophybronze trophy Stormrider's Avatar
    Join Date
    Sep 2006
    Location
    Nottingham, UK
    Posts
    3,133
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Marking Up Postal Addresses

    What is the correct way to mark up a postal address? The address is a contact address for the website (not for the webmaster but for the club the website is for) - is it a case of putting it in a single paragraph with a <br /> at the end of every line, or is there a better way of doing it that doesn't include <br />? Maybe as a load of spans?

    What is the best solution that can be easily styled to 1 address per line, and still works with styles switched off?

    Cheers

  2. #2
    SitePoint Zealot
    Join Date
    Dec 2006
    Posts
    188
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello,

    Addresses should be done using hCard or something similar. This is based on vCards and is a push towards semantic markup. Microformats are great for marking up this type of info.

    This example is taken from http://microformats.org/wiki/hcard#In_General
    <div class="vcard">
    <div class="fn org">Wikimedia Foundation Inc.</div>
    <div class="adr">
    <div class="street-address">200 2nd Ave. South #358</div>
    <div>
    <span class="locality">St. Petersburg</span>,
    <abbr class="region" title="Florida">FL</abbr> <span class="postal-code">33701-4313</span>
    </div>
    <div class="country-name">USA</div>
    </div>
    <div>Phone: <span class="tel">+1-727-231-0101</span></div>
    <div>Email: <span class="email">info@wikimedia.org</span></div>
    <div>
    <span class="tel"><span class="type">Fax</span>:
    <span class="value">+1-727-258-0207</span></span>
    </div>
    </div>

    Then style away based on the div or span. Hope that helps.

  3. #3
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Why go through all that faff if there is already an element specifically designed for it?
    HTML Code:
    <address>
    Gordon Brown<br>
    10 Downing Street<br>
    London SW1 2AA<br>
    United Kingdom
    </address>
    Surely that's more semantic than a bunch of divs and spans.

  4. #4
    SitePoint Zealot
    Join Date
    Apr 2007
    Location
    New London, CT
    Posts
    172
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That really does seem like a whole lot of extra markup.

  5. #5
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It is a bunch of wasted markup. Also, Raffles' idea is nice, but I wish that was the proper use of the element. From what I can tell, the <address> tag is supposed to be used for the designer's contact information.

    Doesn't stop me from using it his way though.

  6. #6
    SitePoint Zealot
    Join Date
    Apr 2007
    Location
    New London, CT
    Posts
    172
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    W3C says:

    The address element may be used by authors to supply contact information for a document or a major part of a document such as a form. This element often appears at the beginning or end of a document.

    So I think that this is exactly what the tag is for. Microformats do make sense, but when the markup for the micro is actually MACRO it is worthless.

  7. #7
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd go with Raffles' suggestion. That's what <address> is for; it's semantic and uses minimal markup.

    Quote Originally Posted by Dan Schulz View Post
    From what I can tell, the <address> tag is supposed to be used for the designer's contact information.
    That's not how I interpret it, Dan. Remember that this element type has been around for a long time. Long before web pages were 'designed'.
    Birnam wood is come to Dunsinane

  8. #8
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Simon and I actually got into an arguement about this some time back. If you want, I can try and dig the thread up. Some wonderful arguements were presented on both sides (and like I said, it doesn't stop me from doing what Raffles does with the element).

  9. #9
    SitePoint Wizard silver trophybronze trophy Stormrider's Avatar
    Join Date
    Sep 2006
    Location
    Nottingham, UK
    Posts
    3,133
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Ah, OK. I was under the impression that <address> was for the designer's info as well.

    Is it acceptable in this case to use <br>s to separate the lines, or is there a better way without using presentational markup?

  10. #10
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    BR is appropriate here.

  11. #11
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    <br> is a line break so it's perfectly acceptable when you want to have a line break

    Never use lots of them though to create more line breaks, in this situation padding or margins should obviously be used through CSS.

    Would anyone else ever use a list to display an address?

    Code:
    <address>
    <ul>
     <li>Gordon Brown</li>
     <li>10 Downing Street</li>
     <li>London SW1 2AA</li>
     <li>United Kingdom</li>
    </ul>
    </address>
    An address is essentially a list of information about someone's location so I wouldn't see anything wrong with displaying it like this either.

  12. #12
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Personally <br> seems more fitting to me. When you write a postal address on an envelope you are actually making line breaks, not making a list. It should be the same on a webpage, I would think. It's like if you were to mark up poetry, you wouldn't put it in a list, because it isn't a list, it's just text that needs to be broken up into lines, and that's what <br> is for.

  13. #13
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It could be argued that you are making a list of name, street, city/town, county/state, postcode, country.

    I would tend to agree with you though as <br> probably makes more sense although I don't think using a list would be particularly wrong semantically either.

  14. #14
    SitePoint Wizard silver trophybronze trophy Stormrider's Avatar
    Join Date
    Sep 2006
    Location
    Nottingham, UK
    Posts
    3,133
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I think it would be wrong. I don't think you can count it as a list at all, it isn't.

  15. #15
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    No, I would not use a UL or OL for 1 postal address. It is one address not several different items.

  16. #16
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stormrider View Post
    Ah, OK. I was under the impression that <address> was for the designer's info as well.
    The address element type was invented before the term 'web designer'.

    Quote Originally Posted by Stormrider View Post
    Is it acceptable in this case to use <br>s to separate the lines, or is there a better way without using presentational markup?
    Using br is correct, since the line breaks have semantic meaning. That also allows the address to be formatted properly in a non-CSS browser (such as Lynx).
    Birnam wood is come to Dunsinane

  17. #17
    SitePoint Guru Chroniclemaster1's Avatar
    Join Date
    Jun 2007
    Location
    San Diego, CA
    Posts
    784
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you went shopping at a mall and picked up produce, dry goods, furniture, clothes, etc. etc. you wouldn't hesitate to call it a shopping list. I think it's unreasonable to demand that list items have to be of identical type. I would say, that a list is one option and if that's what works best for you page then go for it.

    The down side to a list is if CSS is inactive, they'd get bullets and that would *definitely* look weird. Using <br />s would render better in non-CSS browsers. The up side is CSS styling gives you a more options with a list than with text with line breaks.


    Analyze what you need it to do in your webpage, figure out it's function, and chances are it will then be obvious how you want to code it.
    Whatever you can do or dream you can, begin it.
    Boldness has genius, power and magic in it. Begin it now.

    Chroniclemaster1, Founder of Earth Chronicle
    A Growing History of our Planet, by our Planet, for our Planet.

  18. #18
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,813
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Addresses and poetry are examples of where using the <br> tag makes sense. An address is definitely not a list.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  19. #19
    SitePoint Wizard drhowarddrfine's Avatar
    Join Date
    Aug 2005
    Posts
    3,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The subject of <address> was brought up in "Transcending CSS" by Andy Clark, Molly, Dave Shea, et al. They call it the worst of the html tags and, no, it is not to be used for addresses. The Musician is correct, however, and his markup, the 'hcard', similar to Microsoft's vcard, is an up and comer among the top designers such as Tantek and friends.

    While it uses a lot of markup, I understand the validity of doing it that way. It fits in with the whole concept of microformats.

  20. #20
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Chroniclemaster1 View Post
    If you went shopping at a mall and picked up produce, dry goods, furniture, clothes, etc. etc. you wouldn't hesitate to call it a shopping list.
    No, but that is a list of items. I've never heard anyone say that their postal address consists of 3 items. With that logic, you'd mark up a document as a list of paragraphs and a paragraph as a list of words. A sequence is not always a list.

    Quote Originally Posted by Chroniclemaster1 View Post
    I would say, that a list is one option and if that's what works best for you page then go for it.
    It's not an option with the address element, since that only allows inline-level children and a list is a block-level element.

    And the example above uses an unordered list, which is clearly wrong even if one should accept that a postal address is a list of items. In an unordered list, you can change the order of the items without affecting the meaning of the list as a whole. You cannot do that with a postal address, so if it's a list, it's an ordered list.

    Quote Originally Posted by Chroniclemaster1 View Post
    The down side to a list is if CSS is inactive, they'd get bullets and that would *definitely* look weird.
    And that should be a major clue that an address is not a list. If it looks weird with bullets (or item numbers), it's not a list.

    Quote Originally Posted by drhowarddrfine View Post
    The subject of <address> was brought up in "Transcending CSS" by Andy Clark, Molly, Dave Shea, et al. They call it the worst of the html tags and, no, it is not to be used for addresses.
    It marks up ‘contact information for a document or a major part of a document such as a form’, according to the HTML4 specification. If the primary means of contact is via snail mail, than a postal address is correct as the content of address.
    Birnam wood is come to Dunsinane

  21. #21
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo
    And that should be a major clue that an address is not a list. If it looks weird with bullets (or item numbers), it's not a list.
    Very good point, great checkpoint really when deciding on whether or not to use a list. I've probably been guilty in the past of using lists when they maybe aren't necessary so shall certainly keep that in mind.

  22. #22
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by drhowarddrfine View Post
    The subject of <address> was brought up in "Transcending CSS" by Andy Clark, Molly, Dave Shea, et al. They call it the worst of the html tags and, no, it is not to be used for addresses. The Musician is correct, however, and his markup, the 'hcard', similar to Microsoft's vcard, is an up and comer among the top designers such as Tantek and friends.

    While it uses a lot of markup, I understand the validity of doing it that way. It fits in with the whole concept of microformats.
    Just because "top designers" dislike a particular HTML element doesn't mean it's gospel to follow what they like. <address> is in the spec, not deprecated - why not use it? And if these people are so influential and think <address> is so bad, why is it being included in HTML5 then?

    I'm no "top designer" but bloated, overly verbose HTML like that microformat (quite an ironic name) markup up there doesn't seem like an improvement to me. Is is supposed to benefit humans or search engines? Because if a human can't recognise a postal address or a phone number just based on the text they can read, then either the reader or the website designer have some serious issues to work on.

  23. #23
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Raffles View Post
    I'm no "top designer" but bloated, overly verbose HTML like that microformat (quite an ironic name) markup up there doesn't seem like an improvement to me. Is is supposed to benefit humans or search engines? Because if a human can't recognise a postal address or a phone number just based on the text they can read, then either the reader or the website designer have some serious issues to work on.
    I don't think you understand the purpose of microformats. They're meant to provide a consistent way to mark up commonly used information for easy machine interaction. For example, the Tails Firefox Extension pulls out microformats like hCards and hCalendars and allows you to use that information in other ways. This can't be done without Google levels of language processing if everyone has their own way to mark up addresses, calendar events, etc.

    Not only that, when combined with user CSS/Javascript, one can mark up hCards etc. specifically, making them more noticeable on a page for example.

    And address is a crappy element because it's so incomplete, and I'm not alone in saying that. Every single time I've used it I wished for something more, and now with hCards that something more is here.

    edit: I'm not going to argue about the verbosity of hCards, but when you're trying to expose a rich model of metadata you kind of have to do it that way. Whether that extra metadata is important enough for you to make your document a few bytes larger is up to you.

  24. #24
    SitePoint Guru Chroniclemaster1's Avatar
    Join Date
    Jun 2007
    Location
    San Diego, CA
    Posts
    784
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, I'm either not quite thrashed enough and am back for more, or I really am just that stupid.

    I'm trying to see if I understand the whole vCard thing which is brand new to me. It sounds like it's a new standard to share information in a machine readable format? So in theory, this is the way you'd mark up a page so that a foreign web application could pull the info and be able to process it?

    If so, I'm guessing there are a number of cases where marking up a full vCard would be serious overkill. But this does remind me of the debates on DTD vs. XSD.
    Whatever you can do or dream you can, begin it.
    Boldness has genius, power and magic in it. Begin it now.

    Chroniclemaster1, Founder of Earth Chronicle
    A Growing History of our Planet, by our Planet, for our Planet.

  25. #25
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Vinnie, those are very good points and you're right in that I didn't properly understand microformats. I like the concept of microformats, but the need for all that extra markup is a bit off-putting for the minimalist in me.

    I'm curious about what you mean by <address> being incomplete. What else do you think it should have?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •