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

---