nesting other html tags inside ul except li

Question

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>

Answer 1

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>

Answer 2

Validation Output: 1 Error

Error Line 25, Column 51: Element h1 not allowed as child of element span in this context. (Suppressing further errors from this subtree.)

            <li><span><h1 class="Tabellenkopf">Menü</h1></span></li>