Blog in Archive mode

As you may have noticed, this blog project is in archive mode. We enjoyed sharing with you. Maybe we'll try again one day.

HTML Tip: Creating Nested Lists

Creating valid nested lists in HTML can be tricky. However, it really isn't that hard once you get that hang of it. The tendency is to put the second <ul> after the close of the <li> that it is a sub item of. Like this:

<ul>
 <li>Item one</li>
 <li>Item two</li>
  <ul>
   <li>Sub Item one</li>
   <li>Sub Item two</li>
   <li>Sub Item three</li>
  </ul>
 <li>Item three</li>
</ul>

That, however, is not the valid way of doing it may work in some browsers, but it will give you fits when you try working with it.

Instead, try this:

<ul>
 <li>Item one</li>
 <li>Item two
  <ul>
   <li>Sub Item one</li>
   <li>Sub Item two</li>
   <li>Sub Item three</li>
   </ul>
  </li>
 <li>Item three</li>
</ul>

So what is the difference? The second example puts the sub items inside the parent <li> giving it a semantically correct location.

Once you get that figured out, it will save you a bunch of time!