How to write W3C compliant multi-level bullet points in HTML?

Question

Is it possible to write W3C compliant multi-level bullet points (unordered list) in HTML?

Nested ul can be used, but is not W3C compliant.

 <ul>
     <li>myItem 1</li>
     <li>myItem 2</li>
     <ul>
        <li>myItem 2a</li>
     </ul>
     <li>myItem 3</li>
     <li>myItem 4</li>
 </ul>

myItem 1
myItem 2

myItem 2a

myItem 3
myItem 4

In Visual Studio, the above code gives the warning: Validation (XHTML 1.0 Transitional): Element 'ul' cannot be nested within element 'ul'

What does the validator complain about when you tried it? Please post sample HTML and exact validation output. — Anon, Dec 16 '10 at 21:35
Have you tried putting an `
` inside a `
` and seeing what the validator says? — Felix, Dec 16 '10 at 21:37
You should be able to naturally. If not, you're doing it wrong. — Ben, Dec 16 '10 at 21:38
As this thread bore out, that's not the case, Ben. Here is a similar thread: http://stackoverflow.com/questions/2235257/how-can-i-produce-an-nested-list-in-xhtml-strict-without-giving-the-nested-lists — hotshot309, May 22 '12 at 19:29

score 93 · Accepted Answer · edited Jun 06 '20 at 23:44

93

The only valid child of either a ul or ol is an li element; an li can, however, contain a ul (or ol). To achieve your aim:

<ul>
  <li>myItem 1</li>
  <li>myItem 2</li>
  <li style="list-style-type:none">
    <ul>
      <li>myItem 2a</li>
    </ul>
  </li>
  <li>myItem 3</li>
  <li>myItem 4</li>
</ul>

edited Jun 06 '20 at 23:44

bb216b3acfd8f72cbc8f899d4d6963

743
11
21

answered Dec 16 '10 at 21:56

David Thomas

249,100
51
377
410

...if someone could edit my code block as code, it'd be appreciated (I don't know if it's the weirdness of iPhone editing, or my own misuse that's screwing it up, despite repeated attempts). – David Thomas Dec 16 '10 at 22:00
1

I haven't got enough points to edit your answer :-( Your code creates an unwanted bullet point. How can I get rid of that? Thanks. – Techboy Dec 16 '10 at 22:07
1
WTF? The last `
– Pekka Dec 16 '10 at 23:41
Thanks @Pekka, I'm glad it wasn't just me that was confused, I had started to worry =) – David Thomas Dec 17 '10 at 08:41
This is not the answer because it creates an unwanted bullet (before the nested
– Techboy Dec 17 '10 at 15:45
2

It's the only **valid (x)html** solution. The extra bullet should be dealt with via css. I'd suggest asking a separate question for help with that problem. – David Thomas Dec 17 '10 at 15:52
15

Actually all you have to do is put the nested UL in the 2nd li rather than creating a blank one. Then you won't get the unwanted bullet – Morgan T. Jun 05 '12 at 14:51

score 20 · Answer 2 · edited Jul 31 '20 at 14:48

20

Complementing David Thomas answer, this would remove the unwanted bullet:

<ul>
    <li>myItem 1</li>
    <li>myItem 2        
        <ul>
            <li>myItem 2a</li>
        </ul>
    </li>
    <li>myItem 3</li>
    <li>myItem 4</li>
</ul>

edited Jul 31 '20 at 14:48

Chris Maes

35,025
12
111
136

answered May 26 '16 at 17:58

Marlon

1,719
3
20
42

NB: it requires at least one `li` element in parent `ul` – Destiner Jul 28 '16 at 18:03
1

This is, in fact, the correct answer. The point is that `muItem 2a` is indented because it is nested _inside_ `myItem 2`, so the `ul` should be nested _inside_ its `li` – Manngo Jan 21 '17 at 00:00
It worked perfectly well for me, and it is simpler that David Thomas solution. Thanks to Marlon – herve-guerin Oct 18 '17 at 17:05
Best and simplest answer. – stevec Dec 27 '22 at 01:44

How to write W3C compliant multi-level bullet points in HTML?

2 Answers2

Linked