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.
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
<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.
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>
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
<dl> <dt> Definition </dt> <dd> Description </dd> <dt> Definition </dt> <dd> Description </dd> </dl>