Hello dear readers! welcome back to another section of my tutorial on Html. In this tutorial guide, am going to be discussing about Html list, am sure you all are conversant with what a list is. Without wasting much time lets get started.
Html offers web developers three different ways to specify lists of information. All lists must contain one or more list elements. The list may contain:
<ul> - An unordered list. This will list items using plain bullets.
<ol> - An ordered list. This will use different schemes of numbers to list your items.
<dl> - A definition list. This will arrange your items in the same way as that they are arranged in a dictionary.
HTML Unordered Lists
An unordered list is a collection of related items that have no special order or sequence. This list is created by using HTML <ul> tag. Each item in the list is marked with a bullet.
RECOMMENDED: Html Formating
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul>
<li>Ps2</li>
<li>Ps3</li>
<li>Ps4</li>
<li>Xbox 360</li>
<li>Laptop</li>
</ul>
</body>
</html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul>
<li>Ps2</li>
<li>Ps3</li>
<li>Ps4</li>
<li>Xbox 360</li>
<li>Laptop</li>
</ul>
</body>
</html>
Feel free to try the above code out using your text editor for a better understanding. You can also drop your questions via the comment box below.
The type Attribute
You can use the type attribute for <ul> tag in specifying the type of bullet that you like. BY default, its a disc. Below are possible options available:
<ul type = "square">
<ul type = "disc">
<ul type = "circle">
<ul type = "disc">
<ul type = "circle">
Example
Below is an example where <ul type="square"> is been used
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type="square">
<li>Ps2</li>
<li>Ps3</li>
<li>Ps4</li>
<li>Xbox 360</li>
<li>Laptop</li>
</ul>
</body>
</html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type="square">
<li>Ps2</li>
<li>Ps3</li>
<li>Ps4</li>
<li>Xbox 360</li>
<li>Laptop</li>
</ul>
</body>
</html>
Example
Below is an example where <ul type="disc"> is been used
RECOMMENDED: Html Elements
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type="disc">
<li>Ps2</li>
<li>Ps3</li>
<li>Ps4</li>
<li>Xbox 360</li>
<li>Laptop</li>
</ul>
</body>
</html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type="disc">
<li>Ps2</li>
<li>Ps3</li>
<li>Ps4</li>
<li>Xbox 360</li>
<li>Laptop</li>
</ul>
</body>
</html>
Example
Below is an example where <ul type="circle"> is been used
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type="circle">
<li>Ps2</li>
<li>Ps3</li>
<li>Ps4</li>
<li>Xbox 360</li>
<li>Laptop</li>
</ul>
</body>
</html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type="circle">
<li>Ps2</li>
<li>Ps3</li>
<li>Ps4</li>
<li>Xbox 360</li>
<li>Laptop</li>
</ul>
</body>
</html>
You can try all the three atrribute examples using your text editor to see the differences between them.
HTML Ordered Lists
If you are required to put your items in a numbered list instead of bulleted, then Html ordered list will be used. This list can be created by using <ol> tag. The numbering starts at one and is incremented by one for each of the successive ordered list element tagged with <li>.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML ordered List</title>
</head>
<body>
<ol>
<li>Ps3</li>
<li>Ps4</li>
<li>Xbox 360</li>
<li>Laptop</li>
</ol>
</body>
</html>
<html>
<head>
<title>HTML ordered List</title>
</head>
<body>
<ol>
<li>Ps3</li>
<li>Ps4</li>
<li>Xbox 360</li>
<li>Laptop</li>
</ol>
</body>
</html>
The type Attribute
You can make use of type attribute for <ol> tag in specifying the type of numbering you like. By default, it is a number. Below are possible options available
<ol type="1"> - Default-case Numerals.
<ol type="I"> - Upper-case Numerals.
<ol type="i"> - Lower-case Numerals.
<ol type="a"> - Lower-case Letters.
<ol type="A"> - Upper-case Letters.
<ol type="I"> - Upper-case Numerals.
<ol type="i"> - Lower-case Numerals.
<ol type="a"> - Lower-case Letters.
<ol type="A"> - Upper-case Letters.
RECOMMENDED: Html Basic Tags2
Example
Following is an example with <ol type="1">
<!DOCTYPE html>
<html>
<head>
<title>HTML ordered List</title>
</head>
<body>
<ol type="1">
<li>Ps2</li>
<li>Ps3</li>
<li>Ps4</li>
<li>Xbox 360</li>
<li>Laptop</li>
</ol>
</body>
</html>
<html>
<head>
<title>HTML ordered List</title>
</head>
<body>
<ol type="1">
<li>Ps2</li>
<li>Ps3</li>
<li>Ps4</li>
<li>Xbox 360</li>
<li>Laptop</li>
</ol>
</body>
</html>
Example
Following is an example with <ol type="I">
<!DOCTYPE html>
<html>
<head>
<title>HTML ordered List</title>
</head>
<body>
<ol type="I">
<li>Ps2</li>
<li>Ps3</li>
<li>Ps4</li>
<li>Xbox 360</li>
<li>Laptop</li>
</ol>
</body>
</html>
<html>
<head>
<title>HTML ordered List</title>
</head>
<body>
<ol type="I">
<li>Ps2</li>
<li>Ps3</li>
<li>Ps4</li>
<li>Xbox 360</li>
<li>Laptop</li>
</ol>
</body>
</html>
Example
Following is an example with <ol type="i">
<!DOCTYPE html>
<html>
<head>
<title>HTML ordered List</title>
</head>
<body>
<ol type="i">
<li>Ps2</li>
<li>Ps3</li>
<li>Ps4</li>
<li>Xbox 360</li>
<li>Laptop</li>
</ol>
</body>
</html>
<html>
<head>
<title>HTML ordered List</title>
</head>
<body>
<ol type="i">
<li>Ps2</li>
<li>Ps3</li>
<li>Ps4</li>
<li>Xbox 360</li>
<li>Laptop</li>
</ol>
</body>
</html>
Example
Following is an example with <ol type="A">
<!DOCTYPE html>
<html>
<head>
<title>HTML ordered List</title>
</head>
<body>
<ol type="A">
<li>Ps2</li>
<li>Ps3</li>
<li>Ps4</li>
<li>Xbox 360</li>
<li>Laptop</li>
</ol>
</body>
</html>
<html>
<head>
<title>HTML ordered List</title>
</head>
<body>
<ol type="A">
<li>Ps2</li>
<li>Ps3</li>
<li>Ps4</li>
<li>Xbox 360</li>
<li>Laptop</li>
</ol>
</body>
</html>
Example
Following is an example with <ol type="a">
<!DOCTYPE html>
<html>
<head>
<title>HTML ordered List</title>
</head>
<body>
<ol type="a">
<li>Ps2</li>
<li>Ps3</li>
<li>Ps4</li>
<li>Xbox 360</li>
<li>Laptop</li>
</ol>
</body>
</html>
<html>
<head>
<title>HTML ordered List</title>
</head>
<body>
<ol type="a">
<li>Ps2</li>
<li>Ps3</li>
<li>Ps4</li>
<li>Xbox 360</li>
<li>Laptop</li>
</ol>
</body>
</html>
You can to try all the type attribute examples above in order to have a better understanding.
The start Attribute
You can use start attribute for <ol> tag to specify the starting point of numbering you need. Following are the possible options:
<ol type="1" start="5"> - Numerals starts with 5.
<ol type="I" start="5"> - Numerals starts with V.
<ol type="i" start="5"> - Numerals starts with v.
<ol type="a" start="5"> - Letters starts with e.
<ol type="A" start="5"> - Letters starts with E.
<ol type="I" start="5"> - Numerals starts with V.
<ol type="i" start="5"> - Numerals starts with v.
<ol type="a" start="5"> - Letters starts with e.
<ol type="A" start="5"> - Letters starts with E.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML ordered List</title>
</head>
<body>
<ol type="a" start="5">
<li>Ps2</li>
<li>Ps3</li>
<li>Ps4</li>
<li>Xbox 360</li>
<li>Laptop</li>
</ol>
</body>
</html>
<html>
<head>
<title>HTML ordered List</title>
</head>
<body>
<ol type="a" start="5">
<li>Ps2</li>
<li>Ps3</li>
<li>Ps4</li>
<li>Xbox 360</li>
<li>Laptop</li>
</ol>
</body>
</html>
HTML Definition Lists
Html and XHTML supports a list style which is called the definition lists where entries are listed like in a dictionary or encyclopedia. The difinition list is the ideal way for presenting a glossary, list terms, or other name/value list. Definition list uses the following three tags
RECOMMENDED: Html Basic Tags
<dl> - Defines the start of the list
<dt> - A term
<dd> - Term definition
</dl> - Defines the end of the list
<dt> - A term
<dd> - Term definition
</dl> - Defines the end of the list
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Definition List</title>
</head>
<body>
<dl>
<dt>HTML</dt>
<dd>This stands for Hyper Text Markup Language</dd>
</dl>
</body>
</html>
<html>
<head>
<title>HTML Definition List</title>
</head>
<body>
<dl>
<dt>HTML</dt>
<dd>This stands for Hyper Text Markup Language</dd>
</dl>
</body>
</html>
You can practice all the above codes out using you text editor.
Well guys thats all for this tutorial, see you in my next tutorial and bye for now.