Path // www.yourhtmlsource.com → Text → LISTS

Lists

by Ross Shannon

Lists are a great way of laying out information in web pages, because they are simple to read and look good. Lots of people seem to think that the bullet points are little images, but in reality they are all generated through some rather simple HTML code. There are a couple of different types of lists too — check it out below.

Clock This page was last updated on 2012-08-21


Unordered Lists

Lists follow a common skeleton every time — an outer container tag, and a new tag for each bullet. Observe:

<ul>
  <li>Bullet 1</li>
  <li>Bullet 2</li>
  <li>Bullet 3</li>
</ul>

Which would create:

  • Bullet 1
  • Bullet 2
  • Bullet 3

Let’s explain:

<ul>
stands for Unordered List, which means that the bullets are not ranked or numbered in any way, they’re all the same.
<li>

means List Item, each one corresponding to a bullet.

Closing </li> tags are not strictly necessary in HTML 4, but I recommend that you always use them. They’ll help your stylesheets work better and will make a future transition to XHTML much easier. Leaving them out now may leave you with a tonne of work in the future.

You also don’t need to add in line breaks to go on to the next point, it will all be taken care of for you. Once a block of text is made into a bullet you can continue on formatting the text normally, and adding in paragraphs, images and the like.

Different bullets

It’s a simple matter of adding an attribute to change the nature of your bullets. For square ones, add type="square", and for empty circles, add type="circle" to the ul tag. They can also be added to lis to affect individual points. Examples:

  • Is it a square? Oh, good.
  • And this is a circle. Joy.

If you nest your lists (put one inside another), they will be indented underneath and the bullet type will change to show the transition, from disc (the default, full circle) to circle to square. Of course you can step in and change this order manually if you want. Note that these values must all be in lowercase.

Ordered Lists

If you want your list to be ordered instead of unordered, it’s a simple matter of just substituting the <ul> elements with <ol>s, which of course stand for Ordered Lists.

<ol>
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
</ol>

This will create:

  1. List Item 1
  2. List Item 2
  3. List Item 3

See? All that was changed was that one letter. Beyond that, the rest of the structure remains intact, meaning you still use lis the same you did already. Your browser will keep adding numbers if you keep adding list items. You can add or take away any of the items and the list will renumber itself into order.

You can nest different types of lists into each other if you want, just remember to close them correctly. The progression of bullet-types that happens when you nest still occurs if you put it under an ol.

Different types of numbers

You can change the stylings of your ordered lists too, with the same attribute syntax as before, just using different values. You can do Roman numerals, letters, and both of the above in small characters. The full list:

  1. type="A"
  2. type="a"
  3. type="I"
  4. type="i"

Note that even if the list was to be labelled ’b’ or ’iv’, the attribute value is still set as the first number — i.e. ‘a’ and ‘i’.

Changing the start-point

If you need to start the count at a number other than 1, you just add another attribute, like so:

<ol start="5">

You can also step in the middle of a list and change the number of an item (and therefore all of the items that follow). Add value="9" to an item and the list will skip its numbering to 9 and then continue on to ten and onwards from there.

Definition Lists

There is this third list type, useful for information that comes in pairs. The tag for a definition list is, predictably <dl>. A one-term list would look like this:

<dl>
  <dt>Ross Shannon</dt>
  <dd><em>noun</em>; Red-haired rascal.</dd>
</dl>

And that’ll create:

Ross Shannon
noun; Red-haired rascal.
<dt>
stands for Definition Term. It is not indented.
<dd>
stands for Definition Description. It appears indented. You don’t have to keep these tags in pairs, many dds are allowed under the same dt. Also, don’t worry — you can use these lists for any purpose without compromising their logical meaning. ‘Definition’ lists was just a misleading name they were given. Once again, the end tags aren’t strictly necessary, but take it from someone who knows: use them.

And that's the lot.