Unordered list types

Section 1 - Introduction
Section 2 - Basics
Section 3 - Next Level
Section 4 - Advanced
      Fancy Lists
         Compact lists
         Nesting lists
         Unordered types
         Ordered types
         Start numbers
         Putting it together
         You Try It!
      Forms
      Advanced Tables
      Frames
      Style Sheets
      Image Maps
Section 5 - Publishing
Section 6 - Extras
Appendices
When you nest one unordered list inside another list, you'll notice something interesting:
  • This item has a disc in front of it.
  • So does this
    • But this one has a circle!
    • That's what a list within a list shows.
      • And what's this? A square?!
      • That means we're three lists deep!
Those three little shapes denote three types of unordered lists. The disc is always the first default.

So what if you're afraid of circles, or think pointy tings are cool. Is there a way to get a single list, unnested, with squares as it's little symbols? Well, yes, or this would be pointless to even mention.

To change the shape of the bullets, you need to specify the type you'd like. Here are the three types:
<ul type="disc">
<ul type="circle">
<ul type="square">

Let's see these in action.

Code
Juice Menu:
<ul type="square">
<li>Apple</li>
<li>Grape</li>
<li>Orange</li>
</ul>
What you see
Juice Menu:
  • Apple
  • Grape
  • Orange
You can do the same thing, only specifying disc or circle as the type. While this is possible, the newest versions of HTML de-emphasize this. You can still use it though.
Back Home Forward