Reputation: 2440

HTML5 error, does anyone know what it means?

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.

Upvotes: 0

Answers (4)

Bram Vanroy

Reputation: 28554

As said before: <li> should ALWAYS be embedded into <ul> or <ol> tags! Try this:

<div class="signin">
<?php

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

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

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

And the other one:

< nav class = "navigation" >
  <ul>
    < 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 >
  </ul>
< /nav>

Note that I changed your 'div' to 'nav', because this is the preferred element to use in HTML5 for navigation blocks.

Upvotes: 1

Gordon

Reputation: 317187

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>