这个HTML结构是否有效？ UL> DIV> {LI，LI}，DIV> {LI，LI}，DIV> {LI，LI}

这个HTML结构是否有效？

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

我在里面插入里面的div。 你怎么看？ 这个结构在语义上是否有效，是否会被认为是一个单一的列表？

Answer 1

不， div不能作为ul的直接子。 每当你有疑问时， 用W3Cvalidation你的页面或者检查W3C 的相应文章 ：

4.5.6 ul元素

分类
stream量内容 。

可以使用这个元素的上下文：
预计stream量内容 。

内容模型：
零个或多个li元素。

内容属性：
全局属性

DOM界面：
interface HTMLUListElement : HTMLElement {};

相反，你可以使用

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

Answer 2

<div>在技​​术上在<ul>的内部是无效的。 W3validation器返回这个结果：

在这种情况下元素div不允许作为元素ul的子元素

把你有不同的代码分组更有意义，比如：

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

Answer 3

不，这在HTML4，XHTML或HTML5中都是无效的。

如果你使用w3c标记validation器进行validation，你可能会得到如下的结果：

元素div不允许作为元素ul的子元素

更多关于名单可以在这里find。

Answer 4

这也是有效的做到以下几点：

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

我检查了http://validator.w3.org/check

Answer 5

这是有效的HTML5：

 <ul> <li class="col"> <div>Title</div> <ul> <li>Item</li> <li>Item</li> </ul> </li> <li class="col"> <div>Title</div> <ul> <li>Item</li> <li>Item</li> </ul> </li> </ul>