HTML Tutorial 7: Creating HTML List

Hello Guys! This is my tutorial number 7 on HTML. If you would like to read the previous 6 tutorials then please use the search box above, type HTML and get the HTML tutorials list. 

Today I will discuss about a simple topic of HTML. Really this is as simple as I say! :) Okay let's start.

Practice Rules

Practice rules are as usual. Use notepad and a web browser. Save the file with .htm or .html extension. 

HTML List: Ordered and Unordered

There are mainly two types of lists can be created by HTML code. The first one is ordered list and the other is unordered list. 

Ordered List:

In an ordered list, the list items are marked by numbers. This exactly looks like a numbered list created by Microsoft Word or other text editing programs. 

An ordered list starts with <ol> tag and ends with </ol> tag. Each item of the list starts with <li> tag and ends with </li> tag. Look at the code below:

<ol>

<li>Apple</li>

<li>Google</li>

<li>Microsoft</li>

</ol>

Remember, o indicates unordered (o) and l indicates list. Thus it is written as <ol>. 

After enter this code, you will get the following output in your browser: 

1. Apple
2. Google
3. Microsoft

Unordered List:

In an unordered list, the list items are marked with bullets. Normally small black circles (·) 

Code for unordered list is very similar. Instead of typing <ol>, you need to use <ul>. u for unordered and l for list. Follow the code below:

<ul><li>Apple</li><li>Google</li><li>Microsoft</li></ul>

Your browser will display:

• Apple
• Google
• Microsoft

Description List:

There is another list in HTML which is known as description list. A description list contains a brief description of the list item. 

But I think you can describe the list item simply typing some texts. This is not very important to create a different type of list to describe list items. That's why I'm not showing the code of description list. 


Tip: You can use line breaks, text, links or images inside a list item. 




Tags used in HTML List: 

By this time you're familiar with the tags used in creating HTML list. Let's check them at once:

• <ol> - Defines an ordered list

• <ul> - Defines an unordered list

• <li> - Defines a list item

• <dl> - Defines a description list

• <dt> - Defines a term/ name in description list

• <dd> - Defines a description of a term/ name in description list. 

Stay with Marks PC Solution to get more interesting IT topics!