Contact information

Discussion in 'HTML' started by Nik Coughin, Nov 23, 2004.

  1. Nik Coughin

    Nik Coughin Guest

    Contact information is a list of name=value pairs.

    Name=John Smith
    Street Address=1234 Some St
    Phone=+649 555 1234

    etc.

    However, it is standard practise to omit the name from the name=value pair
    for some of the contact info, for example a business card might read:

    John Smith
    1234 Whatchamacallit St
    Auckland, New Zealand
    Email: dksjafkh@fjkahgjmns
    Phone: +649 555 1234

    Semantically, how is this marked up?

    "It is a list of contact details therefore it should be a ul":
    <ul>
    <li>John Smith</li>
    <li>Email blahblah@blahblah</li>
    <li>Ph +649 555 1234</li>
    <li>Fax +649 555 5678</li>
    <li>Mobile +649 555 3456</li>
    </ul>

    In this case the phone numbers/email address do not line up. They are much
    easier to read if they line up. Don't like this.

    "A definition list, as it is a list of items following the form of
    something=something":
    <dl>
    <dt></dt><dd>John Smith</dd>
    <dt>Email</dt><dd>blahblah@blahblah</dd>
    <dt>Ph</dt><dd>+649 555 1234</dd>
    <dt>Fax</dt><dd>+649 555 5678</dd>
    <dt>Mobile</dt><dd>+629 555 3456</dd>
    </dl>

    Easier to read. If float: left is applied to dt then it becomes very
    readable indeed. Would you say it is wrong to leave the dt blank? There is
    an implied dt of "name" in this instance. Problem is that if the text in dt
    is longer than the margin on the dd the data no longer lines up.

    "A table; it is tabular data":
    <table>
    <tr>
    <td>John Smith</td>
    </tr>
    <tr>
    <th>Email</th><td>blahblah@blahblah</td>
    </tr>
    <tr>
    <th>Ph</th><td>+649 555 1234</td>
    </tr>
    <tr>
    <th>Fax</th><td>+649 555 1234</td>
    </tr>
    <tr>
    <th>Mobile</th><td>+649 555 1234</td>
    </tr>
    </table>
    Markup is unweildy but provides the most flexible solution
    presentation-wise. The value components always line up with each other.
    Problem is similar to that of using a dl, we may end up with a tr containing
    a single td. However, like in the dl example above, tabular data is
    implied; name=value with name omitted. Therefore, semantically sound?

    So, ul, dl, or table? Don't like ul much, because of the readability issue.
    Am I justified in saying that in the cases of dl and table, the name part of
    a name=value pair can be implied? In that case is dl better suited, or
    table? Table seems the more fluid of the two when it comes to presenting
    the data in a form that would be the most familiar to most people.

    Comments?

    --
    "Come to think of it, there are already a million monkeys on a million
    typewriters, and the Usenet is NOTHING like Shakespeare!" - Blair Houghton
    -=-=-=-=-=-=-=-=-=-=-=-
    http://www.nrkn.com/
    -=-=-=-=-=-=-=-=-=-=-=-
     
    Nik Coughin, Nov 23, 2004
    #1
    1. Advertising

  2. Nik Coughin

    Neal Guest

    On Tue, 23 Nov 2004 13:24:43 +1300, Nik Coughin
    <nrkn!no-spam!@woosh.co.nz> wrote:

    > Contact information is a list of name=value pairs.
    >
    > Name=John Smith
    > Street Address=1234 Some St
    > Phone=+649 555 1234
    >
    > etc.
    >
    > However, it is standard practise to omit the name from the name=value
    > pair
    > for some of the contact info, for example a business card might read:
    >
    > John Smith
    > 1234 Whatchamacallit St
    > Auckland, New Zealand
    > Email: dksjafkh@fjkahgjmns
    > Phone: +649 555 1234
    >
    > Semantically, how is this marked up?


    It could be a list of contact details about the main item.

    <address>John Smith
    <ul>
    <li>1234 Whatchamacallit St</li>
    <li>Auckland, New Zealand</li>
    <li>Email: dksjafkh@fjkahgjmns</li>
    <li>Phone: +649 555 1234</li>
    </ul>
    </address>

    Or, it could be a one-column table, where the missing "first" column" is
    implied and not specifically stated.

    <table>
    <tr>
    <td>John Smith</td>
    </tr>
    <tr>
    <td>1234 Whatchamacallit St</td>
    </tr>
    <tr>
    <li>Auckland, New Zealand</li>
    </tr>
    <tr>
    <td>Email: dksjafkh@fjkahgjmns</td>
    </tr>
    <tr>
    <td>Phone: +649 555 1234</td>
    </tr>
    </table>

    I don't exactly know which is best. Or some other option.
     
    Neal, Nov 23, 2004
    #2
    1. Advertising

  3. "Nik Coughin" <nrkn!no-spam!@woosh.co.nz> wrote:

    > Contact information is a list of name=value pairs.


    Maybe, in a logical sense.

    > However, it is standard practise to omit the name from the name=value
    > pair for some of the contact info,


    Which means that it is just a list of text lines, isn't it? However it's
    about "logical lines", so that a "line" might get split to two (or more)
    lines if they are wider than the available width.

    This is a bit problematic, since the order of the lines varies by
    national practice. Sometimes the reader does not know which part is
    street address, etc., especially if the address is written in a writing
    system unknown to him (such as Latin letters for many, or Chinese
    characters for some). But usually this does not matter since the cryptic
    part is the lines of the postal address, and you normally use it just to
    _copy_ it (into an envelope for example).

    > Semantically, how is this marked up?


    Since there is no element for address information in general in HTML, the
    best approach is usually to use a semantically empty element, namely
    <div>. That way, you will not give _incorrect_ semantic information, and
    you don't invoke processing or display features that are related to
    semantically wrong elements.

    If you use <div> for each line, you will get the desired appearance
    except for the "continuation lines". You can wrap it inside an outer
    <div>, class it, and use CSS to handle that too:

    <style type="text/css">
    ..address { margin: 0.5em 0 1em 2em; }
    ..address div { margin-left: 1em; text-indent: -1em; }
    </style>
    - -
    <div class="address">
    <div>John Smith</div>
    <div>1234 Whatchamacallit St</div>
    <div>Auckland, New Zealand</div>
    <div>Email: <a href="mailto:dksjafkh@fjkahgjmns">
    dksjafkh@fjkahgjmns</a></div>
    <div>Phone: <a href="tel:+6495551234">+649 555 1234</a></div>
    </div>

    Why not <address>? Because it specifically means contact information for
    the current page (author's address), and this is about the general case
    of an address. And because <address> has some presentational
    idiosyncracies in common browsers, features that are really _unsuitable_
    for addresses. If it's really the author's address, you _might_ define it
    as <address> but then you should add CSS to remove the idiosyncracies, at
    least with address { font-style: normal; }.

    > "It is a list of contact details therefore it should be a ul":


    That would not be completely incorrect, but rather unnatural. The
    meanings of <ul> and <ol> are rather vague, but they are meant to
    correspond to an everyday notation of "list" in documents, not any
    sequence. We are not supposed to put paragraphs inside <ul> markup, even
    though paragraphs constitute a list in a very abstract sense (a
    sequence). Moreover you would have to do your best to prevent browsers
    from rendering <ul> the way that almost all browsers do by default -
    a typical symptom of having missed a practical point in markup.

    > "A definition list, as it is a list of items following the form of
    > something=something":


    A definition list is a list of _terms_ and definition data for them. You
    are not defining the terms "Email", "Ph", etc. You are not saying "The
    meaning of the word 'Email' is 'blahblah@blahblah'".

    > Would you say it is wrong to leave the dt blank?


    Is it wrong to define a term without saying what the term is?

    > "A table; it is tabular data":


    It can be regarded as tabular data, yes. A table can be used here. The
    <table> markup is semantically empty except for the pure structure in the
    sense that a table is a sequence of mutually isomorphic sequences - and
    here you have something that can be regarded as a special case of that, a
    sequence of pairs.

    > <tr>
    > <td>John Smith</td>
    > </tr>


    Since other rows have two cells, this should too - most logically, with
    <th></th> as the first cell, but you could make it <th>&nbsp;</th> as a
    workaround to certain browser problems.

    > Markup is unweildy


    Not really.

    > Problem is similar to that of using a dl, we may end up with a
    > tr containing a single td.


    That's formally accepted but structurally unsound. An empty cell can be
    used to handle this. It puts the data into the correct column.

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
    Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html
     
    Jukka K. Korpela, Nov 23, 2004
    #3
  4. Nik Coughin

    Toby Inkster Guest

    Nik Coughin wrote:

    > Semantically, how is this marked up?


    HTML doesn't really have much in the way of contact-info markup.

    There is <address>...</address>, but according to the spec, this is used
    to include contact information about the author of the page (not just
    general contact info).

    If you're including information for a lot of people, then a table with
    columns "Name", "Address", "Postcode", "Country", "E-mail", "Phone",
    "Fax", etc might be appropriate.

    Alternatively:

    <dl class="contact">
    <dt class="no">Name</dt>
    <dd>Joe Bloggs<br></dd>
    <dt class="no">Address</dt>
    <dd>Omnibus Depot,<br>Clapham,<br>London<br></dd>
    <dt>Phone:</dt>
    <dd>020 8123 4567<br></dd>
    <dt>Fax:</dt>
    <dd>020 8123 4568</dd>
    </dl>

    ..contact {
    border: 1px solid black;
    }
    ..contact dt, .contact dd {
    display: inline;
    }
    ..contact dt.no {
    display: none;
    }
    ..contact dt {
    font-weight: bold;
    }

    If semantics are of the utmost, it might be best to use whichever form you
    like best on the page, but link to the same data in a format more suited
    to address data, such as LDIF or FOAF.

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
     
    Toby Inkster, Nov 23, 2004
    #4
  5. Nik Coughin

    Adrienne Guest

    Gazing into my crystal ball I observed "Nik Coughin"
    <nrkn!no-spam!@woosh.co.nz> writing in
    news:8rvod.9061$:

    > Contact information is a list of name=value pairs.
    >
    > Semantically, how is this marked up?
    >
    >
    > Comments?
    >


    How about the label and span elements? The label element holds the names
    and the spans hold the values, eg:
    <p>
    <label for="name"><span id="name">John Doe</span></label><br>
    <label for="address"><span id="address">123 Any Street</span></label><br>
    <label for="city"><span id="city">Any Town</span></label>
    <label for="state"><span id="state">Any State</span></label> <label
    for="zip"><span id="zip">99999</span></label><br>
    <label for="phone">Phone: <span id="phone">(800)555-1212</span>
    </p>


    --
    Adrienne Boswell
    Please respond to the group so others can share
     
    Adrienne, Nov 24, 2004
    #5
  6. Nik Coughin

    Neal Guest

    Adrienne wrote:
    > How about the label and span elements? The label element holds the names
    > and the spans hold the values, eg:
    > <p>
    > <label for="name"><span id="name">John Doe</span></label><br>
    > ...


    However, label "explicitly associates the label being defined with another
    control", and as such is defined as a form element. This would be improper
    use of label.

    See [http://www.w3.org/TR/html401/interact/forms.html#edef-LABEL] for more.
     
    Neal, Nov 24, 2004
    #6
  7. Nik Coughin

    Adrienne Guest

    Gazing into my crystal ball I observed Neal <> writing
    in news:eek::

    > Adrienne wrote:
    >> How about the label and span elements? The label element holds the
    >> names and the spans hold the values, eg: <p>
    >> <label for="name"><span id="name">John Doe</span></label><br> ...

    >
    > However, label "explicitly associates the label being defined with
    > another control", and as such is defined as a form element. This would
    > be improper use of label.
    >
    > See [http://www.w3.org/TR/html401/interact/forms.html#edef-LABEL] for
    > more.
    >


    I thought about that, so I sent it through the validator. It didn't
    complain at all. The only thing it didn't like was a lack of <p>
    element, so I put those in, and voila!

    Of course, one could always wrap this in a form element, with the action
    set to itself and no submit button.

    --
    Adrienne Boswell
    Please respond to the group so others can share
     
    Adrienne, Nov 25, 2004
    #7
  8. Nik Coughin

    Neal Guest

    Adrienne wrote:
    > Neal wrote
    >> Adrienne wrote:
    >>> <label for="name"><span id="name">John Doe</span></label><br> ...

    >> However, label "explicitly associates the label being defined with
    >> another control", and as such is defined as a form element.

    > I thought about that, so I sent it through the validator. It didn't
    > complain at all. The only thing it didn't like was a lack of <p>
    > element, so I put those in, and voila!


    Well, there's what's valid and what makes sense. Just because it validates
    doesn't mean it makes sense.

    > Of course, one could always wrap this in a form element, with the action
    > set to itself and no submit button.


    But does that make sense?

    Why do you need a label element?
     
    Neal, Nov 25, 2004
    #8
  9. Nik Coughin

    Adrienne Guest

    Gazing into my crystal ball I observed Neal <> writing
    in news:eek::

    > Adrienne wrote:
    >> Neal wrote
    >>> Adrienne wrote:
    >>>> <label for="name"><span id="name">John Doe</span></label><br> ...
    >>> However, label "explicitly associates the label being defined with
    >>> another control", and as such is defined as a form element.

    >> I thought about that, so I sent it through the validator. It didn't
    >> complain at all. The only thing it didn't like was a lack of <p>
    >> element, so I put those in, and voila!

    >
    > Well, there's what's valid and what makes sense. Just because it
    > validates doesn't mean it makes sense.
    >
    >> Of course, one could always wrap this in a form element, with the
    >> action set to itself and no submit button.

    >
    > But does that make sense?
    >
    > Why do you need a label element?
    >
    >


    I'm probably coming from this from a different angle. I do a lot of forms,
    mostly for admin purposes, so I sort of think in name value pairs.

    I really like that label element. With CSS and server side scripting, I
    can make it do all sorts of things. I style it as a block container, of a
    certain width, aligned a certain way, and simulate tables for forms. I can
    also make it a different color/background color if the user has made an
    error.

    Even in this instance, for an address, that label could be styled in a
    certain way.

    --
    Adrienne Boswell
    Please respond to the group so others can share
     
    Adrienne, Nov 25, 2004
    #9
  10. Nik Coughin

    Neal Guest

    Adrienne wrote:
    > Neal wrote:
    >> Why do you need a label element?

    > I really like that label element. With CSS and server side scripting, I
    > can make it do all sorts of things. I style it as a block container, of
    > a
    > certain width, aligned a certain way, and simulate tables for forms. I
    > can
    > also make it a different color/background color if the user has made an
    > error.


    But it's a form control. It makes no sense to use it in this context. You
    may as well use a null element like <div>.
     
    Neal, Nov 25, 2004
    #10
  11. Nik Coughin

    Neal Guest

    On Thu, 25 Nov 2004 02:48:44 -0500, Neal <> wrote:

    > Adrienne wrote:
    >> Neal wrote:
    >>> Why do you need a label element?

    >> I really like that label element. With CSS and server side scripting, I
    >> can make it do all sorts of things. I style it as a block container,
    >> of a
    >> certain width, aligned a certain way, and simulate tables for forms. I
    >> can
    >> also make it a different color/background color if the user has made an
    >> error.

    >
    > But it's a form control. It makes no sense to use it in this context.
    > You may as well use a null element like <div>.



    Correction - <span>. label is %formctrl which is %inline.
    [http://www.w3.org/TR/html401/sgml/dtd.html]
     
    Neal, Nov 25, 2004
    #11
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Adam
    Replies:
    1
    Views:
    400
    pantagruel
    Oct 8, 2005
  2. Brynn
    Replies:
    1
    Views:
    578
    Brynn
    Jan 19, 2004
  3. Larry Hastings

    Contact information for Jim Hugunin?

    Larry Hastings, Jul 22, 2013, in forum: Python
    Replies:
    0
    Views:
    81
    Larry Hastings
    Jul 22, 2013
  4. Albert Hopkins

    Re: Contact information for Jim Hugunin?

    Albert Hopkins, Jul 24, 2013, in forum: Python
    Replies:
    1
    Views:
    103
    greymausg
    Jul 27, 2013
Loading...

Share This Page