这个HTML结构是否有效？ UL> DIV> {LI，LI}，DIV> {LI，LI}，DIV> {李，李} [英] Is this HTML structure valid? UL > DIV > { LI, LI } , DIV > { LI, LI } , DIV > { LI, LI }

问题描述

这个HTML结构是否有效？

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

我将li的内部div插入到ul中。你怎么看？这个结构是否在语义上是有效的，并且会被识别为单个列表？

不， div 不允许作为 ul 的直接子元素。无论何时您有疑问，请使用W3C验证您的网页或检查关于W3C的相应文章：

4.5.6 ul元素

分类

流量内容。

可以使用此元素的上下文：

其中流量内容。

内容模型：

零或多个li元素。

内容属性：

全球属性

DOM inte rface：

界面HTMLUListElement：HTMLElement {};

您可以使用

 < ul class =blog-category> 
< li class =three column> 
< ul> 
< li>第1项< / li> 
< li>第2项< / li> 
< li>第3项< / li> 
< / ul> 
< / li> 
< li class =three column> 
< ul> 
< li>第4项< / li> 
 ... 
< / ul> 
< / li> 
< / ul> 
  

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?

解决方案

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>

这篇关于这个HTML结构是否有效？ UL> DIV> {LI，LI}，DIV> {LI，LI}，DIV> {李，李}的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！