How to Create a List in HTML
How to Create a List in HTML
- HTML Lists organize the information in clean and useful way.
- HTML lists represent list of information in well formed and semantic way.
- html have three different type of list and each HTML list has a specific purpose and meaning,and this article will show you how to use each HTML list.
- Unordered Lists
- Ordered Lists
- Description Lists
How to Create a List in HTML
Contents
This article explain the following topic with full description and example.
How to Create a List in HTML
- Ordered Lists
- Creating a Countdown List
- Starting a List on a Specific Number
- Changing the Numbering Style
- Ordered list Start with a Number(1,2,3..)
- Ordered list Start with Lowercase Alphabets(a,b,c..)
- Ordered list Start with Uppercase Alphabets(A,B,C..)
- Ordered list Start with Lowercase Roman number(i,ii,iii..)
- Ordered list Start with uppercase Roman number(I,II,III..)
- Unordered Lists
- Description Lists
- Nested Lists
How to Create a List in HTML
Ordered Lists
HTML ordered list typically is a numbered list of information , HTML ordered lists are used to present list of information in well formed and semantic way.
Ordered list start with opening HTML element <ol> and closing with </ol>
The information on the list are contained between opening list item <li> and closing list item </li>
The given below example show the simple ordered list.
Example
<!DOCTYPE html>
<html>
<head>
<title>Simple Ordered List</title>
</head>
<body>
<ol>
<li>List item one.</li>
<li>List item two.</li>
<li>List item three.</li>
</ol>
</body>
</html>
The output of above HTML Ordered list.
Example
- List item one.
- List item two.
- List item three.
How to Create a List in HTML
Creating a HTML Countdown List
For reverse the number of a list, simply add the reversed attributed to the starting <ol> element.
Example
<!DOCTYPE html>
<html>
<head>
<title>Reverse Ordered List</title>
</head>
<body>
<ol reversed>
<li>List item one.</li>
<li>List item two.</li>
<li>List item three.</li>
</ol>
</body>
</html>
The output of above HTML reverse Ordered list.
Example
- List item one.
- List item two.
- List item three.
How to Create a List in HTML
Starting a List on a particular Number
To continue a list with specific number by simply adding start attribute on <ol> tag.
The start attribute specifies the start value of the first list item in an HTML ordered list(<ol>).
Example
<!DOCTYPE html>
<html>
<head>
<title>
Starting a List on a particular Number
</title>
</head>
<body>
<ol start="3">
<li>List item one.</li>
<li>List item two.</li>
<li>List item three.</li>
</ol>
</body>
</html>
Example
- List item one.
- List item two.
- List item three.
How to Create a List in HTML
Changing the Numbering Style of an ordered list
You can Change the Numbering Style of an ordered list by simply adding type attribute on starting <ol> tag.
Vale of type=" " attribute
Vale of type=" " attribute
- 1
- a
- A
- i
- I
In give bellow example showing the different output of type attribute.
type="1" (Default) start with a number like(1,2,3....).
Example
<!DOCTYPE html>
<html>
<head>
<title>
Starting a List on a particular Number
</title>
</head>
<body>
<ol type="1">
<li>List item one.</li>
<li>List item two.</li>
<li>List item three.</li>
<li>List item four.</li>
<li>List item five.</li>
</ol>
</body>
</html>
The output of above HTML Ordered list type="1".
Example
- List item one.
- List item two.
- List item three.
- List item four.
- List item five.
How to Create a List in HTML
type="a" starting with a lowercase Alphabets like(a, b, c...).
Example
<!DOCTYPE html>
<html>
<head>
<title>
Lowercase Alphabetically ordered list
</title>
</head>
<body>
<ol type="a">
<li>List item one.</li>
<li>List item two.</li>
<li>List item three.</li>
<li>List item four.</li>
<li>List item five.</li>
</ol>
</body>
</html>
The output of above HTML lowercase Alphabetically ordered list type="a".
Example
- List item one.
- List item two.
- List item three.
- List item four.
- List item five.
How to Create a List in HTML
type="A" Starting with a Uppercase Alphabets like(A, B, C...).
Example
<!DOCTYPE html>
<html>
<head>
<title>
Uppercase Alphabetically ordered list
</title>
</head>
<body>
<ol type="A">
<li>List item one.</li>
<li>List item two.</li>
<li>List item three.</li>
<li>List item four.</li>
<li>List item five.</li>
</ol>
</body>
</html>
The output of above HTML Uppercase Alphabetically ordered list type="A".
Example
- List item one.
- List item two.
- List item three.
- List item four.
- List item five.
How to Create a List in HTML
type="i" Starting with a lowercase Roman numbers like (i, ii, iii, iv).
Example
<!DOCTYPE html>
<html>
<head>
<title>
lowercase Roman numbers ordered list
</title>
</head>
<body>
<ol type="i">
<li>List item one.</li>
<li>List item two.</li>
<li>List item three.</li>
<li>List item four.</li>
<li>List item five.</li>
</ol>
</body>
</html>
The output of above HTML lowercase Roman numbers ordered list type="i".
Example
- List item one.
- List item two.
- List item three.
- List item four.
- List item five.
How to Create a List in HTML
type="I" Starting with a uppercase Roman numbers like (I, II, III, IV).
Example
<!DOCTYPE html>
<html>
<head>
<title>
Uppercase Roman numbers ordered list
</title>
</head>
<body>
<ol type="I">
<li>List item one.</li>
<li>List item two.</li>
<li>List item three.</li>
<li>List item four.</li>
<li>List item five.</li>
</ol>
</body>
</html>
The output of above HTML uppercase Roman numbers ordered list type="I".
Example
- List item one.
- List item two.
- List item three.
- List item four.
- List item five.
How to Create a List in HTML
HTML Unordered Lists
HTML unordered lists should be used when rearranging the order of the list data
would not change the meaning of the information on the list information.
An HTML unordered list starts with the <ul> tag and end with </ul>.
every list item starts with the <li> tag and end with </li> tag.
The items of HTML unordered list will be marked with bullets.
The given below example show the simple unordered list.
Example
<!DOCTYPE html>
<html>
<head>
<title>
HTML Unordered list
</title>
</head>
<body>
<ul>
<li>List item one.</li>
<li>List item two.</li>
<li>List item three.</li>
<li>List item four.</li>
<li>List item five.</li>
</ul>
</body>
</html>
The output of above HTML Unordered list.
Example
- List item one.
- List item two.
- List item three.
- List item four.
- List item five.
How to Create a List in HTML
Description Lists
HTML Description (Definition) List List show elements in definition
form.The HTML <dl>, <dt> and <dd> tags are used to define description list(<dl>).
HTML Description lists are created with the <dl> tag.
The HTML <dl> tag is used in conjunction with data terms <dt>
and describes each term <dd>(data definition).
The given below example show the simple Description list.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Description Lists</title>
</head>
<body>
<dl>
<dt>List item one.Number</dt>
<dd>1</dd>
<dd>2</dd>
<dd>3</dd>
<dt>Alphabets</dt>
<dd>A</dd>
<dd>B</dd>
<dd>C</dd>
<dt>Roman Number</dt>
<dd>I</dd>
<dd>II</dd>
<dd>II</dd>
</dt>
</body>
</html>
The output of above HTML description list.
Example
- List item one.Number
- 1
- 2
- 3
- Alphabets
- A
- B
- C
- Roman Number
- I
- II
- II
How to Create a List in HTML
HTML Nested Lists
A list place inside another list is called nested list.
The given below example show the simple nested list.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Nested Lists</title>
</head>
<body>
<ol>
<li>Number
<ul>
<li>1</li>
<li>2</li>
</ul>
</li>
<li>Alphabets
<ul>
<li>a</li>
<li>b</li>
</ul>
</li>
</ol>
</body>
</html>
The output of above HTML Nested Lists.
Example
- Number
- 1
- 2
- Alphabets
- a
- b
How to Create a List in HTML
Hello all If this article helpful for you then please give your feedback in comment box.
Next
Preview
Thanks for that.
ReplyDeleteThis article is very helpfu.
After reading this article clear my concept about list
Delete