Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I want to display a leaderboard like so:

1 - John 232342
2 - Mary 45234
3 - Luke 234
59 - You 45

It's an ordered list but I can't make an ordered list that jumps from 3 to an arbitrary number.

So how should I mark this up?

share|improve this question
    
Presumably not just marked up, but marked up in a way that is semantically correct? –  Kris C Sep 7 '11 at 19:28
    
@Kris Yes. Also accessible and valid. –  Adam Lynch Sep 8 '11 at 11:32
add comment

4 Answers

up vote 3 down vote accepted

If I'm reading the HTML5 spec correctly you can do as suggested in Roger's answer and use an ordered list and then use a value attribute on one of the li elements to skip a few numbers:

The first item in the list has the ordinal value given by the ol element's start attribute, unless that li element has a value attribute with a value that can be successfully parsed, in which case it has the ordinal value given by that value attribute.

Each subsequent item in the list has the ordinal value given by its value attribute, if it has one, or, if it doesn't, the ordinal value of the previous item, plus one if the reversed is absent, or minus one if it is present.

See: http://www.w3.org/TR/html5/grouping-content.html#the-ol-element

So

<ol>
<li value="1">John 232342</li>
<li value="2">Mary 45234</li>
<li value="3">Luke 234</li>
<li value="59">You 45</li>
</ol>
share|improve this answer
add comment

The usual way that I've seen this done is with an ellipsis. Something like:

Leaderboard gap with ellipsis

Edit: For markup I would use an unordered list and insert the numbers into the name and use the ellipsis as an item.

Otherwise you end up with some difficult situations when the user is #4, as you would have an ellipsis where it doesn't make sense, or when the user is #2.

share|improve this answer
    
I'm asking for the markup. could you elaborate? Are you suggesting an ordered list and then a paragraph/unordered list/table or what? –  Adam Lynch Sep 7 '11 at 14:34
    
@Adam: Added an edit for that. –  JohnGB Sep 7 '11 at 14:42
    
So you're suggesting this? ...<li>3 -Luke 234 </li><li>...</li><li>59 - You 45</li></ul> –  Adam Lynch Sep 7 '11 at 14:44
1  
Use an ordered list, and use css to turn off the list numbers: list-style-type: none; because using an unordered list implies you don't care about the ordering--which you do! –  Alex Feinman Sep 7 '11 at 14:50
    
Yes, if you want the style of an unordered list. If not just use something like: <p>3 - Luke<br />...<br />59 - You</p> –  JohnGB Sep 7 '11 at 14:51
show 4 more comments

Here's a couple of options - but I think li's value is deprecated in HTML4 - and I don't know if it can be done in CSS.

<ol start="1">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li value=59>Item 4</li>
   <li>Item 5</li>
</ol>

<DL>
<DT>1
<DD>Item 1
<DT>2
<DD>Item 2
<DT>3
<DD>Item 3
<DT>59
<DD>Item 4
<DT>60
<DD>Item 5
</DL>

This gives the following:

enter image description here

share|improve this answer
    
LI's value attribute does not appear to me to be deprecated in HTML4.01 and is also part of HTML5, so it can be used with no worries. –  Erion Sep 8 '11 at 11:04
    
@Erion - yes I saw it was ok in HTML5 - but this is the bit that made me unsure wrt HTML4. –  Roger Attrill Sep 8 '11 at 11:14
add comment

The common way of showing that a Y (or X) axis has a gap is to make a strike through or dots..

similar to:

I 50
I 40
I 30
/
I 0

or

I 50
I 40
I 30
...
I 0

None is more correct than the other, more of a aesthetic point of view...

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.