Lists in HTML

HTML provides two different types of lists:

• unordered lists – where the order of items doesn’t matter
• ordered lists – where the order of items matters

Lists are a little different from the previous tags we’ve seen. Like other HTML tags, they need a start and end tag, but lists are composed of the combination of two different HTML tags:

• the tags marking the start and end of the list
• the tags marking each individual list item

Contents

1. List Items
2. Unordered Lists
3. Ordered Lists
   1. Tag Attributes
   2. reversed
   3. start
4. Summary
5. Playing Around
6. References

List Items

Regardless of whether you use an unordered list or an ordered list, the contents of that list will always contain list items.
List items are enclosed between a starting <li> and ending </li> tags.

<li>This is an item in a list</li>

You can place pretty much anything you like inside a list item – including paragraphs, headers, other lists, etc – as long as they are contained between the opening and closing <li> tags.

Unordered Lists

Unordered lists are for listing things in which the order doesn’t matter – for example, the ingredients in a recipe or a safety checklist, etc.
Items in an unordered list are contained between a starting <ul> and ending </ul> tags.

<ul>

</ul>

Since the above list doesn’t contain any items, there is nothing to be seen in the document. It is an error to have an empty list.

<ul>
  <li>This is an item in a list</li>
  <li>This is another item in a list.</li>
  <li>This is a complex list item.
    <p>We have a paragraph embedded in it.</p>
    <h3>We also have a level 3 heading embeded.</h3>
    <p>And close off with a final paragraph.</p>
  </li>
  <li><p>This is another complex list item because it
    contains another list inside.</p>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </li>
</ul>

Obviously, the code fragment above should be embedded inside a standard HTML5 document structure.¹

Ordered Lists

Ordered lists are for listing things that have a specific order or enumeration – for example, a top 10 list, or step-by-step instructions.
Items in an ordered list are contained between a starting <ol> and ending </ol> tags.

<ol>

</ol>

Since the above list doesn’t contain any items, there is nothing to be seen in the document. It is an error to have an empty list.

<ol>
  <li>This is an item in a list</li>
  <li>This is another item in a list.</li>
  <li>This is a complex list item.
    <p>We have a paragraph embedded in it.</p>
    <h3>We also have a level 3 heading embeded.</h3>
    <p>And close off with a final paragraph.</p>
  </li>
  <li><p>This is another complex list item because it
    contains another list inside.</p>
    <ol>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ol>
  </li>
</ol>

Obviously, the code fragment above should be embedded inside a standard HTML5 document structure.
The list items are numbered sequentially and in ascending order beginning from 1.

Tag Attributes

All HTML elements can have additional information embedded in the <start> tag. This information is known as attributes.
Attributes provide additional information to the web client about the HTML element.
As with HTML tags, attribute names are case-insensitive.

reversed

The reversed attribute indicates that the numbering should be in reverse order – i.e. descending.
Place the tag inside the opening <ol> tag and the browser will reverse the displayed order of the numbers. It only changes the number ordering, it does not change the ordering of the items in the list.

<p>Normal list ordering:</p>
<ol>
  <li>Item one</li>
  <li>Item two</li>
  <li>Item three</li>
</ol>

<p>Reversed list ordering:</p>
<ol reversed>
  <li>Item one</li>
  <li>Item two</li>
  <li>Item three</li>
</ol>

<p>Notice the order of the list items does not change.</p>

start

Sometimes you might need to start the list numbering at a value other than 1 – this can be done using the start attribute. Unlike the reversed attribute, the start attribute consists of a name – value pair. While the name is case-insensitive, the value may be case-sensitive (depends on what kind of value it is). The value is always between single (’) or double (“) quotes:

<p>Normal list ordering:</p>
<ol>
  <li>Item one</li>
  <li>Item two</li>
  <li>Item three</li>
</ol>

<p>List with a different start:</p>
<ol start="101">
  <li>Item one</li>
  <li>Item two</li>
  <li>Item three</li>
</ol>

<p>Using different <strong>start</strong> values allows
  you to continue a list over several pages.</p>

Summary

HTML provides two different types of lists:

• unordered lists (<ul>) – where the order of items doesn’t matter
• ordered lists (<ol>) – where the order of items matters

Lists are composed of the combination of two different HTML tags:

• the tags marking the start and end of the list (<ul> or <ol>)
• the tags marking each individual list item (<li>)

All HTML elements can have attributes which give the client additional information about the element.
Ordered lists can use the attributes:

• reversed – to indicate the numbering should be in descending order
• start – to indicate the starting number for the lists

List should be used to structure the information in the document, not for indenting.

Playing Around

The best way to learn is to play around with what you have learned.
Some webpage ideas are:

• your resume (or curriculum vitae) – depending on how your C.V. is structured, you may have items that are listed
• a recipe – recipes usually have an unordered list of ingredients and an ordered list of instructions.

References

1. <ul> tag
2. <ol> tag
3. <li> tag