Question

I need to create a large table of contents for an HTML book but I can’t decide what’s the best solution for its markup. I have two options in mind: definitions lists or ordered lists.

Would you consider this a personal style decision? And how about semantics?

I like my list to be numbered but I have problems using “ol” with nestes lists. I guess I’d do the same thing I did with my definition lists by numbering manually (and disabling style in my list).

I thought of these two:

Option A:

<div class="TOC">
    <dl>
        <dt><a href="#">Preface</a></dt>
        <dt>I. <a href="#">Chapter 1</a></dt>
        <dd>
            <dl>
                <dt>1 <a href="#">Section 1</a></dt>
                <dd>
                    <dl>
                        <dt>1.1 <a href="#">Subsection A</a></dt>
                        <dt>1.2 <a href="#">Subsection B</a></dt>
                        <dt>1.3 <a href="#">Subsection C</a></dt>
                    </dl>
                    <dt>2 <a href="#">Section 2</a></dt>
                </dd>
            </dl>
        </dd>
    </dl>
</div>

Option B:

<div class="TOC">
    <ol>
        <li><a href="#">Preface</a></li>
        <li><a href="#">Chapter 1</a>
            <ol>
                <li><a href="#">Section 1</a>
                    <ol>
                        <li><a href="#">Subsection A</a></li>
                        <li><a href="#">Subsection B</a></li>
                        <li><a href="#">Subsection C</a></li>
                    </ol>
                </li>
                <li><a href="#">Section 2</a></li>
            </ol>
        </li>
    </ol>
</div>

Answer 1

Definition lists are NOT strictly for “definitions” as some people seem to be saying – if they were they would have extremely few uses. However, while <dl/>s are very flexible and have many uses, the ordered-list does seem like a better option here.

If you’re trying to number nested lists (whether they’re nested <ol/>s or <dl/>s), you can use CSS counter-increment and counter-reset properties to add numbers automatically based on the nested depth, rather than maintaining the numbering manually for every revision.

Example:

.TOC ol{
  list-style-type:none;
  counter-reset:toc1;
}

.TOC ol li::before{
  content:counter(toc1)' ';
  counter-increment:toc1;
}

.TOC ol li ol{
  counter-reset:toc2;
}

.TOC ol li ol li::before{
  content:counter(toc1)' .'counter(toc2)' ';
  counter-increment:toc2;
}

.TOC ol li ol li ol{
  counter-reset:toc3;
}

.TOC ol li ol li ol li::before{
  content:counter(toc1)' .'counter(toc2)' .'counter(toc3)' ';
  counter-increment:toc3;
}