In HTML, there are three types of lists: unordered, ordered and description lists. Each of them is defined using different tags. Let\u2019s have a look.<\/p>\n\n\n\n
HTML Unordered Lists<\/h2>\n\n\n\n
We use unordered lists to group items having no numerical order. When changing the order of list items, the meaning will not change. To create an unordered list, we use the\u00a0<ul>\u00a0tag. This tag comes in pairs, the content is written between opening <ul> and closing <\/ul> tags.<\/p>\n\n\n\n
Each element of an unordered list is declared inside the\u00a0<li>\u00a0tag.<\/p>\n\n\n\n
Example of the HTML <ul> tag for creating an unordered list:<\/h3>\n\n\n\n
<!DOCTYPE html>\n<html>\n <head>\n <title>Title of the document<\/title>\n <\/head>\n <body>\n <h1>An unordered list:<\/h1>\n <ul>\n <li>This is a list item<\/li>\n <li>This is another list item<\/li>\n <li>This is one more list item<\/li>\n <\/ul>\n <\/body>\n<\/html><\/code><\/pre>\n\n\n\n
The items in unordered lists are marked with bullets (small black circles) by default. However, the default bullet style for the list items can be changed using a type attribute.<\/p>\n\n\n\n
The type attribute is used to change the default bullet style for the list items.<\/p>\n\n\n\n
Example of the HTML <ul> tag for creating an unordered list, where the items are marked with bullets:<\/h3>\n\n\n\n
HTML ordered list is used for listing items that are marked with numbers. It starts with the\u00a0<ol>\u00a0tag. This tag comes in pairs, the content is written between opening <ol> and closing <\/ol> tags.<\/p>\n\n\n\n
Each item in the ordered list starts with opening <li> tag and ends with <\/li> closing tag.<\/p>\n\n\n\n
Example of the HTML <ol> tag for creating an ordered list:<\/h3>\n\n\n\n
<!DOCTYPE html>\n<html>\n <head>\n <title>Title of the document<\/title>\n <\/head>\n <body>\n <h1>An ordered list:<\/h1>\n <ol>\n <li>This is List item number 1<\/li>\n <li>This is List item number 2<\/li>\n <li>This is List item number 3<\/li>\n <\/ol>\n <\/body>\n<\/html><\/code><\/pre>\n\n\n\n
The items in the ordered list are marked with numbers by default. If you want to create ordered list with alphabet or Roman numbers, you just need to add type=”a” or type=”I” to the <ol> tag.<\/p>\n\n\n\n
Example of the HTML <ol> tag for creating an ordered list with alphabet and Roman numbers:<\/h3>\n\n\n\n
HTML description list is used to arrange terms or names with a description the same way as they are arranged in a dictionary.<\/p>\n\n\n\n
To create a description list, we use the\u00a0<dl>\u00a0tag. This tag comes in pairs.<\/p>\n\n\n\n
In <dl>, we use\u00a0<dt>\u00a0tags for a term\/name in a description list and\u00a0<dd>\u00a0for a description of a term\/name in a description list.<\/p>\n\n\n\n
Example of the HTML <dl> tag for creating a description list:<\/h3>\n\n\n\n
<!DOCTYPE html>\n<html>\n <head>\n <title>Title of the document<\/title>\n <\/head>\n <body>\n <h1>Description Lists:<\/h1>\n <dl>\n <dt>Tea<\/dt>\n <dd>- hot drink<\/dd>\n <dt>Juice<\/dt>\n <dd>- cold drink<\/dd>\n <\/dl>\n <\/body>\n<\/html><\/code><\/pre>\n\n\n\n
Result<\/h3>\n\n\n\n<\/figure>\n\n\n\n
HTML Nested Lists:<\/h2>\n\n\n\n
A nested list contains a list inside a list.<\/p>\n\n\n\n
Example of an HTML nested list:<\/h3>\n\n\n\n
<!DOCTYPE html>\n<html>\n <head>\n <title>Title of the document<\/title>\n <\/head>\n <body>\n <h2>A nested HTML list<\/h2>\n <p>A nested list contains a list inside a list.<\/p>\n <ul>\n <li>Copybooks<\/li>\n <li>\n Books\n <ul>\n <li>Detective books<\/li>\n <li>Roman books<\/li>\n <li>Fairy tale books<\/li>\n <\/ul>\n <\/li>\n <\/ul>\n <\/body>\n<\/html><\/code><\/pre>\n\n\n\n
List Counting Control<\/h2>\n\n\n\n
By default, the enumeration in an ordered list starts from 1. Use the start attribute to start counting from a specified number.<\/p>\n\n\n\n
Example of an HTML list for counting from a specified number:<\/h3>\n\n\n\n
<!DOCTYPE html>\n<html>\n <head>\n <title>Title of the document<\/title>\n <\/head>\n <body>\n <h2>List counting control<\/h2>\n <p>By default, the numeration in an ordered list starts from 1. Use the start attribute to start counting from a specified number.<\/p>\n <ol start=\"40\">\n <li>Pen<\/li>\n <li>Pencil<\/li>\n <li>Copybook<\/li>\n <\/ol>\n <ol type=\"I\" start=\"40\">\n <li>Pen<\/li>\n <li>Pencil<\/li>\n <li>Copybook<\/li>\n <\/ol>\n <\/body>\n<\/html><\/code><\/pre>\n\n\n\n
Horizontal List with CSS<\/h2>\n\n\n\n
HTML lists can be styled in many different ways with CSS.<\/p>\n\n\n\n
You can style HTML lists using different CSS properties. For example, you can create a navigation menu styling the list horizontally.<\/p>\n\n\n\n
Example of a horizontal list with CSS:<\/h3>\n\n\n\n
<!DOCTYPE html>\n<html>\n <head>\n <title>Title of the document<\/title>\n <style>\n ul {\n list-style-type: none;\n margin: 0;\n padding: 0;\n overflow: hidden;\n background-color: #F44336;\n }\n li {\n float: left;\n }\n li a {\n display: block;\n color: white;\n text-align: center;\n padding: 16px;\n text-decoration: none;\n }\n li a:hover {\n background-color: #981816;\n }\n <\/style>\n <\/head>\n <body>\n <h2>Navigation Menu Example<\/h2>\n <p>\n You can style HTML lists using different CSS properties. For example, you can create a navigation menu styling the list horizontally.\n <\/p>\n <ul>\n <li>\n <a href=\"#home\">Home<\/a>\n <\/li>\n <li>\n <a href=\"https:\/\/www.google.com\/tool\/\">Tools<\/a>\n <\/li>\n <li>\n <a href=\"https:\/\/www.google.com\/snippets\">Snippets<\/a>\n <\/li>\n <li>\n <a href=\"https:\/\/www.google.com\/quiz\/\">Quizzes<\/a>\n <\/li>\n <li>\n <a href=\"https:\/\/www.google.com\/string-functions\/\">String Functions<\/a>\n <\/li>\n <\/ul>\n <\/body>\n<\/html><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
In HTML, there are three types of lists: unordered, ordered and description lists. Each of them is defined using different tags. Let\u2019s have a look. HTML Unordered Lists We use unordered lists to group items having no numerical order. When changing the order of list items, the meaning will not change. To create an unordered […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[285],"tags":[],"_links":{"self":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/7915"}],"collection":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/comments?post=7915"}],"version-history":[{"count":0,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/7915\/revisions"}],"wp:attachment":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/media?parent=7915"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/categories?post=7915"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/tags?post=7915"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"\"](\"https:\/\/mdr.foobrdigital.com\/wp-content\/uploads\/2022\/09\/image-45.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/mdr.foobrdigital.com\/wp-content\/uploads\/2022\/09\/image-46.png\")
<\/figure>\n\n\n\n