HTML List Tags – UL, OL and DL
There are many reasons you might want to add a lists to your pages, from putting your five favorite albums on your homepage to including a numbered set of instruction for visitors to follow. In HTML you can create three types of lists.
- Unordered Lists.
- Ordered List.
- Definition LIst.
By using lists you can arrange your content or information in a well-mannered form. You can manage them in the form of Ascending and Descending order or indent-wise also. In below figure you can see all three types of lists.
HTML <ul> Element
The html <ul> element is used to create Unordered Lists. If you want to make a list of bullet points, you write the list within the <ul> element. Each bullet point or the line you want to write should then be contained between opening <li> tag and closing </li> tags.
<li> Apple </li>
<li> IBM </li>
<li> Intel </li>
HTML <ol> Element
Sometime, you want your list to be ordered. In an ordered list, rather than prefixing each point with a bullet point you can use either number (1,2,3), letters (A, B, C) or Roman numerals (I , II, III) to prefix the list item. An ordered list is contained inside the <ol> element. each item in the list should then be nested inside the <ol> element and contained between opening <li> and closing </li> tags.
Using type attribute to select type of ordered list (Deprecated)
The type attribute on the <ol> element enables you to change the ordering of list items from the default of numbers to the options listed in the table that follows by giving the type attribute the corresponding character.
Using the start attribute to change the starting number in ordered list. (Deprecated)
If you want to specify the number that a numbered list should start at, you can use the start attribute on <ol> element. The value of this attribute should be the numeric representation of that point in the list.
<ol type='I' start='10'>
The definition list is a special kind of list for providing terms followed by a short text definition or description for them. Definition lists are contained inside the <dl> element. The <dl> element then contains alternating <dt> and <dd> elements. The content of the <dt> element is the term you will be defining. The <dd> element contains the definition of the previous <dt> element.
<dt> Unordered List </dt>
<dd> A list of bullets point</dd>
<dt> Ordered List </dt>
<dd>An Ordered list of Points such as a numbered set of steps</dd>
<dd>A list of term definition</dd>
A list of bullets point
An Ordered list of Points such as a numbered set of steps
A list of term definition
Nesting of Lists
Nesting meaning is list inside list. You can nest lists inside other lists. for example, you might want a numbered list with separate points corresponding to one of the list items. Each nested list will be numbered separately unless you specify otherwise using the start attribute. And each new lists should be placed inside a <li> element.
<li> item four
<li> Item Five</li>
- Item 1
- Item 2
- Item 3
- item four
- Item 4.1
- Item 4.2
- Item 4.3
- Item Five