How to write W3C compliant multi-level bullet points in HTML?
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'
Solution 1:
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>
Solution 2:
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>