CODEWITHSUNDEEP
html
willem
willem

Reputation: 27027

Is anything except LI's allowed in a UL?

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>

Upvotes: 33

Views: 17213

Answers (7)

froggomad
froggomad

Reputation: 1915

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>

Upvotes: 0

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196002

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>.

Upvotes: 35

Williham Totland
Williham Totland

Reputation: 29009

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?

Upvotes: 2

berni
berni

Reputation: 1975

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.

Upvotes: 2

codeandcloud
codeandcloud

Reputation: 55210

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

Upvotes: 1

Joris Ooms
Joris Ooms

Reputation: 12038

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>

Upvotes: 2

Daniel O&#39;Hara
Daniel O&#39;Hara

Reputation: 13438

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.

Upvotes: 12

Related Questions