33

We're getting some suspicious HTML from our designer. Is the following valid? (note the UL inside the UL)

<ul>
    <li>1</li>
    <ul>    
        <li>1.1</li>
        <li>1.2</li>
        <li>1.3</li>
    </ul>
    <li>2</li>
    <ul>    
        <li>1.1</li>
        <li>1.2</li>
        <li>1.3</li>
    </ul>
</ul>
willem
  • 25,977
  • 22
  • 75
  • 115
  • 2
    Possible duplicate of [Can we use any other TAG inside
      along with
    • ?](http://stackoverflow.com/questions/2161337/can-we-use-any-other-tag-inside-ul-along-with-li)
     – chharvey Jul 21 '16 at 14:46

7 Answers7

35

According to the HTML 4 specs, the XHTML 2 specs and the HTML 5 specs that code is invalid.

HTML 4

<!ELEMENT UL - - (LI)+

This means that inside a <ul> there can only be multiple <li> elements.

XHTML

Both types of lists (ul|ol) are made up of sequences of list items defined by the li element.

HTML 5

Content model:
Zero or more li and script-supporting elements.

Note that script-supporting elements are elements that are not rendered, and currently include only <script> and <template>.

Mark Amery
  • 143,130
  • 81
  • 406
  • 459
Gabriele Petrioli
  • 191,379
  • 34
  • 261
  • 317
12

No, it is not valid. The only allowed elements inside ul are li.

Corrected sample:

<ul>
    <li>
        <span>1</span>
        <ul>    
            <li>1.1</li>
            <li>1.2</li>
            <li>1.3</li>
        </ul>
    </li>
    <li>
        <span>2</span>
        <ul>    
            <li>1.1</li>
            <li>1.2</li>
            <li>1.3</li>
        </ul>
    </li>
</ul>

Don't allow your designer to write any HTML code for you. Hire a front-end developer that really knows how to deal with HTML and XHTML.

Daniel O'Hara
  • 13,307
  • 3
  • 46
  • 68
2

That is indeed not valid; what was probably meant is:

<ul>
  <li>1
    <ul>
    <!-- ... -->
    </ul>
  </li>
</ul>

Also, what is your designer doing writing the HTML?

Williham Totland
  • 28,471
  • 6
  • 52
  • 68
  • 1
    Often developers that work on the front-end are just called designers. She might not actually mean that her graphic designer is writing code, not that they should not, HTML is not hard to pick up. – JGallardo Apr 29 '13 at 17:51
2

This isn't valid. To create nested lists, you have to put the ul tag inside a li tag:

<ul>
<li>1</li>
<li>
    <ul>    
        <li>1.1</li>
        <li>1.2</li>
        <li>1.3</li>
    </ul>
</li>
<li>2</li>
<li>
    <ul>    
        <li>1.1</li>
        <li>1.2</li>
        <li>1.3</li>
    </ul>
</li>

Joris Ooms
  • 11,880
  • 17
  • 67
  • 124
2

You should search for HTML standards information at W3C site. For list elements you can find it here: http://www.w3.org/wiki/HTML/Elements/ul. It says that ul should only contain li elements. In your code nested ul's should be placed inside li's.

berni
  • 1,955
  • 1
  • 19
  • 16
1

Its invalid. I just ran a check against validator.w3.org

Here is the error

Line 6, Column 8: document type does not allow element "ul" here; assuming missing "li" start-tag

naveen
  • 53,448
  • 46
  • 161
  • 251
0

Not only is it not valid, but <li>1</li> isn't necessary. Why not:

<ol>
  <li>&nbsp; <!--if no content, some browsers render nested li on same line-->
    <ul>
      <li>1.1</li>
      <li>1.2</li>
      <li>1.3</li>
    </ul>
  </li>
  <li>&nbsp;
    <ul>
      <li>1.1</li>
      <li>1.2</li>
      <li>1.3</li>
    </ul>
  </li>
</ol>
froggomad
  • 1,747
  • 2
  • 17
  • 40