Lists are used for listing steps or elucidating important points. They are used in web page in various ways like to putting favorite items, set of instructions which are numbered to indicate the sequence, summarize main aspects or feature, etc. There are three types of lists tags for web pages in HTML which are
- Ordered lists, uses numbers or letters
- Unordered lists, uses different types of bullets
- Definition lists, used to specify a term and its definition
Ordered list – An ordered list starts with the opening tag <ol> and ends with the closing tag </ol>. Each individual item in the list is nested inside the opening tag <ol> and the closing tag </ol>. Further, each individual item is contained in the opening <li> and closing </li> tags where ‘li’ stands for list item and ‘ol’ stands for start of an ordered list as shown
| HTML code
<ol> <li>One</li> <li>Two</li> <li>Three</li> </ol> |
Browser output
|
type attribute – It is used for using letters or Roman numerals in <ol> tag. It is not used now but CSS is used for the purpose as shown in the example
| HTML code
<ol type=”I”> <li>One</li> <li>Two</li> <li>Three</li> </ol> |
Browser output
|
Different values of type are listed in the table
| Value of Type Attribute | Numbering Style | Example |
| 1 | Arabic numbers | 1,2,3,… |
| a | Lowercase alphabet | a,b,c,… |
| A | Uppercase alphabet | A,B,C,… |
| i | Lowercase Roman numerals | i,ii,iii,… |
| I | Uppercase Roman numerals | I, II, III,… |
start Attribute – It is used to control the number at which a list starts. Its value should be integer only. It is not used now but CSS is used for the purpose as shown in the example
| HTML code
<ol type=”1″ start=”5″> <li>One</li> <li>Two</li> <li>Three</li> </ol> |
Browser output
|
Unordered lists – An unordered list starts with the opening tag <ul> and ends with the closing tag </ul>. Each individual item in the list is nested inside the opening tag <ul> and the closing tag </ul>. Also, each individual item is contained in the opening <li> and closing </li> tags similar to the ordered list as shown
| HTML code
<ul> <li>One</li> <li>Two</li> <li>Three</li> </ul> |
Browser output
|
Definition lists – It is used to provide terms followed by a short text definition or description for them. Definition lists are contained in the opening <dl> tag which contains alternating <dt> and <dd> elements. The content of the <dt> element is the term to be defined. The <dd> element has the definition of the previous <dt> element as shown
| HTML code
<dl> <dt>BA</dt> <dd>It is Bachelor of Arts</dd> <dt>MA</dt> <dd>It is Master of Arts</dd> </dl> |
Browser output
|
