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:
After enter this code, you will get the following output in your browser:
- Apple
- 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:
Your browser will display:
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>
- Apple
- 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:
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.
