Question

I am using HTML5 and in the process of validating, this error is throughout my pages. I am using PHP within my code as well, I don’t know if this is causing the error. The error is:

Element li not allowed as child of element div in this context

Here is one DIV that brings up this error:

<div class="signin">
<?php

if (isset($_SESSION['userID'])){

echo"
<li><a href='logout.php'>Logout</a></li>";}

else{ echo "
<li><a href='signin.php'>Sign in</a></li>
<li><a href='register.php'>Register</a></li>
  ";}?>
</div>

And here is another:

    <div class="navigation">


<li class="navbutton <?php if($navsection == 'home') {echo ' current';}?>" id="navbuttonleft" >
  <a href="index.php">Home</a></li>

    <li class="navbutton  <?php if($navsection == 'products') {echo ' current';}?>">
      <a href="products.php?main=go">Products</a></li>

          <li class="navbutton" <?php echo ($navsection == 'myaccount') ? ' class="current"' : ''; ?>>
          <a href="myaccount.php">My Account</a></li>

             <li class="navbutton" <?php echo ($navsection == 'about') ? ' class="current"' : ''; ?>>
             <a href="aboutus.php">About us</a></li>

                 <li class="navbutton" <?php echo ($navsection == 'contact') ? ' class="current"' : ''; ?>>
                  <a href="contactus.php">Contact Us</a></li>

                        <li class="navbutton" <?php echo ($navsection == 'sitemap') ? ' class="current"' : ''; ?>>
                          <a href="sitemap.php">Site Map</a></li>



</div>

Any suggestions are appreciated.

Answer 1

HTML (even HTML5) follows rules by which the elements may be nested to structure your document semantically. In your case, the error means you forgot to wrap the <li> elements into a <ul>, <ol> or <menu> element, e.g. you forgot to denote beginning and end of a list.

Quoting http://dev.w3.org/html5/html-author/#the-li-element

4.3.5.9 The li element

The li element represents a list item.

Start tag: required
End tag: optional
Categories: None.
Contained By:

• Inside ol elements.
• Inside ul elements.
• Inside menu elements.

Content Model: Flow content.

Example

<ul>
   <li>Unordered First Item with Ordered Sublist
       <ol>
           <li>Ordered First Item</li>
           <li>Ordered Second Item</li>
           <li>Ordered Third Item</li>
       </ol>
   <li>Unordered Second Item</li>
   <li>Unordered Third Item</li>
</ul>

Output

• Unordered First Item with Ordered Sublist
  1. Ordered First Item
  2. Ordered Second Item
  3. Ordered Third Item
• Unordered Second Item
• Unordered Third Item