I'd like to represent a list of terms and conditions that when rendered look like this:

1. FIRST TERM
   1.1 Condition 1
   1.2 Condition 2
   1.3 Condition 3
   1.4 Condition 4 

2. SECOND TERM
   2.1 Condition 1
   2.2 Condition 2
   2.3 Condition 3

etc.

What's the best way to mark this up?

I'm redoing a website where the old way was using nested tables with hard typed numbers. Don't think the designer had heard of margins and padding... :(

2 answers

1
point
This was chosen as the best answer

Nested lists (ol) or perhaps definition lists are the semantic way to mark it up.

The discussion here: http://doctype.com/vLm suggests you'll only get the point numbering by hard numbering it yourself or with some javascript.

e.g. http://serhiy.com.ua/examples/lists-numeration/

Answered about 7 years ago by Tony Crockford
0
points

You can achieve it with css counters, which IE is finally supporting from version 8. I'll use a definition list as fallback in my example (furhter css will be needed to tweak standard DL styling:

dl.sections
{
counter-reset:section;
}

.sections dt
{
counter-reset:subsection;
}

.sections dt:before
{
content:"Section " counter(section) ". ";
counter-increment:section;
}

.sections dd:before 
{
counter-increment:subsection;
content:counter(section) "." counter(subsection) " ";
}

then:

<dl class="sections">
<dt>First Term</dt>
<dd>Condition 1</dd>
<dd>Condition 2</dd>
<dd>Condition 3</dd>
<dt>Second Term</dt>
<dd>Condition 1</dd>
<dd>Condition 2</dd>
</dl>
Answered about 7 years ago by Richard Grevers