HTML - Lists

  »   Basic HTML  »   HTML Tutorial - Lists Creating and using them

HTML has three types of lists. <ol> shows a ordinate list while <ul> a unsorted one, and for making a definition list is used <dl>. Use the attributes type and start for making a list depending on your requests.

  • <ul> - unsorted list, bullets
  • <ol> - ordered list, numbers
  • <dl> - definition list.

HTML - The ordered list

Use <ol> tag for starting a ordered list. And put <li></li> (list item) in between.

html<h4>Objectives</h4>

<ol>
	<li>To find a job</li>
	<li>To take a lots of money </li>
	<li>To move in an other city</li>
</ol>

Demo

Objectives

  1. To find a job
  2. To take a lots of money
  3. To move in an other city

You can start your list with any number you want, just specifying it with the help of the start attribute.

html<h4>Objective</h4>

<ol start="4" >
	<li>To find a job </li>
	<li>To take a lots of money </li>
	<li>To move in an other city</li>
</ol>

Demo

Objective

  1. To find a job
  2. To take a lots of money
  3. To move in an other city

This element is not doing anything out of common but is pretty useful sometimes.

HTML - Other types of ordered lists

Excluding the upper example there are other 4 types of ordered lists. Instead of the normal enumeration, you can use roman numbers or as well letters but in both cases, it can be used only small letters or capital letters. Use the type attribute if you want to modify the type of the numbering

html<ol type="a">
<ol type="A">
<ol type="i">
<ol type="I">

Depending on the case, this list may look like this

Small lettersCapital lettersRoman numbers with small lettersRoman numbers with capital letters
  1. A job
  2. Money
  3. Other city
  1. A job
  2. Money
  3. Other city
  1. A job
  2. Money
  3. Other city
  1. A job
  2. Money
  3. Other city

Unsorted list

You can create an unsorted list with the help of the <ul> tag. The unsorted lists are of three types: squares, bullets, and circles. The standard value gave by the majority of the browsers is bullets.

html<h4>Shopping list </h4>

<ul>
	<li>milk</li>
	<li>cheese</li>
	<li>eggs</li>
	<li>sugar</li>
</ul>

Demo

Shopping list

  • milk
  • cheese
  • eggs
  • sugar

You can see in the next example how all types of unsorted lists look like.

html<ul type="square">
<ul type="disc">
<ul type="circle">

HTML - The definition list

As well you can make definition lists using the <dl>; tag. This list will give the word above, the definition. It is indicated to bold the word so that it will be more evident.

html<dl>
	<dt>Queso</dt>
	<dd>Spanish word for cheese.</dd>
	
	<dt>Ordenador</dt>
	<dd>Spanish word for Personal Computer</dd>
</dt>

Demo

Queso
Spanish word for cheese.
Ordenador
Spanish word for Personal Computer