Listing In HTML
List Tags :
A list is a number of connected items or names written or printed consecutively, typically one below the other. So, we can say that List is a collection of items or things that displayed on a web page in an ordered or unordered manner. Lists are good from a structural point of view as they help create a well-structured, more accessible, easy-to-maintain document.
Types of List in HTML:
1. unordered list<ul>:An unordered list used to group a set of related items in no particular order.
2. ordered list<ol>:An ordered list used to group a set of related items in a specific ascending or descending order.
3. description list<dl>:A Description list used to display name/value pairs such as terms and definitions.
1. unordered list<ul>:An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.The list items will be marked with bullets (small black circles) by default:
| Type=”Value” | Description |
| type="disc” | Sets the list item marker to a bullet (default) |
| type="circle” | Sets the list item marker to a circle |
| type="square” | Sets the list item marker to a square |
| type="none” | The list items will not be marked |
Example:
<ul type = "disc">
<li>Book</li>
<li>Pen</li>
<li>Pencil</li>
</ul>
Output:
|
2. ordered list<ol>:An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.The list items will be marked with numbers by default:
| Attribute | Value | Description |
| Reversed | Specifies that the list order should be descending (9,8,7...) | |
| Number | Specifies the start value of an ordered list | |
| 1, A, a, I, i | Specifies the kind of marker to use in the list |
| Type=”Vvalue” | Description |
| type="1" | The list items will be numbered with numbers (default) |
| type="A" | The list items will be numbered with uppercase letters |
| type="a" | The list items will be numbered with lowercase letters |
| type="I" | The list items will be numbered with uppercase roman numbers |
| type="i" | The list items will be numbered with lowercase roman numbers |
Example:
<ol type = "i" start = "4">
<li>Book</li>
<li>Pen</li>
<li>Pencil</li>
</ol>
Output:
iv. Book
v. Pen
vi. Pencil
3. description list<dl>:A description list is a list of terms, with a description of each term.
Ø<dl>: The <dl> tag defines the description list.
Ø<dt>: The <dt> tag defines the term (name).
Ø<dd>: The <dd> tag describes each term/item of description list.
Example:
<dl>
<dt>HTML</dt>
<dd>Hyper Text Markup Language</dd>
<dt>FTP</dt>
<dd>File Transfer Protocol</dd>
</dl>
Output:
HTML
Hyper Text Markup Language
FTP
File Transfer Protocol
Example: Nested List
<ol>
<li>Fruits <!-- Start Fruits <li> tag (Outer list) -->
<ol> <!-- (Inner list)-->
<li>Apple</li>
<li>Mango</li>
<li>Orange</li>
</ol>
</li> <!-- End Fruits </li> tag -->
<li>Color <!-- Start Color <li> tag (Outer list) -->
<ol> <!-- (Inner list)-->
<li>Blue</li>
<li>Pink</li>
<li>Purple</li>
</ol>
</li> <!-- End Color </li> tag -->
<li>Other things</li>
</ol>
Output:
|
0 Comments