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
< 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
<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
<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
<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
<html>
<ol type= “1”>
<li>UP</li>
<li>Punjab</li>
<li>Haryana</li>
<li>MP</li>
</ol>
</html>Output
- UP
- Punjab
- Haryana
- MP
Example
<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
<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
<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
<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.
.class{attribute:value}Example
<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
<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.
