Jump to content

List inside a list


Recommended Posts

I placed a few orderd lists inside another orderd list to have a nested structure.
On my screen, i have what i was going for and it works perfectly and works user friendly.

However, HTML validator says I have a few errors (only on my nested list). I have cut down the code to sayd code.

So how should i solve this problem?
Is this an error inside the validator itself? Since it seems to be working perfectly.


Kind regards =D



Code:


 

 

<!DOCTYPE html>
<html lang="en">
<head>
<title>Title</title>
</head>
<body>
<ol>
<li><a href="#lijst1">Getting Started</a></li>
<ol>
<li><a href="#lijst11">Where to obtain crew skills?</a></li>
<li><a href="#lijst12">Crew Window</a></li>
</ol>
<li><a href="#lijst2">Type of crew skills</a></li>
<ol>
<li><a href="#lijst21">Crafting skill</a></li>
<ol>
<li><a href="#lijst211">The crafting window</a></li>
<li><a href="#lijst212">Companion at work</a></li>
<li><a href="#lijst213">Assembly components / Bounded attachementsonent</a></li>
<li><a href="#lijst214">Reverse engineering</a></li>
<li><a href="#lijst215">Schematics</a></li>
<li><a href="#lijst216">The crafting skills</a></li>
</ol>
<li><a href="#lijst22">Mission skills</a></li>
<ol>
<li><a href="#lijst221">The mission window</a></li>
<li><a href="#lijst222">Companion at work</a></li>
<li><a href="#lijst223">Mission Discoveries</a></li>
<li><a href="#lijst224">The mission skills</a></li>
</ol>
<li><a href="#lijst23">Gathering skill</a></li>
<ol>
<li><a href="#lijst231">Missions</a></li>
<li><a href="#lijst232">Resource nodes</a></li>
<li><a href="#lijst233">The gathering skills</a></li>
</ol>
</ol>
<li><a href="#lijst3">Companions</a></li>
<li><a href="#lijst4">Non-subscriber guide</a></li>
<ol>
<li><a href="#lijst41">Free-to-play</a></li>
<li><a href="#lijst42">Preferred players</a></li>
</ol>
<li><a href="#lijst5">Credits</a></li>
</ol>
</body>
</html>

 

 

Link to post
Share on other sites

As the validator said ol element cannot be direct child of parent element ol

<ol>
        <li><a href="#lijst1">Getting Started</a></li> <!-- valid direct li child element of parent OL -->
        <ol> <!-- invalid direct OL child element of parent OL -->
              <li>....</li>
              <li>....</li>
              <li>....</li>
        </ol>
</ol>

nesting involves wrapping ol in parent li element

<ol>
    <li><a href="#lijst1">Getting Started</a> 
        <ol> <!-- valid direct ol child element OF parent LI-->
              <li>....</li>
              <li>....</li>
              <li>....</li>
        </ol>
    </li><!-- valid direct li child element of parent OL -->
</ol>
  • Like 1
Link to post
Share on other sites
  • 1 month later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...