HTML list tags are use on the web articles, website navigation menus, and product features of websites. HTML list tags offers authors three ways for specifying list of page information.
There are three types of lists you can use, and each one has a specific purpose and meaning. That are:
Unordered list — This list items use to group a set of related items, in no particular order.
Ordered list — This list items use to group a set of related items, in a specific order.
Description list — This list items use to display a list of terms and their descriptions.
Unordered List:
An unordered list is use when rearranging the order of the list items of the information. Unordered list starts with the <ul> tag and end with the </ul> tag and each list item starts with the <li> tag. The HTML unordered list is a collection of related elements of HTML page.
Example:
<!DOCTYPE html> <html> <head> <title>HTML Unordered List</title> </head> <body> <label>HTML color</label> <ul> <li>White</li> <li>Black</li> <li>Red</li> <li>Green</li> <li>Yellow</li> <li>Blue</li> </ul> </body> </html>
In HTML you can use different type list attribute for <ul> tag. The attribute are –
Square
Disc
Circle
Square example:
<!DOCTYPE html> <html> <head> <title>HTML Square List</title> </head> <body> <label>HTML Unordered Square List</label> <ul type = "square"> <li>White</li> <li>Black</li> <li>Red</li> <li>Green</li> <li>Yellow</li> <li>Blue</li> </ul> </body> </html>
Disc Example:
<!DOCTYPE html> <html> <head> <title>HTML Disc List</title> </head> <body> <label>HTML Unordered Disc List</label> <ul type = "disc"> <li>White</li> <li>Black</li> <li>Red</li> <li>Green</li> <li>Yellow</li> <li>Blue</li> </ul> </body> </html>
Circle Example:
<!DOCTYPE html> <html> <head> <title>HTML Circle List</title> </head> <body> <label>HTML Unordered Circle List:</label> <ul type = "circle"> <li>White</li> <li>Black</li> <li>Red</li> <li>Green</li> <li>Yellow</li> <li>Blue</li> </ul> </body> </html>
HTML Ordered Lists
An ordered list start with the <ol> tag and end with the </ol> tag and each list item starts with the <li> tag. HTML Ordered lists are used for lists of items for which the order of the items does matter. An ordered list contains information exactly the same as for an unordered list where order should be emphasized.
Ordered list is change the text of the list items that need to appear in a specific sequential order.
Example:
<!DOCTYPE html> <html> <head> <title>HTML Ordered List</title> </head> <body> <label>vehicle category </label> <ol> <li>Bicycle</li> <li>Bike</li> <li>Car</li> <li>Bus</li> </ol> </body> </html>
In HTML you can use different type list attribute for <ul> tag. The attribute are –
Numerals Case
Upper Case Numerals
Lower Case Numerals
Upper Case Letters
Lower Case Letters
Numerals Case Example
<!DOCTYPE html> <html> <head> <title>HTML Numerals Case</title> </head> <body> <label>vehicle category </label> <ol type = "1"> <li>Bicycle</li> <li>Bike</li> <li>Car</li> <li>Bus</li> </ol> </body> </html>
Upper Case Numerals Example
<!DOCTYPE html> <html> <head> <title>HTML Upper Case Numerals</title> </head> <body> <label>vehicle category </label> <ol type = "I"> <li>Bicycle</li> <li>Bike</li> <li>Car</li> <li>Bus</li> </ol> </body> </html>
Lower Case Numerals Example
<!DOCTYPE html> <html> <head> <title>HTML Lower Case Numerals</title> </head> <body> <label>vehicle category </label> <ol type = "i"> <li>Bicycle</li> <li>Bike</li> <li>Car</li> <li>Bus</li> </ol> </body> </html>
Upper Case Letters Example
<!DOCTYPE html> <html> <head> <title>HTML Upper Case Letters</title> </head> <body> <label>vehicle category </label> <ol type = "A" > <li>Bicycle</li> <li>Bike</li> <li>Car</li> <li>Bus</li> </ol> </body> </html>
Lower Case Letters Example
<!DOCTYPE html> <html> <head> <title>HTML Lower Case Letters</title> </head> <body> <label>vehicle category </label> <ol type = "a"> <li>Bicycle</li> <li>Bike</li> <li>Car</li> <li>Bus</li> </ol> </body> </html>
HTML Definition Lists
The HTML definition list start with the <dl> tag and end with the </dl> tag and each list item synchronism with the <dt> and <dd> that is define item and describe item in the list.
Example:
<!DOCTYPE html> <html> <head> <title>HTML Definition List</title> </head> <body> <dl> <dt><b>Define Item</b></dt> <dd>The <dt> tag defines the term (name)</dd> <dt><b>Describe Item</b></dt> <dd>The <dd> tag describes each term: </dd> </dl> </body> </html>