Menu
Are these code pieces syntactically correct? I am using first code piece to build a navigation (nesting header tag inside ul). If it is wrong or it is a bad practice what are the drawbacks.
<ul class="site-title left">
<header>
<li><h1>site title</h1></li>
</header>
</ul>
and
<ul class="site-title left">
<span>
<li><h1>site-title</h1></li>
</span>
</ul>
643
For your code to be valid you can't put any tag inside a <ul> other than an <li> .
Nesting tags can take on many different forms and can be complex. For example, some tags allow multiple tags or multiple occurrences of the same tag to be nested, while other tags do not allow nesting of any tags. You can also nest levels of certain tags, that is, nested tags within other nested tags.
A nested list is a list inside another list. You can create a nested unordered list, or a nested ordered list, or even an ordered list nested inside an unordered one. Remember that the only direct child of the ul tag is li . You create the nested unordered list under the main list's item of your choosing.
According to the W3C Validator using an <h2> tag inside a <li> tag is perfectly valid.
No
According to the spec, the ul element is:
The ul element represents a list of items, where the order of the items is not important — that is, where changing the order would not materially change the meaning of the document.
The items of the list are the li element child nodes of the ul element.
So the children of the UL element must be li elements.
More specifically, it says under the ul tag:
Content model:
Zero or more li elements.
It is however, perfectly legal to do:
<ul class="site-title left">
<li><span><h1>site-title</h1></span></li>
</ul>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
