List is a collection of element which represented in particular order on the web page is knows as list.
There are three different types of list.
- Numbering/ ordered list.
- Bulleted/ un-ordered list.
- Definition list.
HTML List Tags:
| Tag | Description |
| <ol> | Defines an Order List |
| <ul> | Defines an Unordered List |
| <li> | Defines a list item |
| <dl> | Defines a description List |
| <dt> | Defines a term/name in a description list |
| <dd> | Defines a description of a term/name in a description list |
Ordered List/ Numbering List.
An ordered list can be numerical order format or alphabetical order format. The <ol> tag defines an ordered list is knows as ordered list.
Example
<html>
<body>
<h3> An Order List is</h3>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
There are five different types of ordered list
- Numeric Number (1, 2, 3)
- Capital Roman Number (I II III)
- Small Romal Number (i ii iii)
- Capital Alphabet (A B C)
- Small Alphabet (a b c)
Numeric Number
<ol type="1">
<li>Apple</li>
<li>Banana</li>
<li>Oranges</li>
<li>Mango</li>
</ol>
Capital Roman Number
<ol type="I">
<li>Apple</li>
<li>Banana</li>
<li>Oranges</li>
<li>Mango</li>
</ol> 
Small Romal Number
<ol type="i">
<li>Apple</li>
<li>Banana</li>
<li>Oranges</li>
<li>Mango</li>
</ol> 
Capital Alphabet
<ol type="A">
<li>Apple</li>
<li>Banana</li>
<li>Oranges</li>
<li>Mango</li>
</ol>
Small Alphabet
<ol type="a">
<li>Apple</li>
<li>Banana</li>
<li>Oranges</li>
<li>Mango</li>
</ol>
un-ordered list
An unordered list is a list of items. The list items are marked with bullets (typically small black circles). An unordered list starts with the <ul> tag is knows as Un-ordered list. Each list item starts with the <li> tag.
<html>
<body>
<h4>An Unordered List:</h4>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
There three different types of un-ordered list
- disc
- circle
- square
- none
disc
<ul type="disc">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
</ul>
circle
<h4>Circle bullets list:</h4>
<ul type="circle">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
</ul>square
<h4>Square bullets list:</h4>
<ul type="square">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
</ul>
Definnation list
A definition list is not a list of single items. It is a list of items (terms), together
with a description of each item (term). A definition list starts with a tag (definition list). Each term starts with a tag (definition term). Each description starts with a tag (definition description)
- <dl> tags
- In this list we create definition list in which in which definition term is created and define. In this case we use three tags.
- <dl> tags
- it is use to create definition list.
- <dt> tags
- it is use to define definition term.
- <dd> tags
- it is use to definition description
syntax
<dl>
<dt>
<dd>text</dd>
</dt>
- - - - - -
</dl> for example
<html>
<body>
<h1> Definnation list </h1>
<dl>
<dt>HTML</dt>
<dd>Hyper text markup language.</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets.</dd>
</dl>
</body>
</html>
Nested list
When one list is define within another list is knows as Nested List. Usually the second list is indented another level and the item markers will appear differently than the original list.
<html>
<body>
<h1>Nested List</h1>
<ul>
<li>book</li>
<ul>
<li>EVS</li>
<li>Science</li>
<li>Maths</li>
<li>GK</li>
</ul>
<li>computer</li>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>java</li>
<li>php </li>
</ul>
</ul>
</body>
</html>
If you have any queries regarding this article or if I have missed something on this topic, please feel free to add in the comment down below for the audience. See you guys in another article.
To know more about HTML order list please check Wikipedia link click here.
Stay Connected Stay Safe. Thank you
0 Comments