In this chapter, we are going to discuss another popular and most commonly used html element ‘list’.
There are two types of lists, unordered list and ordered list.
Unordered List:
First, copy our basic html template and create a new file named as ‘lists.html’ in your choice of editor. Within the body add the following content.
<ul>
<li>Russia</li>
<li>India</li>
<li>US</li>
<li>UK</li>
</ul>
Look at the above code. This is an unordered list. It has <ul> opening and </ul> closing tag.
Remember ‘ul’ stands for unordered list.
Within opening and closing ‘ul’ tag we can have a number of <li> tags. We have to write a label for ‘<li>’ tag within the opening and closing tag.
<li>US</li>
Remember ‘li’ stands for list item. That means we have the number of list items for our unordered list.
Now save the file and open it in your preferred browser such as Google Chrome. You will get the following output.
As you can see in the output, each list item is displayed as each in one line. Also, there is a small filled circle prefix with each list item. That is why unordered list also known as a bulleted list.
Ordered list:
Let’s now see what ordered list is.
Copy the whole unordered list and then paste it into the next line of code.
Then change opening <ul> tag with <ol> (opening ordered list tag) and closing </ul> tag with </ol> (closing ordered list tag).
<ol>
<li>Russia</li>
<li>India</li>
<li>US</li>
<li>UK</li>
</ol>
We have not changed the list items here.
Remember, ‘ol’ stands for ordered list.
Now the body content has both unordered list and ordered list having same list items.
Save the html file and open it in a browser. You will get the following output.
As you can see with the ordered list, there are numbers in order for list items starting from one.
Links as list items:
List items can also contain links so that when a user clicks on any list item, he or she will be redirected to linked resource or page.
A linked resource can be an external web page or an internal application page or resource.
Write or ‘copy and paste’ the following order list to html body.
<ol>
<li>
<a href="http://www.ncodeclass.com/html-introduction/">Html Introduction</a>
</li>
<li>
<a href="http://www.ncodeclass.com/write-your-first-html-code/">Write Your First Html Code</a>
</li>
<li>
<a href="http://www.ncodeclass.com/html-headings/">Html Headings</a>
</li>
<li>
<a href="http://www.ncodeclass.com/basic-html-tags/">Basic Html Tags</a>
</li>
</ol>
Save the html file and open it in a browser. You will get the following output.
That’s the basics of using html lists. Isn’t it really easy to use them?
Another common use of lists is to create navigation menu present normally at top of the page. We will see how to create menu later when we will learn css.
That’s complete our discussion on Html Lists. Now you will be able to use lists in your web page.