HTML5 Standards of Nesting Div in Li or Dl

HTML5 standards of nesting div in li or dl

This information is incorrect - div elements are regarded flow content and are very well allowed inside li elements. You might have confused it with ul/ol elements, which may only contain lis accordingly.

What has changed in HTML5 is, that it does not have block-level and inline elements anymore. Instead there is a more complex distinction of the elements into several categories.

To see what is allowed inside an element according to HTML5, see the description of the specific tag where the section "Content model" tells you which content is allowed inside this particular element.

EDIT: addressing the confusion in the comments about list elements

(according to HTML living standard as of 2019-07-30)

There are several types of lists - the most common ones are unordered (ul), and ordered (ol) lists. ul and ol are the "container" elements that only hold list item (li) as child elements - no other elements are allowed*. The li element itself can contain arbitrary flow content.

_{* (technically they are also allowed to hold "script-supporting" elements}

<ol>
   <li></li>
   ...more li elements
</ol>

<ul>
   <li></li>
   ...more li elements
</ul>

For description lists (dl) there used to be the same restriction that they can only contain their respective child elements dt and dd, but recent changes allow div child elements as well, as long as those divs themselves contain a dt or dd.

<dl>
  <dt>term</dt><dd>description</dd>
</dl>

// the following is now valid as well:

<dl>
  <div><dt>term</dt><dd>description</dd></div>
</dl>

As a mnemonic: Container elements should only contain their respective child elements and those child elements can contain any content you like.

Is div inside list allowed?

Yes it is valid according to xhtml1-strict.dtd. The following XHTML passes the validation:

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Test</title>
</head>
<body>
<ul>
  <li><div>test</div></li>
</ul>
</body>
</html>

Proper way to make HTML nested list?

Option 2 is correct.

The nested list should be inside a <li> element of the list in which it is nested.

Link to the W3C Wiki on Lists (taken from comment below): HTML Lists Wiki.

Link to the HTML5 W3C ul spec: HTML5 ul. Note that a ul element may contain exactly zero or more li elements. The same applies to HTML5 ol.
The description list (HTML5 dl) is similar,
but allows both dt and dd elements.

More Notes:

dl = definition list.
ol = ordered list (numbers).
ul = unordered list (bullets).

Official W3C link (updated).

Insert div and li before and after some elements

try this http://jsfiddle.net/9LNPb/1/

      $( 'input' ).wrap( "<div class='ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset ui-input-has-clear'></div>" );
var divs = $("label , .ui-input-text");
for(var i = 0; i < divs.length; i+=2) {
  divs.slice(i, i+2).wrapAll("<li class='ui-field-contain ui-li-static ui-body-inherit'>");
}

input

<label>Hi</label>
<input type="text">

output

   <li class="ui-field-contain ui-li-static ui-body-inherit">
       <label>Hi</label>
       <div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset ui-input-has-clear">
         <input type="text">
       </div>
   </li>

Treating <dd> like a child of <dt>

working example

.red {    color: red;}
.blue {    color: blue;}
dt, dd {  padding: 5px;}
.red ~ dd,.red ~ .blue ~ .red ~ dd,.red ~ .blue ~ .red ~ .blue ~ .red ~ dd {    border-left: 3px solid red;}
.blue ~ dd,.blue ~ .red ~ .blue ~ dd,.blue ~ .red ~ .blue ~ .red ~ .blue  ~ dd {    border-left: 3px solid blue;}

<dl>  <dt class="red">Red</dt>  <dd>after red</dd>  <dd>Red also</dd>
  <dt class="blue">Blue</dt>  <dd>after blue</dd>  <dd>should be blue</dd>
  <dt class="blue">Blue</dt>  <dd>should be blue</dd>  <dd>should be blue</dd>
  <dt class="red">Red</dt>  <dd>should be red</dd>  <dd>should be red</dd>

  <dt class="blue">Blue</dt>  <dd>should be blue</dd>  <dd>should be blue</dd>

  <dt class="blue">Blue</dt>  <dd>should be blue</dd>  <dd>should be blue</dd>

  <dt class="red">Red</dt>  <dd>should be red</dd>  <dd>should be red</dd>
  <dt class="red">Red</dt>  <dd>should be red</dd>  <dd>should be red</dd>
  <dt class="red">Red</dt>  <dd>should be red</dd>  <dd>should be red</dd>

  <dt class="blue">Blue</dt>  <dd>should be blue</dd>  <dd>should be blue</dd>
  <dt class="blue">Blue</dt>  <dd>should be blue</dd>  <dd>should be blue</dd></dl>

HTML5 Standards of Nesting Div in Li or Dl