14

Is this HTML structure valid?

<ul class="blog-category">
  <div class="three column">
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
  </div>
  <div class="three column">
    <li>Item 4</li> 
    <li>Item 5</li> 
    <li>Item 6</li> 
  </div>
  <div class="three column">
    <li>Item 7</li> 
    <li>Item 8</li> 
    <li>Item 9</li> 
  </div>
</ul>

I am inserting li's inside div which is within ul. What do you think? Is this stucture semantically valid and will that be recognized as a single list?

Sam
  • 170
  • 1
  • 2
  • 6

4 Answers4

27

No, div is not allowed as a direct child of ul. Whenever you're in doubt, validate your page with W3C or check the corresponding article on W3C:

4.5.6 The ul element

Categories
Flow content.

Contexts in which this element can be used:
Where flow content is expected.

Content model:
Zero or more li elements.

Content attributes:
Global attributes

DOM interface:
interface HTMLUListElement : HTMLElement {};

Instead you could use

<ul class="blog-category">
    <li class="three column">
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </li>
    <li class="three column">
        <ul>
            <li>Item 4</li>
            ...
        </ul>
    </li>
</ul>
Community
  • 1
  • 1
kba
  • 19,333
  • 5
  • 62
  • 89
1

<div>'s aren't technically valid inside of <ul>'s. W3 validator returns this result:

Element div not allowed as child of element ul in this context

It would make more sense to group the code you have different, such as:

<div class="blog-category">
<ul class="three-column">
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
    <li>Item 4</li> 
    <li>Item 5</li> 
    <li>Item 6</li> 
    <li>Item 7</li> 
    <li>Item 8</li> 
    <li>Item 9</li> 
</ul>
</div>
Charlie
  • 11,380
  • 19
  • 83
  • 138
0

It is valid also do the following:

          <ul>
            <li>
                <div>Title</div>
                <ul>
                    <li>Item</li>
                    <li>Item</li>
                </ul>
            </li>
            <li>
                <div>Title</div>
                <ul>
                    <li>Item</li>
                    <li>Item</li>
                </ul>
            </li>
        </ul>

I've checked in http://validator.w3.org/check

Nahum Nuñez
  • 11
  • 2
0

No, this is not valid, neither in HTML4, nor in XHTML or in HTML5.

If you'll validate this against the w3c markup validator you'll probably get something like:

Element div not allowed as child of element ul

More about lists can be found here.

Bjoern
  • 15,934
  • 4
  • 43
  • 48