HTML Lists

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

  1. UP
  2. Punjab
  3. Haryana
  4. 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

  1. AAA
  2. 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.