(click anywhere to close)
OPEN MENU

[HTML5] Lists

category: Website | course: HTML5 | difficulty:

There are three types of lists: ordered, unordered and description. Because we want our HTML to strictly define what category a certain piece of text belongs to, we need a different set of tags for each of them. But luckily, the basic idea and structure remain the same.

How Lists Work

Lists work by telling the browser when it wants to start one, and then using a list tag to define when one particular list item starts (and ends). An abstract list structure looks like this:

<!-- General structure of HTML lists -->
<listcontainer>
	<listitem> Content </listitem>
	<listitem> Content </listitem>
</listcontainer>

If you accidentally put text in there without list item tags surrounding it, the text would still be indented (because it is within a list element), but it wouldn’t have a bullet or number in front of it.

Ordered Lists

Lists where the items need to be in a particular order; a step-by-step plan, a top 10 of greatest love songs, etcetera. Such a list is started with the <ol> tag, and every list item is introduced with the <li> tag.

<ol>
	<li> Content </li>
	<li> Content </li>
</ol>

You can use the type attribute to define whether to use numbers ( 1, 2, … ), roman numbers ( I or i ) or letters ( A or a ) in front of the list items, but I recommend defining this in the CSS and leaving the HTML clean.

Unordered Lists

Lists where the items need not be in a particular order; a collection of tips and tricks, a grocery list, etcetera. Such a list is started with the <ul> tag, and also uses <li> for the items.

<ul>
	<li> Content </li>
	<li> Content </li>
</ul>

Description Lists

A list of terms with a description for each of them. These are started with the <dl> tag. The definition is within an <dt> element, while the corresponding decription is put underneath it with <dd>

<dl>
	<dt> Definition </dt>
		<dd> Description </dd>
	<dt> Definition </dt>
		<dd> Description </dd>
</dl>
CONTINUE WITH THIS COURSE
Test your knowledge with the quiz!
How do you create an ordered list?
A
Use <li>
B
Use <ol>
C
Use <ul>
Do you like my tutorials?
To keep this site running, donate some motivational food!
Crisps
(€2.00)
Chocolate Milk
(€3.50)
Pizza
(€5.00)