Grow your CSS skills. Land your dream job.

Correct markup of user profile

  • # July 11, 2011 at 11:17 am

    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?

    # July 11, 2011 at 11:28 am

      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!

      # July 11, 2011 at 11:43 am

      What about a definition list?


      Height

      1.95m

      Weight

      95kg

      Then, since each label/description is already wrapped in different tags, you’ll be able to style it more effectively.

      # July 11, 2011 at 12:28 pm

      well, build a spreadsheet, or a table, using divs.

      # July 11, 2011 at 12:30 pm

      Here’s an example of something similar I did..
      http://burrissports.com/joeystats

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

      # July 11, 2011 at 1:58 pm

      @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

      # July 11, 2011 at 2:01 pm

      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).

      # July 11, 2011 at 2:04 pm

      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

      # July 11, 2011 at 3:46 pm

      This is most definitely the correct use of a table

      # July 11, 2011 at 4:45 pm

      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.

      # July 11, 2011 at 4:50 pm

      While I agree that you could most certainly use a table in this situation, I’d prefer the flexbility of the dl.

    Viewing 11 posts - 1 through 11 (of 11 total)

    You must be logged in to reply to this topic.

    *May or may not contain any actual "CSS" or "Tricks".