CODEWITHSUNDEEP
html
John Mills
John Mills

Reputation: 10263

Allowed child elements of ul

I'm maintaining a legacy app and came across the following code:

<ul>
   <li>...</li>
   <li>...</li>
   <li>...</li>
   <li>...</li>
   <li>...</li>
   <div>
      <li>...</li>
      <li>...</li>
   </div>
</ul>

I've never seen div tags as child elements of ul elements before. The HTML renders fine in browsers.

Is this valid HTML? My gut feeling is that this is strange usage. However, perhaps this is completely normal and valid? Is nesting a div element inside a ul element appropriate usage? Would you recommend for or against this?

Upvotes: 28

Views: 34305

Answers (3)

Snger
Snger

Reputation: 1384

You can use http://validator.w3.org/ to check it:

Errors:
1.document type does not allow element "DIV" here; assuming missing "LI" start-tag
2.document type does not allow element "LI" here; missing one of "UL", "OL" start-tag

The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

Upvotes: 8

Ahsan Khurshid
Ahsan Khurshid

Reputation: 9469

The HTML unordered list element (<ul>) represents an unordered list of items, namely a collection of items that do not have a numerical ordering, and their order in the list is meaningless. Typically, unordered-list items are displayed with a bullet, which can be of several forms, like a dot, a circle or a squared. The bullet style is not defined in the HTML description of the page, but in its associated CSS, using the list-style-type property.

Permitted content

zero or more <li> elements, eventually mixed with <ol> and <ul> elements.

Example Usage:

<ul>
  <li>first item</li>
  <li>second item</li>
  <li>third item</li>
</ul>

You may use<div> inside <li> tag like this:

<ul>
  <li>first item</li>
  <li>second item</li>
  <li>
      third item
      <div>Third Item Contente</div>
  </li>
</ul>

Upvotes: 9

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201568

It is not valid in any version of HTML, see e.g. HTML 4.01 on ul.

Browsers allow it, though, and parse it so that div becomes a child of ul, and they let you style the div too. This is probably the reason why this markup has been used.

Upvotes: 20

Related Questions