Website Design With HTML | HTML List | Our PC Solution

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:
Web design | HTML Lists
  • 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

1 comment :

  1. Thank You..It was a nice experience to visit your site and it was helpful in reviewing the basics for web design...

    ReplyDelete