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 attributesDOM 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>
<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>
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
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.