What is the rightest markup for the following code?

Get Started
1

Hello guys.
I’m building a CMS and I’m stuck on using the right markup for the “tools” before the datagrid of records: I mean, the “Add new record”, “records X-Y of Z”, “Pages: < 1 2 3 >”, etc. stuff

Maybe it’s a dumb question but, apart from CSS presentation, I have two choices (please note that I must separate the class=“left” from the class=“right” as in both examples: in other words, I can’t change the markup logical):

Ex.1 - using lists


<ul class="left">
  <li><a href="#">Add new record</a></li>
  <li>Records 1-20 of 100</li>
</ul>
<ul class="right">
  <li>Pages: <a href="#">1</a> <a href="#">2</a> <strong>3</strong> <a href="#">4</a> <a href="#">5</a></li>
</ul>

Ex. 2 - using DIVs


<div class="left">
  <div><a href="#">Add new record</a></div>
  <div>Records 1-20 of 100</div>
</div>
<div class="right">
  <div>Pages: <a href="#">1</a> <a href="#">2</a> <strong>3</strong> <a href="#">4</a> <a href="#">5</a></div>
</div>

I saw the markup of some Forums (they use the same “tools”) and seems nobody uses lists for this job, so I wonder “are list semantically correct to use in this example?”. On the other hand, DIVs give me the advantage to look consistently if there is not a style sheet - while left and right lists appear visually “separated” -, but I’d avoid to suffer from “divitis”

So, what’s your advice?
Thanks for suggestions!

2

What if I said, neither? It depends on context but for “left” it’s probably more correct to use the second example and is ‘Add new record’ some form of sub-heading?

3

I would probably use example to, but replace the inner divs with paragraphs.

4

Thanks for the answers! Here I took a couple of screenshots of the CSS rendered version, the list one and the DIVs one (you see, the list version looks very ugly when used without CSS)

http://www.ivanhalen.com/framework/datagrid/grid.png
http://www.ivanhalen.com/framework/datagrid/html1.png
http://www.ivanhalen.com/framework/datagrid/html2.png

Ralph, I was afraid that inner DIVs were not the best choice, too: so, paragraphs go better? I’m only afraid of the big space between paragraphs in a CSS-less version… Are there other html tag I can use for my needs?

5

In that case I would go with divs. There’s no sin in using them, especially if there’s nothing better for the task. Most elements seem to have various different browser padding/margin defaults, which may make them unsuitable for your unstyled version.

You could also just use one paragraph and separate each line with a <br> element. That way you get some margins top and bottom in the unstyled version. Though I tend to avoid <br> as much as possible.

Perhaps you could consider <pre> ? Not really necessary, though…