Website Design With HTML | HTML List

HTML Lists:

In this tutorial you will learn how to create a variety of  HTML lists. Now we learn about three types of lists in HTML:

• Unordered lists,( are like lists of bullet points )
• Ordered lists, (use a sequence of numbers or letters instead of bullet points)
• Definition lists, ( specify a term and its definition)

  

---

HTML Unordered Lists:

1. Start with <ul>(unordered list) tag and end with a closing </ul> tag.
2. Enter the <li>(list item) tag followed by the individual item and close with </li>.

Try this example:

<b>Download:</b>
<ul> 
<li >Software
<li>Music
<li>game
</ul> 

Tips:

 You have the choice of three bullet types: Disc(default), Circle, Square. To do this we use "type" attribute for the <ul> element but bullet type is not supported in Internet Explorer 3.0 or below.

Try this Example:

<ul type="square"> 
<li >Software
<li>Music
<li>game
</ul>

---

HTML Ordered Lists:

An ordered list (also called an numbared list) start with <ol> tag and end with a closing </ol> tag.

Try this Example:

<p>Download:</p>
<ol> 
<li >Software
<li>Music
<li>game
</ol>

Use attributes in ordered list:

You have the choice of five numbered types: Arabic numbers (the default), Capital letters, Small letters, Lower roman, Upper roman. To do this we use "type" attribute for the <ol> element .
 

Attributes for ordered list

Value for type attributes	Description	Example
1	Arabic numbers (default)	1, 2, 3, 4, 5
A	Capital letters	A, B, C, D, E
a	Small letters	a, b, c, d, e
I	Lower roman	I, II, III, IV, V
i	Upper roman	i, ii, iii, iv, v

Try this Example:

<b>Download:</b>
<ol type="I"> 
<li >Software
<li>Music
<li>game
</ol>

---

HTML Definition Lists:

The definition list is a special kind of list for providing terms followed by a short text definition or description for them. Definition lists are contained inside the <dl>element. The <dl>element then contains alternating <dt>and <dd>elements. The <dd>element contains the definition of the previous <dt>element.

Try this Example:

<dl> 
<dt>KUET</dt>
<dd>Khulna University of Engineering and Technology</dd>
<dt>ECE</dt>
<dd>Electronics and Communication Engineering.</dd>
</dl>

---

Nested Lists:

Lists can be nested. You can also have a number of paragraphs, each containing a nested list, in a single list item.

Try this Example:

<ul> 
<li>Web Design: 
<ul> 
<li>HTML
<li>CSS
<li>PHP
</ul> 
<li>Download: 
<ul> 
<li>Software
<li>Game
</ul> 
</ul> 

---

Previous Tutorials

1.	Create your Websites with HTML | HTML Introduction
2.	Basic structure of HTML
3.	Create Your websites with HTML | HTML Tags
4.	Web Design With HTML | HTML Elements
5.	Web Design with HTML | HTML Attributes