HTML Lists
In this article I will teach you how to use lists in HTML, before that let’s see what is HTML lists are. HTML lists are like shopping lists if you want to go to grocery you would make a list out of stuff that you need to buy. There are three types of list, unordered list, ordered list and description list, I am going to explain every single one of them.
Before we head to the coding section, make sure that you have the visual studio code installed and you have download and installed the Live server extension (if not click on the button down below).
Unordered list
Unordered list is one of the HTML lists, as it name says, its unordered. This is the simplest list that you can create in HTML, I have create a shopping list down below. Copy this code and paste it on your VSC (visual studio code) and then run it through the live server, if you pay attention I have define the type for the unordered list, this is unnecessary but if you want to change the default setting of circle you could use the type and give it the value like none or square.
<!--our shopping list-->
<ul type="square">
<li>cheese</li>
<li>milk</li>
<li>bread</li>
<li>chicken</li>
</ul>
Ordered list
As there name, there are ordered and the second list of our HTML lists, ordered lists are useful you can sort them by number or by alphabet letters. You can also change the starting point, you may say how? Look at the codes down below, this is an example of unordered list if you want to change the list from number to alphabet letter write “A” or “a” or you can change it to roman digits by typing “I” or “i”. But what about the starting point that is why I have written the “start” you can set it to “2” or digit that you like or if you have changed the type to alphabet you should use the alphabet letter in start (you can not use numbers anymore).
<!--our shopping list-->
<ol type="1" start="1">
<li>cheese</li>
<li>milk</li>
<li>bread</li>
<li>chicken</li>
</ol>
Description list
Description list the last list of HTML lists and its little bit different than the other lists, We have “dt” which is abbreviated of description term and “dd” which is abbreviated of description detail. We use this list to explain the stuff for example I have codded a shopping list, in description term I have put the cheese and in description detail I put the amount of cheese that we want to buy. You can create your own list for instance create a list of cars and explain the cons and pros of each car in single short sentence.
<!--our shopping list-->
<dl>
<dt>cheese</dt>
<dd>one kilogram cheese</dd>
<dt>milk</dt>
<dd>two bottles of milk</dd>
<dt>bread</dt>
<dd>four slices of bread</dd>
<dt>chicken</dt>
<dd>two chickens</dd>
</dl>
