What is a List in HTML? – Types, Tags, Advantages, & More
Over 95% of websites are coded in HTML. Lists in HTML display related information in an organized and concise manner, making the website visually appealing and easily navigable for the users. Therefore, understanding how to create lists with HTML is essential for a successful web page design. In this blog, we will explore what is a list in HTML and the types of lists available.
What Is a List in HTML?
In HTML, a list is an element used to create organized and structured lists of items. It can be either unordered or ordered.
- Unordered (bulleted) lists use the <ul> tag along with individual <li> tags for each item in the list.
- Ordered (numbered) lists use the <ol> and <li> tags for each item in the list.
- In addition to these two fundamental types of lists, there are also description and menu lists using specific HTML markup, such as <dl>, <dt>, and <dd>.
- Text within any type of list must appear between opening (<ul>) and closing (</ul>) tags.
Lists are incredibly useful for organizing related pieces of information. In modern web design, lists play a huge role, as they can be used in navigation menus or within the content itself.
From a technical standpoint, having your data arranged into lists makes documents structured, more accessible, and generally easier to update when needed. You can learn more about HTML/CSS by taking an online web development course.
Types of Lists in HTML
The following are the types of lists in HTML.
1. Ordered List in HTML
These are also called numbered lists in HTML. It represents the HTML list items, which are sequentially ordered, either in increasing (1, 2, 3, etc.) or decreasing (3, 2, 1, etc.) order. An ordered list is represented by either numbers, letters (A, B, C, etc.), or roman numerals (I, II, III, etc.).
Syntax:
<ol>
<li> ... </li>
<li> ... </li>
<li> ... </li>
</ol>
Example:
<!DOCTYPE html>
<html>
<body>
<h2>An ordered HTML list (Stationary Items)</h2>
<ol>
<li>Pen</li>
<li>Pencil</li>
<li>Paper</li>
</ol>
</body>
</html>
Output:
2. Unordered List in HTML
An unordered list is a type of HTML element used to create a bulleted listing. Therefore, they are also called bulleted lists in HTML. The elements are typically indicated by bullet points (•) but can be customized with disc (◦), circle (o), and square shapes (■).
Unordered lists are used to indicate a list of items that don’t have any particular order or hierarchy.
Syntax:
<ul>
<li>...</li>
<li>...</li >
<li>...</li >
</ul>
Example:
<!DOCTYPE html>
<html>
<body>
<h2>An unordered HTML list (Home Appliances)</h2>
<ul>
<li>Washing Machine</li>
<li>Oven</li>
<li>Gyser</li>
</ul>
</body>
</html>
Output:
Enroll in our Full stack developer course with placement and Get a confirmed ₹35,000 total stipend
3. Description List
It is also called a definition list in HTML that contains terms and their associated descriptions. It is denoted by individual elements, such as:
- HTML <dl> element to define a description list.
- HTML <dt> element to define the description term.
- HTML <dd> element to describe the term in a description list.
Syntax:
<dl>
<dt>Term</dt>
<dd>Description of the term</dd>
<dt>Term</dt>
<dd>Description of the term</dd>
</dl>
Example:
<!DOCTYPE html>
<html>
<body>
<h2>A Description List</h2>
<dl>
<dt>Green Tea</dt>
<dd>- herbal leaves tea (hot drink)</dd>
<dt>Coca Cola</dt>
<dd>- aerated flavored drink (cold drink)</dd>
</dl>
</body>
</html>
Output:
4. HTML Nested List
HTML nested lists are a type of HTML list that contain items divided into other types of lists. An example would be an ordered or unordered list, where each item in the main list has several sub-items associated with it, listed beneath the original parent item.
Syntax:
<ul>
<li> List Element 1</li>
<li> List Element 2
<ul>
<li> List Sub-Element </li>
<li> List Sub-Element </li>
</ul>
</li>
<li> List Element 3 </li>
</ul>
Example:
<ul>
<li>Item 1</li>
<li>Item 2
<ul>
<li>Subitem 2.1</li>
<li>Subitem 2.2</li>
</ul>
</li>
<li>Item 3
<ol>
<li>Subitem 3.1</li>
<li>Subitem 3.2</li>
</ol>
</li>
</ul>
Output:
You can see how the nested lists form a hierarchical structure, clearly showing the connections between items in the main list and their associated subitems.
Available HTML List Tags
Here is the definition of some of the list tags available in HTML. Also, read basic and advanced HTML tags.
| HTML List Tags | Description |
| <ul> tag | It stands for “unordered list” and is used to create a bulleted list of related items; the order of the items does not need to be specified. |
| <ol> tag | It stands for “ordered list”, and is used when an ordered sequence needs to be defined or preserved in some way. |
| <li> tag | It stands for “list item”, which represents each item on either an unordered or ordered list (ul/ol). |
| <dl> tag | It stands for “definition list”. This tag defines terms with associated definitions that are listed together. |
| <dt> tag | It defines a definition term used to create the items within a definition list tag (dl). |
| <dd> tag | It represents the description or explanation of an item in a definition list (dl). |
Advantages of HTML Lists
Here are some of the advantages of using a list within your webpage.
- Styling: Specific CSS styling rules can be applied to each of the individual <li> tags within an HTML list, allowing developers or designers to customize elements, such as fonts, colors, and sizes. This helps them gain desired characteristics that differentiate from other tag types present in a document’s structure.
- Semantics: HTML lists provide a semantic structure that can be recognized by screen readers, helping visually impaired users to understand the information presented in an organized list format instead of just reading out blocks of regular text or numbers.
- Flexibility: HTML lists provide an easy solution to reorganizing the structure of your content. When a list item element is moved around within its containing <ul> or <ol> and is rendered by the browser, it will automatically be resequenced and ordered properly according to its new positioning with other items present in that container block.
Conclusion
Now that you’ve understood what is a list in HTML, remember that it can be defined as an important element of web page design that helps structure content and improve accessibility. Lists can be categorized into unordered, ordered, or description lists, depending on the nature of the information they contain. They also support styling options to offer a hierarchical system through nested lists for advanced organization.
Did you find the blog useful? Share your thoughts with us in the comments below. Explore HTML projects to gain practical knowledge of how to use lists in HTML codes and build websites.
FAQs
There are two types of lists in HTML, unordered and ordered lists. An unordered list is a list of items in no particular order whereas items in the ordered lists are in a particular order or sequence.
The default list-style-type in CSS is “disc” for unordered lists and “decimal” for ordered lists.
The <ul> tag stands for “unordered list” in HTML, which is a type of list used to organize content on a web page. This type of list is marked by bullet points or other symbols.
