What is a list?
A list is a record of short pieces of information, such as people’s names, usually written or printed with a single thing on each line and ordered in a way that makes a particular thing easy to find.
For example:
- A shopping list
- To-do list
HTML offers three ways for specifying lists of information. All lists must contain one or more list
elements.
The types of lists that can be used in HTML are :
- ul : An unordered list. This will list items using plain bullets.
- ol : An ordered list. This will use different schemes of numbers to list your items.
- dl : A definition list. This arranges your items in the same way as they are arranged in a dictionary.
An unordered list starts with the “ul” tag. Each list item starts with the “li” tag.The list items are marked with bullets i.e small black circles by default. br>
Example:
<!DOCTYPE html> < html > < body > < h2 >Grocery list</ h2 > < ul > < li >Bread</ li > < li >Eggs</ li > < li >Milk</ li > < li >Coffee</ li > </ ul > </ body > </ html > |
Output :
The HTML Unordered List has various List Item Markers:-
- Disc : Sets the list item marker to a bullet i.e default.
<!DOCTYPE html>
<
html
>
<
body
>
<
h2
>Unordered List with Disc Bullets</
h2
>
<
h2
>Grocery List</
h2
>
<
ul
style
=
"list-style-type:disc"
>
<
li
>Bread</
li
>
<
li
>Eggs</
li
>
<
li
>Milk</
li
>
<
li
>Coffee</
li
>
</
ul
>
</
body
>
</
html
>
Output :
- Circle : Sets the list item marker to a circle.
<!DOCTYPE html>
<
html
>
<
body
>
<
h2
>Unordered List with Circle Bullets</
h2
>
<
h2
>Grocery list</
h2
>
<
ul
style
=
"list-style-type:circle"
>
<
li
>Bread</
li
>
<
li
>Eggs</
li
>
<
li
>Milk</
li
>
<
li
>Coffee</
li
>
</
ul
>
</
body
>
</
html
>
Output :
- Square : Sets the list item marker to a square.
<!DOCTYPE html>
<
html
>
<
body
>
<
h2
>Unordered List with Square Bullets</
h2
>
<
h2
>Grocery list</
h2
>
<
ul
style
=
"list-style-type:square"
>
<
li
>Bread</
li
>
<
li
>Eggs</
li
>
<
li
>Milk</
li
>
<
li
>Coffee</
li
>
</
ul
>
</
body
>
</
html
>
Output :
An ordered list starts with the “ol” tag. Each list item starts with the “li” tag. The list items are marked with numbers by default.
Example:
<!DOCTYPE html> < html > < body > < h2 >Grocery List</ h2 > < ol > < li >Bread</ li > < li >Eggs</ li > < li >Milk</ li > < li >Coffee</ li > </ ol > </ body > </ html > |
Output :
The HTML Ordered List has various List Item Markers:
The type attribute of the <ol> tag, defines the type of the list item marker.
- Type=”1″ : The list items will be numbered with numbers i.e default.
<!DOCTYPE html>
<
html
>
<
body
>
<
h2
>Ordered List with Numbers</
h2
>
<
ol
type
=
"1"
>
<
li
>Bread</
li
>
<
li
>Eggs</
li
>
<
li
>Milk</
li
>
<
li
>Coffee</
li
>
</
ol
>
</
body
>
</
html
>
Output :
- Type=”A” : The list items will be numbered with uppercase letters.
<!DOCTYPE html>
<
html
>
<
body
>
<
h2
>Ordered List with Letters</
h2
>
<
ol
type
=
"A"
>
<
li
>Bread</
li
>
<
li
>Eggs</
li
>
<
li
>Milk</
li
>
<
li
>Coffee</
li
>
</
ol
>
</
body
>
</
html
>
Output :
- Type=”a” : The list items will be numbered with lowercase letters.
<!DOCTYPE html>
<
html
>
<
body
>
<
h2
>Ordered List with Lowercase Letters</
h2
>
<
ol
type
=
"a"
>
<
li
>Bread</
li
>
<
li
>Eggs</
li
>
<
li
>Milk</
li
>
<
li
>Coffee</
li
>
</
ol
>
</
body
>
</
html
>
Output :
- Type=”I” : The list items will be numbered with uppercase roman numbers.
<!DOCTYPE html>
<
html
>
<
body
>
<
h2
>Ordered List with Roman Numbers</
h2
>
<
ol
type
=
"I"
>
<
li
>Bread</
li
>
<
li
>Eggs</
li
>
<
li
>Milk</
li
>
<
li
>Coffee</
li
>
</
ol
>
</
body
>
</
html
>
Output :
- Type=”i” : The list items will be numbered with lowercase roman numbers.
<!DOCTYPE html>
<
html
>
<
body
>
<
h2
>Ordered List with Lowercase Roman Numbers</
h2
>
<
ol
type
=
"i"
>
<
li
>Bread</
li
>
<
li
>Eggs</
li
>
<
li
>Milk</
li
>
<
li
>Coffee</
li
>
</
ol
>
</
body
>
</
html
>
Output :
A description list is a list of terms, with a description of each term.
The <dl> tag defines the description list, the <dt> tag defines the term name, and the <dd> tag describes each term.
Example:
<!DOCTYPE html> < html > < body > < h2 >A Description List</ h2 > < dl > < dt >Coffee</ dt > < dd >- 500 gms</ dd > < dt >Milk</ dt > < dd >- 1 ltr Tetra Pack</ dd > </ dl > </ body > </ html > |
Output :
Nested List in HTML:
A nested list is a list which has a list inside a list.
<!DOCTYPE html> < html > < body > < h2 >A Nested List</ h2 > < ul > < li >Coffee</ li > < li >Tea < ul > < li >Black tea</ li > < li >Green tea</ li > </ ul > </ li > < li >Milk</ li > </ ul > </ body > </ html > |
Output :
leave a comment
0 Comments