{"id":78658,"date":"2020-07-02T09:00:24","date_gmt":"2020-07-02T03:30:24","guid":{"rendered":"https:\/\/data-flair.training\/blogs\/?p=78658"},"modified":"2024-07-26T13:16:36","modified_gmt":"2024-07-26T07:46:36","slug":"html-lists","status":"publish","type":"post","link":"https:\/\/data-flair.training\/blogs\/html-lists\/","title":{"rendered":"HTML Lists – CSS Styling Lists"},"content":{"rendered":"

Lists are used to group similar data together so that it becomes easy to retrieve the relevant data. HTML Lists contain list items that can be ordered or unordered, based on the developer\u2019s necessity. For example, books list, list of students in a class, etc.<\/p>\n

In HTML, there are three ways of creating a list-<\/p>\n

1. Unordered List –<\/strong> The items are sequenced using bullets(by default). It is specified using the <ul> tag, followed by <li>
\n2. Ordered List –<\/strong> The items are sequenced using numbers. It is specified using the <ol> tag, followed by <li>
\n3. Description List –<\/strong> These are the lists containing definition terms followed by their definition. These are specified using the <dl> tag followed by <dt> and <dd>.<\/p>\n

\"html<\/a><\/p>\n

Advantages of Lists in HTML5<\/h2>\n

1. Proper semantics of an HTML document are maintained using an HTML list. It removes the confusion since words are not jumbled in a single line and can be easily comprehended.
\n2. CSS styles can be easily applied to HTML lists, by accessing the <li> tags.
\n3.<\/strong> HTML lists provide flexibility as the order of the lists can be easily changed.<\/p>\n

Lists in HTML5 are highly versatile. They can be nested in order to create complex structures which helps in displaying hierarchical information effectively. This feature is particularly useful for creating menus and sub-menus on websites which further ensures a clean and organized presentation of content.<\/p>\n

Lists also improve accessibility by providing a clear structure that screen readers can easily interpret. This improves the user experience for individuals and ensures that the content is accessible to a wider audience.<\/p>\n

a. HTML Unordered List<\/h2>\n

It starts with the <ul> tag and each list item is specified using the <li> tag. By default, the list items start with bullets. For example,
\nCode-<\/strong><\/p>\n

<!DOCTYPE html>\r\n<html>\r\n<head>\r\n   <title>DataFlair<\/title>\r\n<\/head>\r\n<body>\r\n<h2>Web Development Technologies <\/h2>\r\n<ul>\r\n   <li>HTML5<\/li>\r\n   <li>CSS3<\/li>\r\n   <li>JavaScript<\/li>\r\n   <li>Bootstrap4<\/li>\r\n<\/ul>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Output-<\/strong><\/p>\n
\"html<\/a><\/p>\n
The list item marker can be changed using the CSS property list-style-type<\/p>\n
There are four values for list-style-type-<\/strong><\/p>\n
1. disc(default)<\/h3>\n
List item marker set to bullet.<\/p>\n
Code-<\/strong><\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n   <title>DataFlair<\/title>\r\n<\/head>\r\n<body>\r\n<h2>Web Development Technologies <\/h2>\r\n<ul style=\"list-style-type: disc;\">\r\n   <li>HTML5<\/li>\r\n   <li>CSS3<\/li>\r\n   <li>JavaScript<\/li>\r\n   <li>Bootstrap4<\/li>\r\n<\/ul>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Output-<\/strong><\/p>\n
\"html<\/a><\/p>\n
2. Circle<\/h3>\n
List item marker displayed as a circle.<\/p>\n
Code-<\/strong><\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n   <title>DataFlair<\/title>\r\n<\/head>\r\n<body>\r\n<h2>Web Development Technologies <\/h2>\r\n<ul style=\"list-style-type: circle;\">\r\n   <li>HTML5<\/li>\r\n   <li>CSS3<\/li>\r\n   <li>JavaScript<\/li>\r\n   <li>Bootstrap4<\/li>\r\n<\/ul>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Output-<\/strong><\/p>\n
\"html<\/a><\/p>\n
3. Square<\/h3>\n
List item marker displayed as a square.<\/p>\n
Code-<\/strong><\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n   <title>DataFlair<\/title>\r\n<\/head>\r\n<body>\r\n<h2>Web Development Technologies <\/h2>\r\n<ul style=\"list-style-type: square;\">\r\n   <li>HTML5<\/li>\r\n   <li>CSS3<\/li>\r\n   <li>JavaScript<\/li>\r\n   <li>Bootstrap4<\/li>\r\n<\/ul>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Output-<\/strong><\/p>\n
\"html<\/a><\/p>\n
4. None<\/h3>\n
List item marker not displayed.<\/p>\n
Code-<\/strong><\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n   <title>DataFlair<\/title>\r\n<\/head>\r\n<body>\r\n<h2>Web Development Technologies <\/h2>\r\n<ul style=\"list-style-type: none;\">\r\n   <li>HTML5<\/li>\r\n   <li>CSS3<\/li>\r\n   <li>JavaScript<\/li>\r\n   <li>Bootstrap4<\/li>\r\n<\/ul>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Output-<\/strong><\/p>\n
\"html<\/a><\/p>\n
HTML Nested Lists<\/h3>\n
One list can be contained within another. For example,<\/p>\n
Code-<\/strong><\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n   <title>DataFlair<\/title>\r\n<\/head>\r\n<body>\r\n<h2>Web Development Technologies <\/h2>\r\n<ul style=\"list-style-type: circle;\">\r\n   <li>HTML5\r\n      <ul>\r\n         <li>Tables<\/li>\r\n         <li>Lists<\/li>\r\n      <\/ul>\r\n   <\/li>\r\n   <li>CSS3<\/li>\r\n   <li>JavaScript<\/li>\r\n   <li>Bootstrap4<\/li>\r\n<\/ul>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Output-<\/strong><\/p>\n
\"html<\/a><\/p>\n
Navigation Bars using Unordered List in HTML<\/h3>\n
Unordered lists can be styled using CSS and can be used to create navigation bars. The unordered list is displayed horizontally using the float property of CSS. For example,<\/p>\n
Code-<\/strong><\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\nul {\r\n  list-style-type: none;\r\n  margin: 0;\r\n  padding: 0;\r\n  overflow: hidden;\r\n  background-color: #333333;\r\n}\r\n\r\nli {\r\n  float: right;\r\n}\r\n\r\nli a {\r\n  display: block;\r\n  color: white;\r\n  text-align: center;\r\n  padding: 16px;\r\n  text-decoration: none;\r\n}\r\n\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<ul>\r\n  <li><a href=\"#home\">Home<\/a><\/li>\r\n  <li><a href=\"#contact\">Contact Us<\/a><\/li>\r\n  <li><a href=\"#about\">About Us<\/a><\/li>\r\n<\/ul>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Output-<\/strong><\/p>\n
\"html<\/a><\/p>\n
b. HTML Ordered List<\/h2>\n
An ordered list is defined using the <ol> tag followed by <li> tags. The list item marker can be numerical digits or alphabetical.<\/p>\n
Code-<\/strong><\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n   <title>DataFlair<\/title>\r\n<\/head>\r\n<body>\r\n<h2>Web Development Technologies <\/h2>\r\n<ol>\r\n   <li>HTML5<\/li>\r\n   <li>CSS3<\/li>\r\n   <li>JavaScript<\/li>\r\n   <li>Bootstrap4<\/li>\r\n<\/ol>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Output-<\/strong><\/p>\n
\"html<\/a><\/p>\n
The list-item marker is specified using the type attribute of the <ol> tag. The type attribute can have the following values-<\/p>\n