LIST TAG IN HTML
This tag is used to arrange a list of items. This tag mainly supports three types of lists. In which ordered list can be created, unordered list and Definition list. You can easily create a list in HTML with the help of various tags. To create both an ordered and unordered list, it is necessary to give the tag at the beginning and end of the list. Also, a special tag that tells where each list component is turned on.
1. ordered List
2. Unordered List
3. Definition List
1. Order List:-
To add numbers to the list we use Ordered list like - 1, 2, 3, 4…., A, B, C, D… .., a, b, c, d… .., i, ii, iii …… etc. can be added to the list, it is called Ordered List, in HTML this list is made from <ol> Tag. It uses two tags <ol> and <li>
ol – Ordered List
li – List item
Syntex:-
<ol>
<li>Keyboard</li>
<li>Mouse</li>
<li>Scanner</li>
</ol>{codeBox}
Output-
1. Keyboard
2. Mouse
3. Scanner
2. Unordered List-
To add Symbols to the list, we use the unordered list like - circle, bullets, square, etc. You can add it to the list, it is called Unordered List, in HTML this list is made from <ul> Tag. It uses two tags <ul> and <li>
ul – Unordered List
li – List item
Syntex:-
<ul>
<li>Keyboard</li>
<li>Mouse</li>
<li>Scanner</li>
</ul>{codeBox}
output-
- Keyboard
- Mouse
- Scanner
Type attribute
The browser program places a bullet symbol before each item of an Unordered List. This attribute can have three values -
- Disc / Bullets
- Square
- Circle
1. Discs or Bullets - This attribute is used to place Bullets in the list.
Syntex:-
<ul type=”disc”>
<li>Keyboard</li>
<li>Mouse</li>
<li>Scanner</li>
</ul>
Output-
- Keyboard
- Mouse
- Scanner{codeBox}
2. Square- Square Tag is used to placing Square in the list.
Syntax:-
<ul type=”square”>
<li>Keyboard</li>
<li>Mouse</li>
<li>Scanner</li>
</ul>
Output
- Keyboard
- Mouse
- Scanner{codeBox}
3. Circle- Circle Tag is used to placing circles in the list.
Syntax:-
<ul type=”Circle”>
<li>Keyboard</li>
<li>Mouse</li>
<li>Scanner</li>
</ul>
Output –
- Keyboard
- Mouse
- Scanner{codeBox}
3. Description List -
Description List is another type of List that is slightly different from Ordered and Unordered List. It is called the description list, it has three tags -
dl – Description list
dt – Description term
dd – Description data
Syntax:-
<dl>
<dt>HTML</dt>
<dd>Hypertext Markup Language</dd>
<dt>HTTP</dt>
<dd>Hypertext Transfer Protocol</dd>
</dl>
Output-
HTML
Hypertext Markup Language
HTTP
Hypertext Transfer Protocol{codeBox}