How can you make an item list on your webpage...?

Lists are a great way to keep your data or links in an organised fashion.

Ordered, Unordered and Definition lists

The difference between lists in HTML

The three major types of list formatting in HTML are, Ordered, Unordered and Definition. The advantage of using lists is to render your content in an organised layout without the use of other elements. The difference between different lists is as follows:

Ordered Lists: Ordered lists are also called sequenced or numbered lists. In the Ordered List the list of items have an order that is signified by a number, roman numeral or alphabetical character. The type of list is declared with the TYPE attribute.
Unordered Lists: Unorderd lists are lists where the browser will show the list with a bullet preceding each list item. You can change the default bullet for an image by using style sheets (we will come to that later).
The left menu of this site is constructed with an unordered list and CSS (Cascading Style Sheets).
Definition lists: A definition list is a list of titles and their corresponding definitions indented and following on the next line. The definition list typically does not use bullets or other formats as in the ordered and unordered lists but, more a pattern of indentation.
Note: This list was created with a definition list :-)

syntax and examples of above lists

Ordered Lists

<ol> Start of list, Default output is 1,2,3 etc
<lh>Website Tutorials</lh> Title of list
<li>Basic web design List elements
<li>Intermidiate web design
<li>Advanced web design
</ol> End of list

Or using the "TYPE" attribute...

<ol TYPE="A"> Start of list, output is A,B,C etc
<lh>Website Tutorials</lh> Title of list
<li>Basic web design List elements
<li>Intermidiate web design
<li>Advanced web design
</ol> End of list

You can use different types to format the list as you wish:

TYPE="1" (or no type specified) - Will display the list items in numerals
TYPE="A" - Will display list the items in uppercase letters
TYPE="a" - Will display list the items in lowercase letters
TYPE="I" - Will display list the items in uppercase roman numerals
TYPE="i" - Will display list the items in lowercase roman numerals

See all lists in action here at the examples page.

Unordered Lists

<ul> Start of list
<lh>Website Tutorials</lh> Title of list
<li>Basic web design List elements
<li>Intermidiate web design
<li>Advanced web design
</ul> End of list

The above list is marked with bullets or dots, located to the left of each item.

Definition Lists

<dl> Start of list
<dt>Basic web design Title of list
<dd>The best way to get started learning HTML.Corresponding definition
<dt>Intermidiate web design
<dd>Now you know the basics lets look at the next level.
<dt>Advanced web design
<dd>This is only for hardened HTML learners who have read the previous two catagorys.
</dl> End of list

See all lists in action here at the examples page.

Nested Lists

<ul> Start of list
<lh>Website Tutorials</lh> Title of list
<li>Basic web design List elements
<li>Intermidiate web design
<ul> Start of nest
<li>Website layout and preparationNested list elements
<li>Image editing
</ul> End of nested list
<li>Advanced web design
</ul> End of list

Nested lists can be used on any types of list but need to be formatted correctly first.

Site designed by Pro-WebDesign

Make a Website