HTML Lists
HTML lists are group or collection of items. These items can be both organized and unorganized depending on the requirement. They help in organizing, structuring, and presenting information to make it more user-friendly, readable, and accessible. Sample lists are shown below. −
Using Lists in HTML
To display a list of information in HTML, we use various list tags like <ul>, <ol>, and <ll>. HTML offers web developers three ways for specifying lists of information, namely ordered, unordered, and definition lists. All lists must contain one or more list elements. In addition to the mentioned types of lists, there are some other important list-related elements and concepts that also contribute to effective document structuring.
Unordered lists
Unordered lists display lists of items that are not in a specific order. The unordered lists are marked with bullet points. To create an unordered list, the <ul> tag is used along with the <li> tag. Here, the <li> tag specifies the list items.
Example
The following example demonstrates an unordered listing. Here, we are creating a list of 5 items:
Open Compiler
<!DOCTYPE html><html><head><title>HTML List</title></head><body><h2>Example of HTML List</h2><ul><li>HTML</li><li>CSS</li><li>JavaScript</li><li>Java</li><li>JavaFX</li></ul></body></html>
Ordered Lists
Ordered lists are lists of items that are in a specific order. The ordered lists are marked with numbers by default; you can change the numbers into alphabets, roman numbers, etc. by using the type attribute or the CSS list-style-type property.
To create an ordered list, the <ol> tag is used along with the <li> tag, where <li> specifies the list items.
Example
The following example demonstrates an ordered list having the list of 5 items:
Open Compiler
<!DOCTYPE html><html><head><title>HTML List</title></head><body><h2>Example of HTML List</h2><ol><li>HTML</li><li>CSS</li><li>JavaScript</li><li>Java</li><li>JavaFX</li></ol></body></html>
Definition Lists
Definition lists are lists of items with their corresponding descriptions. The definition lists are created by using the <dl>, <dt>, and <dd> tags. Where the <dl> tag specifies the “definition list”, the <dt> tag specifies the “definition term”, and the <dd> tag specifies the “definition description”.
Example
The following example demonstrates the definition list in HTML; here we are creating a definition list with three items:
Open Compiler
<!DOCTYPE html><html><head><title>HTML List</title></head><body><h2>Example of HTML List</h2><dl><dt>HTML</dt><dd>HyperText markup languague</dd><dt>CSS</dt><dd>Cascading Style Sheet</dd><dt>JS</dt><dd>JavaScript</dd></dl></body></html>
Nested Lists
A list created within another list is known as a nested list. HTML also allows nesting of lists within one another to generate complex document structures.
Example
In the following example, we are nesting an unordered list within an ordered list:
Open Compiler
<!DOCTYPE html><html><head><title>HTML List</title></head><body><h2>Example of HTML Nested List</h2><ol><li>Item One</li><li>Item Two<ul><li>Subitem A</li><li>Subitem B</li></ul></li><li>Item Three</li></ol></body></html></pre>Grouping Lists Inside <div> Tag
To enhance styling and layout, lists are often wrapped inside the
<div>elements. This grouping aids in applying consistent styles and creating visually appealing list structures.Example
In this example, we are grouping unordered lists with a
divtag:Open Compiler
<!DOCTYPE html><html><head><title>HTML List</title></head><body><h2>Grouping of HTML List elements with div tag</h2><div><p>First List</p><ol><li>Item One</li><li>Item Two</li></ol></div><div><p>Second List</p><ol><li>Item Three</li><li>Item Four</li></ol></div></body></html>Styling Lists
Lists can be styled using CSS to enhance visual presentation. Custom styles can be applied to list items, creating unique and visually appealing designs. For this, we use the
<style>tag, which is a way of specifying internal CSS.Example
The following example demonstrates how to apply CSS to the HTML list using a
styletag:Open Compiler
<!DOCTYPE html><html><head><title>HTML List</title><style></style></head><body><h2>HTML List with CSS</h2><div><p>First List</p><ol><li>Item One</li><li>Item Two</li></ol></div><div><p>Second List</p><ol><li>Item Three</li><li>Item Four</li></ol></div></body></html>li { font-size: 16px; } div { color: red; }HTML Lists Marker Types
CSS allows customization of marker types for list items. To do so, we use the CSS
list-style-typeproperty, which can be set to change markers to circles, squares, or other symbols.Example
In this example, we are using the
list-style-typeproperty of CSS to set the markers of list items:Open Compiler
<!DOCTYPE html><html><head><title>HTML List</title><style></style></head><body><h2>HTML list-style-type Property</h2><div><p>First List</p><ol><li>Item One</li><li>Item Two</li></ol></div><div><p>Second List</p><ol><li>Item Three</li><li>Item Four</li></ol></div></body></html>li { font-size: 16px; list-style-type: square; }Lists