Grouping Content - Ordered and Unordered List

Unordered List

An unordered list represents a list of items where the order of the items does not affect the meaning of the document.

An example would be:

<p>Things I Hate</p>
<ul>
<li>War</li>
 <li>Death</li>
<li>Famine</li>
</ul>

which is rendered as:

Things I Hate

• War
• Death
• Famine

I could rearrange the order of the items in the list and the document would still make perfect sense and be valid.

An unordered list is made up of two elements, the ul element and the li element.

The ul element represents the list itself and the li element represents each of the items in the list.

Ordered List

The ordered list represents a list where the ordering does matter.

An example would be the recipe for making a cake.

<p>Super Simple Cake Recipe</p>
<ol>
<li>Mix all of the ingredients</li>
<li>Pour the mixture into the cake tins</li>
<li>Place them in the oven until they are golden brown</li>
<li>Cool on a wire rack before serving</li>
</ol>

which is rendered as:

Super Simple Cake Recipe

1. Mix all of the ingredients
2. Pour the mixture into the cake tins
3. Place them in the oven until they are golden brown
4. Cool on a wire rack before serving

Since the ordering is important, it would affect the meaning of the document if I were to change it to...

Super Simple Cake Recipe

1. Place them in the oven until they are golden brown
2. Pour the mixture into the cake tins
3. Cool on a wire rack before serving
4. Mix all of the ingredients

...the document would be incorrect.

The ordered list has a number of useful attributes which can be used to effect how the list is displayed.

The Reversed Attribute

When the reversed attribute is included on a list, it represents a list that is in descending order or is already backwards in some way.

<p>My top three favourite films</p>
<ol reversed=reversed>
<li>Kung Fu Panda</li>
<li>Frozen</li>
<li>The Princess Bride</li>
</ol>

This will then be displayed from 3 down to 1. Instead of 1 to 3. Although at present, Internet Explorer doesn't support this. (24/02/2016)

My top three favourite films:

1. Kung Fu Panda
2. Frozen
3. The Princess Bride

The Start Attribute

When the start attribute is included on a list, then it changes the number that the list starts on.

<p>A list of films starting at number 3</p>
<ol start="3">
<li>Kung Fu Panda</li>
<li>Frozen</li>
<li>The Princess Bride</li>
</ol>

3. Kung Fu Panda
4. Frozen
5. The Princess Bride

The Type Attribute

The type attribute is used to adjust the display of the numbers on the list.

The numbers can be displayed as:

• Decimal (1, 2, 3)
• Lowercase Alphabetic (a, b, c)
• Uppercase Alphabetic (A, B, C)
• Lowercase Roman Numeral (i, ii, iii)
• Uppercase Roman Numeral (I, II, III)

The value of the type attribute should be set to the first value of that type, e.g., 1 for Decimal, and I for Uppercase Roman Numerals.

If you have a number less then zero (from using the start or reversed attributes), then the list will also use the decimal display for those numbers.

Exercise

1. Go onto https://jsfiddle.net/ or create an empty HTML document
2. Type in the examples above
3. Practice using each of the attributes until you are comfortable with them

Feel free to share your experiences and opinions related to this post in the comments and if you liked this blog post and can't wait to read more, bookmark this site or subscribe to the RSS Feed