HTML - Lists/Bullets

Any bulleting or numbering you've done in word processors can be done in HTML, it just has a different name, lists. There are two types of lists, the ordered list and the unordered list. The tags are <ol></ol> and <ul></ul>, respectively. The only trick to creating a list is to making sure you have the tags in the right order and the content in the right spots. There is a third tag set for creating a list and it's used in ordered and unordered lists, the <li></li> tags.

The <ol></ol> and <ul></ul> tags really just specify what kind of list it is, the <li></li> tags specify what each bullet contains. Let's start with the unordered list.

There is really only one attribute for list tags that you have to worry about, the type="". Here's what one might look like:

<ul type="disc"></ul>

Then you put in all your content between <li></li> tags in this layout:

<ul type="disc">
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>

The same goes for ordered lists too:

<ol type="1">
  <li>First Item</li>
  <li>Second Item</li>
  <li>Third Item</li>
  <li>Fourth Item</li>
</ol>

The only real difference between ordered and unordered lists is what types they support. The unordered list supports three types of bullets: disc, square and circle.

type="disc", type="square" and type="circle"

The ordered list supports five types: 1, a, A, i and I. These are all numbering styles; the type "1" lists "1, 2, 3..."; "a" lists "a, b, c..."; "A" lists "A, B, C..."; and "i" and "I" list the different cases of roman numerals.

type="1", type="a", type="A", type="i" and type="I"

The only other thing you might encounter when making lists is that you might want to start a list from a certain number, like 10. Just put in the start="" attribute with a value of "10". Try it out!

Practice

Now you're ready to move on to Basic Tables.

Introduction | Basic Formatting | Images | Linking
Additional Formatting | Lists/Bullets | Basic Tables
Advanced Tables | Forms | HTML Cheat Sheet