HTML lists

Jump to list

Jump to nested list

Unordered and ordered lists

There most common types of lists in HTML are unordered- and ordered lists. Unordered lists are also known as bulletpoint lists and look like this:

  • List element 1
  • List element 2
  • List element 3
  • List element 4

The code for the list above looks like this:

<ul>
            <li>List element 1</li>
            <li>List element 2</li>
            <li>List element 3</li>
            <li>List element 4</li>
</ul>

The <ul> element defines it as an unordered list. Each list element is defined by a <li> tag.

Ordered lists are very similar, but are defined by <ol> tags. Here is an ordered list:

  1. List element 1
  2. List element 2
  3. List element 3
  4. List element 4

And here is the code for the ordered list:

<ol>
            <li>List element 1</li>
            <li>List element 2</li>
            <li>List element 3</li>
            <li>List element 4</li>
</ol>

That was easy, now lets look at som other lists..

Definition list

A definition is used to present a list of terms and their definitions. Here is an example of a definition list.

Computer
an electronic device which is capable of receiving information (data) in a particular form and of performing a sequence of operations in accordance with a predetermined but variable set of procedural instructions (program) to produce a result in the form of information or signals.
Camera
a device for recording visual images in the form of photographs, film, or video signals.
Microphone
an instrument for converting sound waves into electrical energy variations which may then be amplified, transmitted, or recorded.

And the code for the definition list:

<dl>          
	<dt>Computer</dt>             
	<dd>an electronic device which is capable of receiving information (data) in a particular form and of performing a sequence of operations in accordance with a predetermined but variable set of procedural instructions (program) to produce a result in the form of information or signals.</dd>
	<dt>Camera</dt>
	<dd>a device for recording visual images in the form of photographs, film, or video signals.</dd>
	<dt>Microphone</dt>
	<dd>an instrument for converting sound waves into electrical energy variations which may then be amplified, transmitted, or recorded.</dd>
</dl>

Nested lists

You can put lists inside other lists. Here is an ordered list nested inside an unordered list. You can of course nest any type of lst within any type of list.

  • List element 1
  • List element 2
    1. Ordered list element 1
    2. Ordered list element 2
  • List element 6
  • List element 7

Here is the code for the nested list:

<ul>
	<li>List element 1</li>
	<li>List element 2</li>
		<ol>
			<li>Ordered list element 1</li>
			<li>Ordered list element 2</li>
		</ol>
	<li>List element 6</li>
	<li>List element 7</li>
</ul>


Summary lists:

There are three types of HTML lists: ordered, unordered and definition lists. And here is an unordered list to sum it up:

  • Ordered lists use numbers
  • Unordered lists use bullets
  • Definition lists are used to define terminology
  • Lists can be nested inside one another
  • Other html elements can also be placed inside lists

Further reading: w3schools page about lists.