In this tutorial we are going to look at lists in HTML.
There 3 types of lists in HTML, namely:
1) Ordered lists;
2) Unordered lists;
3) Description lists;
Let’s consider ordered lists first:
1) Ordered Lists:
Take a look at the following section of code:
<ol>
<li>Lion</li>
<li>Leopard</li>
<li>Rhino</li>
<li>Elephant</li>
<li>African Buffalo</li>
</ol>
What the code does:
<ol></ol>
This tag pair defines the start and end of an ordered list. Ordered lists are rendered in a web browser as a numbered list.
<li></li>
This tag pair defines a list item. The <li></li> tags are contained within either unordered lists or ordered lists. In the case of ordered list, you will notice that even though the <li> tags are all identical, in the web browser they appear as numbers starting from 1.
..............................
2) Unordered Lists:
Consider the following code:
<ul>
<li>Coffee>/li>
<li>Tea>/li>
<li>Hot Chocolate>/li>
</ul>
What the code does:
<ul></ul>
This tag pair defines the start and end of an unordered list. Unordered lists are rendered in a web browser as a bulleted list.
<li></li>
This tag pair defines a list item. The <li></li> tags are contained within either unordered lists or ordered lists.
..............................
3) Description Lists:
Consider the following code:
<dl>
<dt>Car:</dt>
<dd>A Vehicle used to transport people with.</dd>
<dt>Desktop Computer:</dt>
<dd>A general computing device.<dd>
</dl>
What the code does:
<dl></dl>
Description List:
The Description list <dl></dl> tags define a description list. The <dl></dl> tags contains the <dt></dt> and <dd></dd> tags.
<dt></dt>
Definition term. This tag pair specifies a definition term. This term defines / describes the definition data. It is the 2nd part of the description list and is used in conjuction with the <dd></dd> tag pair and the preceding <dl></dl> tag pair. The term is first named with <dt></dt> then it is described with <dd></dd> tags.
<dd></dd>
It is the 3rd part of the description list and is used with the <dl></dl> tag pair and the <dt></dt> tag pair. The <dd></dd> tags defines and gives meaning to the term as described by the <dt></dt> tags.
..............................
Putting
it All together:
Create a .txt file on your computer and copy and paste the code below into your text file. You can name it: HTML Lists.html
<!DOCTYPE html>
<html>
<head>
<title>Lists in HTML:</title>
</head>
<body>
<!-- This text is hidden and won’t show in the browser -->
<!-- Ordered Lists are rendered as numbered lists in the web browser. -->
<h3>1) Ordered Lists:</h3>
<h4>South-African Big 5 Animals:</h4>
<ol>
<li>Lion</li>
<li>Leopard</li>
<li>Rhino</li>
<li>Elephant</li>
<li>African Buffalo</li>
</ol>
<!-- Unordered Lists are rendered as bulleted lists in the web browser. -->
<h3>2) Unordered Lists:</h3>
<h4>Hot Drinks:</h4>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Hot Chocolate</li>
</ul>
<!-- Description Lists are rendered as the term and a description in the web browser. -->
<h3>3) Description Lists:</h3>
<dl>
<dt>Car:</dt>
<dd>A vehicle used to transport people with.</dd>
<dt>Desktop Computer:</dt>
<dd>A general computing device used to make office tasks easier, play games, make digital art, program / code applications with, etc.</dd>
<dt>Bitcoin:</dt>
<dd>It is the first cryptocurrency ( Digital Currency / Money ). It is designed to work as a medium of exchange and is decentralized. In other words, it has no central governing authority.</dd>
<dt><a href=”https://www.codedesk.co.za”>CodeDesk.co.za: </a></dt>
<!-- This <dt></dt> tags contains a link and the <dd></dd> tags contains some
emojis which we will discuss in a future lesson. -->
<dd>The Best place to learn how to code 💯 </dd>
</dl>
</body>
</html>
Open the html file in your browser to view the code you just created!
The output of the above code:
Figure 1:
The above image shows the output of the 3 types of lists. Ordered lists appear as a numbered list, unordered lists appear as a bulleted list and description lists appear as a term and a description about the term.
That concludes our tutorial on lists in HTML.
I hope everyone has a blessed week 💯