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

Techboy picture Techboy · Dec 16, 2010 · Viewed 65.4k times · Source

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'

Answer

David says reinstate Monica picture David says reinstate Monica · Dec 16, 2010

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>