HTML Lists
A webpage is sorted and indexed as one of the best ways to present information. Two kinds of lists can be be made through HTML.
- Ordered List
- Unordered List
Unordered Lists
|
1 2 3 4 5 6 |
< ul type = “disc/circle/square”> <li>…….</li> <li>…….</li> <li>…….</li> <li>…….</li> </ul> |
type = “disc” sets a solid disc. type = “circle” sets an empty circle. type = “square” sets a solid square.
Example 1
|
1 2 3 4 5 6 7 8 |
<html> <ul type ="disc"> <li>UP</li> <li>Punjab</li> <li>Haryana</li> <li>MP</li> </ul> </html> |
Output
- UP
- Punjab
- Haryana
- MP
Example 2
|
1 2 3 4 5 6 7 8 |
<ul type = “circle”> <li>UP</li> <li>Punjab</li> <li>Haryana</li> <li>MP</li> </ul> </html> |
Output
O UP
O Punjab
O Haryana
O MP
Ordered Lists
|
1 2 3 4 5 6 |
<ol type = “1/A/a”> <li>………</li> <li>………</li> <li>………</li> <li>………</li> </ol> |
type = “1” sets a sequence numbers. type = “A” sets sequence uppercase letter A, B, C.. type = “a” sets sequence lowercase letter a,b,c…
Example
|
1 2 3 4 5 6 7 8 |
<html> <ol type= “1”> <li>UP</li> <li>Punjab</li> <li>Haryana</li> <li>MP</li> </ol> </html> |
Output
- UP
- Punjab
- Haryana
- MP
Example
|
1 2 3 4 5 6 7 8 |
<html> <ol type ="A"> <li>UP</li> <li>Punjab</li> <li>Haryana</li> <li>MP</li> </ol> </html> |
Output
A.UP
B.Punjab
C.Haryana
D.MP
Example
|
1 2 3 4 5 6 7 8 |
<html> <ol type ="a"> <li>UP</li> <li>Punjab</li> <li>Haryana</li> <li>MP</li> </ol> </html> |
Output
a.UP
b.Punjab
c.Haryana
d.MP
Definition Lists
|
1 2 3 4 5 |
<dl> <dt>……..</dt> <dd>…….</dd> <dt>……..</dt> <dd>…….</dd> <dt>……..</dt> <dd>…….</dd> </dl> |
<dl></dl> includes all definition list items
<dt></dt> includes all the first layer of list items.
<dd></dd> includes all the second layer of list items
Example
|
1 2 3 4 5 6 7 |
<html> <dl> <dt>AAAA</dt> <dd>These are A letters</dd> <dt>BBBB</dt> <dd> These are B letters </dd> <dt>CCCC</dt> <dd> These are C letters </dd> </dl> </html> |
Output
AAAA
These are A letters
BBBB
These are B letters
CCCC
These are C Letters
Explanation
<dl></dl> contains all definition lists items.
<dt>AAAA</dt> contains the first layer of list items “AAAA”.
<dd>These are A letters</dd> contains the second layer of list items “These are A letters”.
Unordered Lists Style
Unordered lists ca set the CSS style by its id, class or tag name.
|
1 |
.class{attribute:value} |
Example
|
1 2 3 4 5 6 7 8 9 10 11 |
<html> <style type = “text/css” #b{font-style:italic} </style> <body> <ol class = “b”> <li>AAA</li> <li>BBB</li> </ol> </body> </html> |
Output
- AAA
- BBB
Explanation: # b{font-style:italic} sets font as italic for class =”a”
Definition Lists Style
Definition can be set CSS style by its id, class or tag name.
tag{attribute:value}
Example
|
1 2 3 4 5 6 7 8 9 10 |
<html> <style type =”text/css”> dt{color:purple} dd{font-style:italic} <style> <dl> <dt>AAAAA</dt> <dd> These are A letters </dd> <dt>BBBBB</dt> <dd> These are B Letters </dd> </dl> </html> |
Output:
AAAAA
These are A Letters
BBBBB
These are B Letters
Explanation: dt{color: purple} & dd{ font-style: italic} sets css style by tag name.
