HTML Lists
An HTML List allows you to organize data on web pages into an ordered or unordered format to make the information easier to read and visually appealing. HTML Lists are very helpful for creating structured, accessible content in web development.
Types of HTML Lists
There are three main types of lists in HTML:
- Unordered Lists (<ul>): These lists are used for items that do not need to be in any specific order. The list items are typically marked with bullets.
- Ordered Lists (<ol>): These lists are used when the order of the items is important. Each item in an ordered list is typically marked with numbers or letters.
- Description Lists (<dl>): These lists are used to contain terms and their corresponding descriptions.
Basic Example of HTML Lists
<!DOCTYPE html>
<html>
<body>
<h2>Welcome To GeeksforGeeks Learning</h2>
<h5>List of available courses</h5>
<ul>
<li>Data Structures & Algorithm</li>
<li>Web Technology</li>
<li>Aptitude & Logical Reasoning</li>
<li>Programming Languages</li>
</ul>
<h5>Data Structures topics</h5>
<ol>
<li>Array</li>
<li>Linked List</li>
<li>Stacks</li>
<li>Queues</li>
<li>Trees</li>
<li>Graphs</li>
</ol>
</body>
</html>
Output:
HTML List Tags
| Tag | Description |
|---|---|
| <ul> | Defines an unordered list. |
| <ol> | Defines an ordered list. |
| <li> | Defines a list item. |
| <dl> | Defines a description list. |
| <dt> | Defines a term in a description list. |
| <dd> | Details the term in a description list. |
Table of Content
1. Using HTML Unordered List or Bulleted List
Unordered lists are ideal for scenarios where the sequence of the items is not important.
The unordered list items are marked with bullets, also known as bulleted lists. An unordered list starts with the <ul> tag, and each list item begins with the <li> tag.
Syntax:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
Attribute: This tag contains two attributes which are listed below:
- compact: It will render the list smaller.
- type: It specifies which kind of marker is used in the list.
Example:
This example describes the unordered list.
<!DOCTYPE html>
<html>
<body>
<h2>Grocery list</h2>
<ul>
<li>Bread</li>
<li>Eggs</li>
<li>Milk</li>
<li>Coffee</li>
</ul>
</body>
</html>
2. Using HTML Ordered List
Ordered lists are used when the items need to follow a specific sequence.
In an ordered list, all list items are marked with numbers by default. An ordered list starts with the <ol> tag, and each list item begins with the <li> tag.
<ol>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ol>
Attributes:
- compact: It defines the list should be compacted (compact attribute is not supported in HTML5. Use CSS instead.).
- reversed: It defines that the order will be descending.
- start: It defines from which number or alphabet the order will start.
- type: It defines which type(1, A, a, I, and i) of the order you want in your list of numeric, alphabetic, or roman numbers.
Example:
This example describes the ordered list with the use of reverse, type, and start attribute.
<!DOCTYPE html>
<html>
<head>
<title>HTML ol tag</title>
</head>
<body>
<h1 style="color: green">GeeksforGeeks</h1>
<h3>HTML ol tag</h3>
<p>reversed attribute</p>
<ol reversed>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>
<p>start attribute</p>
<ol start="5">
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>
<p>type attribute</p>
<ol type="i">
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>
</body>
</html>
Output:
3. Using HTML Description List
A description list is a list of terms, with a description of each term. Description lists are less common but very useful for definitions, glossaries, or any other key-value pairs of items.
The <dl> tag defines the description list, the <dt> tag defines the term name, and the <dd> tag describes each term.
Syntax:
<dl>
<dt>Item 1</dt>
<dd>Description of Item 1 </dd>
<dt>Item 2</dt>
<dd>Description of Item 2</dd>
</dl>
Here, <dt> (description term) is used for the term being defined, and <dd> (description details) is used for the description.
Example:
This example describes the HTML Description List.
<!DOCTYPE html>
<html>
<body>
<h2>A Description List</h2>
<dl>
<dt>Coffee</dt>
<dd>- 500 gms</dd>
<dt>Milk</dt>
<dd>- 1 ltr Tetra Pack</dd>
</dl>
</body>
</html>
Best Practices for Using HTML Lists
- Semantic Correctness: Always use the appropriate type of list for your content to ensure semantic correctness and improve accessibility.
- Nesting Lists: HTML lists can be nested inside one another. For example, you can place an unordered list inside an ordered list item to create a hierarchy.
- Styling Lists: Use CSS to style lists to match the design of your website. You can change bullet styles in unordered lists, the numbering style in ordered lists, and more.
- Accessibility: Make sure your lists are accessible. Properly structured lists help screen readers interpret the content accurately, enhancing the accessibility of your website.
Common Question About CSS List
- How to implement various types of lists in HTML?
- What is nesting of list & how to create the nested list in HTML?
- How to set list in descending order in HTML5?
- How to create a list with roman number indexing in HTML?
- How to specify the kind of marker to be used in the list in HTML5?
- What is the way to keep list of elements straight in HTML file?
- How to create an unordered list with square bullets in HTML?
- How to set the start value of an ordered list in HTML5?
- What is Description List & what is the purpose of using it in HTML?
- How to create an image bullets in HTML?
- How to create space between list bullets and text in HTML?
- Why do we need to declare the <ul> & <ol> tags in HTML?
- How to Hide the Bullets on List for the Sidebar?
- How to add description list of an element using HTML?
- How to display a list in n columns format?
- How to add a list elements within an unordered list element using jQuery?
