treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Correct markup of user profile

  • How would you go about marking up a user profile for a sports team? I'm working on tweaking a website for a rugby team and they have quite a lot of details on their squad page

    e.g.
    Height: 1.95m
    Weight: 95Kg
    etc
    etc
    etc

    It was initially marked up in paragraphs, with a label tag, however I don't feel this is syntactically correct.

    Would it be better as a ul, or is there another, even better way to mark this up?
  • <ul class="member-info">
    is probably what i would use.

    Then if you want the "Height:" to be bold or something, just put them in spans and style it from there!
  • What about a definition list?
    <dl>
    <dt>Height</dt>
    <dd>1.95m</dd>
    <dt>Weight</dt>
    <dd>95kg</dd>
    </dl>

    Then, since each label/description is already wrapped in different tags, you'll be able to style it more effectively.
  • well, build a spreadsheet, or a table, using divs.
  • Here's an example of something similar I did..
    http://burrissports.com/joeystats

    I used tables, but you should build your spreadsheet using css.
  • @TheDoc

    Not sure if a Definition List is semantically correct? Surely a definition list is Word/Phrase - Description of said word or phrase?

    I was considering a table, but wasn't sure if it was a correct use of a table...so...just went with a list
  • There's sort of a debate on how it's really supposed to be used (at least that's what I've been led to believe).

    Some people seem to also use it as Label:Value(s).
  • From W3 spec:
    "Another application of DL, for example, is for marking up dialogues, with each DT naming a speaker, and each DD containing his or her words."
    Linky link
  • This is most definitely the correct use of a table
  • You could make an argument that the information is tabular and you could use tables. I think a definition list in this instance might be easier to use than an unordered list. It wouldn't need the additional span tags since you can style the dt tags.
  • While I agree that you could most certainly use a table in this situation, I'd prefer the flexbility of the dl.