HTML Lists
HTML List
HTML lists are used to specify data sets. All lists can include one or more elements from the list. HTML lists are available in three different types:
- Ordered List or numbered List (ol)
- Unordered List or Bulleted List (ul)
- Description List or Definition List (dl)
Ordered List or numbered List
All list items in the ordered HTML lists are marked with numbers by default. It is also known as a numbered list. The ordered list starts with the < ol > tag and the list item starts with the < li > tag.
Example
<html> <body> <ol> <tr> Fruits name </tr> <li>Apple</li> <li>Banana</li> <li>Orange</li> <li>Papaya</li> </ol> </body> </html>
Output
HTML Unordered List or Bulleted List
All the list items are marked with bullets in the HTML Unordered list. It is also referred to as a bulleted list. The Unordered list starts with the < ul > tag. The < li > tag starts with the list item.
Example
<html> <body> <ul> <tr> Fruits name </tr> <li>Apple</li> <li>Banana</li> <li>Orange</li> <li>Papaya</li> </ul> </body> </html>
Output
HTML Description List or Definition List
HTML Description list is also a list style that is supported by HTML and XHTML. It is referred as a definition list where the entries are listed as a dictionary or encyclopedia.
The definition list is useful when we want to present a glossary, a list of terms or another name-value list.
The HTML definition list contains three tags:
<dl> tag: Defines the starting of the list.
<dt> tag: Defines a term.
<dd> tag: Defines the term definition(description).
Example
<html> <head> <title>HTML Definition List</title> </head> <body> <dl> <dt><b>HTML</b></dt> <dd>This stands for Hyper Text Markup Language</dd> <dt><b>HTTP</b></dt> <dd>This stands for Hyper Text Transfer Protocol</dd> </dl> </body> </html>
Output
HTML Nested List
A list within another list is called a nested list. If you want a bullet list inside a numbered list, this type of list will be called a nested list.
Example
<html> <head> <title>Nested list</title> </head> <body> <p>List of Indian States with thier capital</p> <ol> <li>Delhi <ul> <li>NewDelhi</li> </ul> </li> <li>Haryana <ul> <li>Chandigarh</li> </ul> </li> <li>Gujarat <ul> <li>Gandhinagar</li> </ul> </li> <li>Rajasthan <ul> <li>Jaipur</li> </ul> </li> <li>Maharashtra <ul> <li>Mumbai</li> </ul> </li> <li>Uttarpradesh <ul> <li>Lucknow</li></ul> </li> </ol> </body> </html>
Output
HTML Unordered List or HTML Bulleted List
The HTML Unordered List or Bulleted lists can display bulleted items. We can use an unordered list to display the items in any random order. The HTML ul tag is used in the unordered list.
There may be 4 types of bulleted list:
- disc
- circle
- square
- none
There are 4 types of attributes in the < ul > tag to represent different ordered lists.
| Type | Description |
| “disc” | It's the default style. In this style, the items of the list are marked with bullets. |
| “circle” | The items in the list are marked with circles. |
| “square” | The list items in the list are marked with squares. |
| “none” | The list items are not marked here. |
Unordered List Example
<html> <body> <ul> <li>HTML</li> <li>Java</li> <li>JavaScript</li> <li>SQL</li> </ul> </body> </html>
Output
ul type="disc"
Example
<html> <body> <h2>Unordered List with Disc Bullets</h2> <ul style="list-style-type:disc;"> <li>HTMLee</li> <li>Java</li> <li>JavaScript</li> </ul> </body> </html>
Output
ul type="circle"
<html> <body> <h2>Unordered List with Circle Bullets</h2> <ul style="list-style-type:circle;"> <li>HTML</li> <li>Java</li> <li>JavaScript</li> </ul> </body> </html>
Output
ul type="square"
Example
<html> <body> <h2>Unordered List with Square Bullets</h2> <ul style="list-style-type:square;"> <li>HTML</li> <li>Java</li> <li>JavaScript</li> </ul> </body> </html>
Output
ul type="nono"
Example
<html> <body> <h2>Unordered List without Bullets</h2> <ul style="list-style-type:none;"> <li>HTML</li> <li>Java</li> <li>JavaScript</li> </ul> </body> </html>
Output
HTML Description List | HTML Definition List
HTML Description List or Definition List shows elements like a dictionary in description form. The < dl >, < dt > and < dd > tags are used to define the set of descriptions.
There are three types of description list tags given below:
- <dl>tag: Defines the list of definitions.
- <dt>tag: Defines data term.
- <dd>tag: Defines data definition (description).
Example
<html> <body> <dl> <dt>HTML</dt> <dd>is a markup language</dd> <dt>Java</dt> <dd>is a programming language and platform</dd> <dt>JavaScript</dt> <dd>is a scripting language</dd> </dl> </body> </html>
Output
