Types of Lists In HTML
In this Post, We will Discus which is totally different than other Tags in HTML
Lists Are used in many ways and purpose
the outline of this Post is :
- Create numbered List in HTML
- Create bulleted list In HTML
- Create Definition List in HTML
A brief overview of the List :
Every list used in the HTML document has a Unique purpose for example
A number list is used for presenting things e.g Top 5 best songs, top five development
site etc
a bullet list is usually called a default list is not a numbered list but use to show
the items with bullets.
In Old HTML
There are two additional lists were used which are as follows
- Menu List
- Directory list
All Tags in HTML have common elements Like
In HTML every list has its own outer list for example
<ul>
<ol>
</ol>
<ul>
same as list item has own tags like
<dt> <dd>
in List item the Closing tags of <dt> and <dd> are optional but using the
closing tags is good practice
like
<li> <dt> <dd> </dt></dd></li>
lets move on coding
Unorder list
Unordered lists are often referred to as bulleted lists. Instead of being numbered, each
element in the list has the same marker. The markup to create an unordered list looks just
like an ordered list except that the list is created by using <ul>...</ul> tags rather
than ol. The elements of the list are placed within <li> tags, just as with ordered lists
element in the list has the same marker. The markup to create an unordered list looks just
like an ordered list except that the list is created by using <ul>...</ul> tags rather
than ol. The elements of the list are placed within <li> tags, just as with ordered lists
Code for un order list
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Types of list in html</title>
<meta name='viewport' content='width=device-width,
initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen'
href='main.css'>
<script src='main.js'></script>
</head>
<body>
<p>today we are going to under the type of lists in HTML </p>
<ul>
<li>i am item </li>
<li>i am second item</li>
<li>i am third item</li>
</ul>
<p>an other example </p>
<ul>
<li> pakistan</li>
<li>india</li>
<li>china</li>
<li>america</li>
</ul>
</body>
</html>
YOU CAN TRY IT :
THE OUTPUT WILL BE
today we are going to under the type of lists in HTML
- I am item
- I am the second item
- I am the third item
another example
- Pakistan
- India
- china
- America
Numbered Lists OR Order List
Number list is Also called order list and the sntex of writing order list is
<ol> </ol>
every item in in order list is listed with <li> tag same as un order list
when out put is shown on browser every element in order list is ordered by
number
there is no need of giving numbers to any element while you are going to
write order list
if you add or delete any element it automatically renumber the elements
this List is used when all elements are relevant to each other
or there are steps include in any kind of work .
lets consider and example of boiling eggs :
example :
coding for boiling eggs
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>order list in html</title>
<meta name='viewport' content='width=device-width,
initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen'
href='main.css'>
<script src='main.js'></script>
</head>
<body>
<h1>process of boiling eggs</h1>
<ol>
<li>put the ags in pot filled with water</li>
<li>bring the pot to boil water </li>
<li>take of the pot , cover it and sit it for 12 min </li>
<li>remove the eggs from water </li>
<li>peel and eat </li>
</ol>
</body>
</html>
Try this code :
Output of this code :
process of boiling eggs
- Put the ags in pot filled with water
- Bring the pot to boil water
- Take of the pot , cover it and sit it for 12 min
- Remove the eggs from water
- Peel and eat
In above example you cn see the output of order list in which
every element is listed with a number
Order list can be contumized as :
- Decimel
- lower-alphabets
- Upper alphabets
- lower roman
- Upper roman
To specify the type of order list <style> tag is used
for example we want to make a list of sequence using
Lower alphabets
We can use :
<ol style=“list-style-type: lower-alpha;”>
as we know the oder list is listed with decimel numbers
if you want to write the above steps using lower alphabet then
The code will be :
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>order list in html</title>
<meta name='viewport' content='width=device-width,
initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen'
href='main.css'>
<script src='main.js'></script>
</head>
<body>
<h1>process of boiling eggs</h1>
<ol style=" list-style-type: lower-alpha ;">
<li>put the ags in pot filled with water</li>
<li>bring the pot to boil water </li>
<li>take of the pot , cover it and sit it for 12 min </li>
<li>remove the eggs from water </li>
<li>peel and eat </li>
</ol>
</body>
</html>
The output of this code will be :
process of boiling eggs
- Put the eggs in a pot filled with water
- Bring the pot to boil water
- Take off the pot, cover it and set it for 12 min
- Remove the eggs from the water
- Peel and eat
0 comments:
Post a Comment