In this lesson, we’re going to learn how to create a list in html.
There are three different types of lists in HTML, we have unordered list, ordered and description/definition lists.
unordered list — a set or a list of related items, in no particular order.
ordered list — a set or a list of related items, in a specific order.
description/definition list — outline of terms and their definitions, the best example is the dictionary in which every word has its corresponding meaning or definition.
Let’s see some example of different types of lists:
Unordered list
To create unordered list in HTML use the <ul> (unordered list) tag and every item starts with <li> (list item) tag
Example code:
<ul>
<li>Visual Basic</li>
<li>Java</li>
<li>PHP</li>
</ul>
The output in the browser would be:
• Visual Basic
• Java
• PHP
Note: use unordered list if the order of a set or group of items does not matter.
The default bullet type is a black circle, to change the bullet type just set it using the type attribute.
<ul type="square">
<li>Visual Basic</li>
<li>Java</li>
<li>PHP</li>
</ul>
Ordered list
To create ordered list in HTML use the <ol> (ordered list) tag and every item starts with <li> (list item) tag.
Example:
<ol>
<li>Click start</li>
<li>Select Run</li>
<li>Type notepad</li>
<li>Press enter</li>
</ol>
The output in the browser would be:
1. Click start
2. Select Run
3. Type notepad
4. Press enter
Note: use ordered list if the order of the items really matter, just like a step by step procedure where the first procedure is indicated by a number 1 and second by number 2 and so on and so forth.
The ordered list by default starts with 1 but you can change that through the start attribute and you can even change the format such as roman numerals.
Here is an example:
<ol start="10">
<li>Click start</li>
<li>Select Run</li>
<li>Type notepad</li>
<li>Press enter</li>
</ol>
The output in the browser would be:
10. Click start
11. Select Run
12. Type notepad
13. Press enter
Definition list
To create definition list in HTML use the <dl> (definition list) tag with <dt> (definition terms) which defines the term and <dd> tag which defines the meaning for that certain term.
Example code:
<dl>
<dt>Visual Basic</dt>
<dd>- Programming language developed by Microsoft</dd>
<dt>Java</dt>
<dd>- is an object oriented programming language</dd>
<dt>PHP</dt>
<dd>- stands for Hypertext Preprocessor</dd>
</dl>
The output in the browser would be:
Visual Basic
– Programming language developed by Microsoft
Java
– is an object oriented programming language
PHP
– stands for Hypertext Preprocessor
