Information in your web page can be listed using the List feature of HTML. There will be a set of reasons you may have for including a list in your web pages. These reasons can vary from inserting your user's 10 favorite music albums the page, or may include names of visitors along with their favorite hobby to list down in a web document. There may be plenty many reasons. So in simple terms, you can provide numbered or orderly place your information as a category or subcategory which might increase your document's readability. In this chapter, you will be learning about how to use lists and the different tags used in listing your data.
HTML's Listing Tags
HTML provides three different techniques to specify information in the form of lists. It is to be noted that, every list needs to have at least one multiple data elements within it. The various forms of HTML list tags are:
| Tag | Description |
|---|---|
| <ol> | HTML ol tag is abbreviated as Ordered List which is used for numbering the lists in a web page. |
| <ul> | HTML UL tag is abbreviated as Unordered List which is used for listing your items via bullets and circles. |
| <dl> | HTML dl tag is abbreviated as Definition List which is used for arranging your data items like the way items remain arranged in any dictionary. |
The type Attribute
You can use the type attribute in these above listing tags. This type attribute will eventually help you in specifying your customized type from the types pre-specified by HTML.
- <ol type = "1"> - Numbers, which is the default type of Ordered List
- <ol type = "i"> - Numerals (roman) with lower caps
- <ol type = "I"> - Numerals (roman) with upper caps
- <ol type = "a"> - Numbering will be done in the form of Lower-case Letters
- <ol type = "A"> - Numbering will be done in the form of upper-case Letters
Similarly, for Unordered lists also, there are three symbols which will acts as bullets for your lists.
- <ul type = "square"> - Bulleting using a filled square
- <ul type = "disc"> - Bulleting using a filled circle
- <ul type = "circle"> - Bulleting using a empty circle
Start Attribute
The start attribute of <ol> is used for providing the starting point or value of your list.
<ol type = "I" start = "3">Example of OL Tag
<ol type = "i" start = "4">
<li> Four </li>
<li> Five </li>
<li> Six </li>
</ol>
<ol type = "I" start = "1">
<li> Alex </li>
<li> Deeksha </li>
<li> Ray </li>
<li> Neha </li>
</ol>
<ol type = "A" start = "1">
<li> Alex </li>
<li> Deeksha </li>
<li> Ray </li>
<li> Neha </li>
</ol>
<ol type = "a" start = "1">
<li> Alex </li>
<li> Deeksha </li>
<li> Ray </li>
<li> Neha </li>
</ol>
<ol type = "1" start = "1">
<li> Alex </li>
<li> Deeksha </li>
<li> Ray </li>
<li> Neha </li>
</ol>Example of UL Tag
<ul type = "square">
<li> A </li>
<li> B </li>
<li> C </li>
</ul>
<ul type = "disc">
<li> Alex </li>
<li> Deeksha </li>
<li> Ray </li>
</ul>
<ul type = "circle">
<li> Alex </li>
<li> Deeksha </li>
<li> Ray </li>
</ul>Definition List
In this type of listing of data, the data are arranged or listed like that of a dictionary or encyclopedia. It is used on the last page of your site for providing the glossary or arranged a set of definitions.
It takes the help of two more tags called as: <dt> - a definition terminology and <dd> - definition description.
<dl>
<dt> Alex </dt>
<dd> Class X </dd>
<dt> Deeksha </dt>
<dd> Class IX </dd>
</dl>
