Breaking up <ol> lists with headings

[Glasgow]

I want to implement a list that looks like this:

Heading 1
1. Item 1
2. Item 2
Heading 2
3. Item 3
4. Item 4
Heading 3
5. Item 5
etc

I can get this working using html as follows:

<ol>
<p>Heading 1</p>
<li>Item 1</li>
<li>Item 2</li>
<p>Heading 2</p>
<li>Item 3</li>
<li>Item 4</li>
<p>Heading 3</p>
<li>Item 5</li>
</ol>

which works fine from a presentation point of view but fails HTML validation which apparently objects to the fact that a <p> tag is appearing between a </li> and the next <li> tag. Does this mean that I effectively have to include the headings prior to the final </li> tag of each sub-list? This doesn't seem like a very clean solution.

Thanks in advance.

 

[Vragabond]

You would be best off just styling list items to look like headings if you need the numbering to continue. If not, just put headings outside ordered lists. The first solution would look like (html part):

<ol>
<li class="heading">Heading 1</li>
<li>Item 1</li>
<li>Item 2</li>
<li class="heading">Heading 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li class="heading">Heading 3</li>
<li>Item 5</li>
</ol>

In css you would style the headings (bigger, bolder, whatever, without the number, etc.)

 

[Glasgow]

Thanks for the reply. The problem that remains is that I don't want to number the headings themselves, just the items. Even if I use list-style-type:none on the headings, it creates a gap in the numbering sequence. Any further thoughts?

 

[ChrisHunt]

It's not great, but how about this:

<h1>Heading 1</h1>
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>
<h1>Heading 2</h1>
<ol start="3">
<li>Item 3</li>
<li>Item 4</li>
</ol>
<h1>Heading 3</h1>
<ol start="5">
<li>Item 5</li>
</ol>

Obviously you should use whatever <hn> heading element is appropriate to your document structure.

The [tt]start[/tt] attribute is deprecated (according to W3Schools), but since there's no viable CSS alternative you'll have to use it anyway.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[Glasgow]

Thanks for the suggestion Chris but, in practice, this will be one very long list! I think my preferred approach would be something like:

<p class="header">Heading 1</p>
<ol>
<li>Item 1</li>
<li>Item 2
<p class="header">Heading 2</p></li>
<li>Item 3</li>
<li>Item 4
<p class="header">Heading 3</p></li>
<li>Item 5</li>
</ol>

which I have not tested but at least it has fewer implications when items are inserted into the list. I don't particularly like it but it may be my best way out.

 

[ChrisHunt]

Whatever you do, use a proper heading element - <h1>, <h2>, etc. - intead of <p class="header">.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[Glasgow]

Chris - any particular reason?

 

[arst06d]

Apparently you can force the list items to restart the numbering sequence if you set the Value property

<ol>
<li value="30"> makes this list item number 30.
<li value="40"> makes this list item number 40.
<li> makes this list item number 41.
</ol>

so you should be able to combine this with CSS to turn off the number for the heading list items, and recommence the numbers without a gap.

I haven't tried it, but it sounds good.