HTML list creation

Posted on by

HTML list creation is a most important for a web site. If you need to create a list by HTML, then we well say, that is very easy on its coding. You may need to create Number, Bullets, Romar & many other things by HTML coding. There are many kinds of HTML list such as Ordered, Unordered, Definition lists etc. All of those we use some HTML tag like <ol>, <ul>, <dl> etc. Here <ol> for ordered list, <ul> for unordered list, <dl> for definition list. By the by you can learn it about it easily to observe our this post. Let’s learn how can you do that……………

 

Ordered list Use Numbers, Letters, Romans:

Ordered list Use Numbers:

HTML Coding

Show in Browser

[code language=”css”]
<ol>
<li>List on number</li>
<li>List on number</li>
<li>List on number</li>
</ol>
[/code]
  1. List on number
  2. List on number
  3. List on number

Ordered list Use Small Letters:

HTML Coding

Show in Browser

[code language=”css”]
<ol style="list-style-type: lower-alpha;">
<li>List on small letter</li>
<li>List on small letter</li>
<li>List on small letter</li>
</ol>
[/code]
  1. List on small letter
  2. List on small letter
  3. List on small letter

Ordered list Use Capital Letters:

HTML Coding

Show in Browser

[code language=”css”]
<ol style="list-style-type: upper-alpha;">
<li>List on capital letter</li>
<li>List on capital letter</li>
<li>List on capital letter</li>
</ol>
[/code]
  1. List on capital letter
  2. List on capital letter
  3. List on capital letter

Ordered list Use Lower Romans:

HTML Coding

Show in Browser

[code language=”css”]
<ol style="list-style-type: lower-roman;">
<li>List on small romar</li>
<li>List on small romar</li>
<li>List on small romar</li>
</ol>
[/code]
  1. List on small romar
  2. List on small romar
  3. List on small romar

Ordered list Use Upper Romans:

HTML Coding

Show in Browser

[code language=”css”]
<ol style="list-style-type: upper-roman;">
<li>List on capital romar</li>
<li>List on capital romar</li>
<li>List on capital romar</li>
</ol>
[/code]
  1. List on capital romar
  2. List on capital romar
  3. List on capital romar

 

Unordered list Use Bullets:

Unordered list Use Normal Bullets:

HTML Coding

Show in Browser

[code language=”css”]
<ul>
<li>list item bullets</li>
<li>list item bullets</li>
<li>list item bullets</li>
<li>list item bullets</li>
</ul>
[/code]
  • list item bullets
  • list item bullets
  • list item bullets
  • list item bullets

Unordered list Use Circle Bullets:

HTML Coding

Show in Browser

[code language=”css”]
<ul style="list-style-type: circle;">
<li>list item bullets</li>
<li>list item bullets</li>
<li>list item bullets</li>
<li>list item bullets</li>
</ul>
[/code]
  • list item bullets
  • list item bullets
  • list item bullets
  • list item bullets

 

Unordered list Use SquareBullets:

 

HTML Coding

Show in Browser

[code language=”css”]
<ul style="list-style-type: square;">
<li>list item bullets</li>
<li>list item bullets</li>
<li>list item bullets</li>
<li>list item bullets</li>
</ul>
[/code]
  • list item bullets
  • list item bullets
  • list item bullets
  • list item bullets

 

Definition list:

HTML Coding

Show in Browser

[code language=”css”]
<dl>
<dt>Class</dt>
<dd>Eight</dd>
<dd>Nine</dd>
<dd>Ten</dd>
<dt>First Boy</dt>
<dd>Noyon</dd>
<dd>Noyon</dd>
<dd>Noyon</dd>
<dt>Second Boy</dt>
<dd>Eye</dd>
<dd>Eye</dd>
<dd>Eye</dd>
</dl>
[/code]
Class
Eight
Nine
Ten
First Boy
Noyon
Noyon
Noyon
Second Boy
Eye
Eye
Eye