HTML Lists

HTML/HTML Lists

HTML Lists

There are lots of reasons when we need to use lists. HTML provides us with three different types lists:

● Ordered lists are lists where each item in the list is numbered. For example, the list might be a set of steps for a recipe that must be performed in order, or a legal contract where each point needs to be identified by a section number.

● Unordered lists are lists that begin with a bullet point (rather than characters that indicate order).

● Definition lists are made up of a set of terms along with the definitions for each of those terms.

Ordered Lists

<ol> The ordered list is created with the <ol> element.

<il> Each item in the list is placed between an opening <il> tag and a closing <il> tag. (The li stands for list item.)

Browsers indent lists by default. Sometimes you may see a type attribute used with the <ol> element to specify the type of numbering (numbers, letters, roman numerals and so on).

It is better to use the CSS list-style-type property. 

Output of the above code is:

Unordered Lists

<ul> The unordered list is created with the <ul> element.

<li>  Each item in the list is placed between an opening <li> tag and a closing <li> tag. (The li stands for list item.)

Browsers indent lists by default. sometimes you may see a type attribute used with the <ul> element to specify the bullet point( circles squares and so on). 

It is better to use the CSS list-style- property.

<ul>

<li>one</li>

<li>Two</li>

<li>Three</li>

<li>Four</li>

<li>Five</li>

</ul>

Output of the above code is:

Definition Lists

<dl> The definition list is created with the <dl> element and usually consists of aseries of terms and their definiions.In side the<dl>  element you will usually see pairs of <dt> and   the  <dd> elements.

<dt> This is used to contain the term being define(the definition term).

<dd> This is used to contain the definition. Sometimes you might see a list where there are two terms used for the same definition or two different definitions for the same term.

Output of the above code is:

Nested Lists

You can put a second list inside an <li>  element to create a sub list or nested list. Browsers display nested lists indented further than the parent list. In nested unordered lists, the browser will usually change the style of the bullet point too.

Output of the above code is:

Summary of HTML Lists

• In General there are three types of HTML lists: ordered, unordered, and definition.

• Ordered lists use to assign values by the  numbers format.

• Unordered lists use to assign values by the bullets format.

• Definition lists are used to define terminology.

• Lists can be nested inside one another lists.