Lists in HTML | Types, Example
Lists in HTML are a general purpose container to group a set of related items or things in a structured format. They are usually useful for presenting items in a clear, logical, and ordered manner, making it easier for users to read and understand the information.
Lists help to create an organized and easily navigable content on web pages. HTML supports several types of lists, each designed for specific use or purpose.
Types of Lists in HTML
There are mainly three types of lists in HTML. They are as follows:
- Unordered lists (bullets)
- Ordered lists (numbers)
- Description lists (think: dictionaries)
HTML Unordered Lists or Bulleted Lists
An unordered list is a list of items that may appear in any particular order or sequence. We use it for listing items without any particular order. In the HTML unordered list, all the items are by default displayed with bullet points (typically small black circles). Therefore, it is also called bulleted list.
How to Create an Unordered List
To create an unordered list in HTML, we use the <ul> element or tag. Each item in the list starts with an <li> (list item) tag. The basic syntax to create an unordered list is as:
<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul>
In the above syntax,
- <ul> is the opening tag that starts the unordered list.
- <li> (list item) tag is an opening tag that starts a list item. We can have one or more list item in the list.
- </li> tag is the closing tag that ends the list item. We use this tag in conjunction with the opening <li> tag to define an item within a list.
- </ul> is the closing tag that marks the end of the unordered list.
The presence of the closing </ul> tag is important for proper HTML format. It tells the browser that the list of items has ended. Omitting this tag can lead to unexpected behavior or appearance in the web page because the browser might not correctly interpret where the list ends.
[adinserter block=”5″]
This could affect the layout of the list itself and potentially other elements on the web page. Correctly using opening and closing tags for elements like <ul> ensures that the HTML document is well-structured.
Example 1:
<ul> <li>Web Development</li> <li>Graphic Design</li> <li>SEO Optimization</li> <li>Content Writing</li> <li>Digital Marketing</li> </ul>
In this example, the <ul> element or tag creates an unordered list to display a set of list items, (such as Web Development, Graphics Design, etc.). Each list item is encapsulated within an <li> element. When the browser reads and renders this HTML code, it will display the following output:
Ordered HTML List or Numbered List
An ordered list, often called a numbered list, is a list of items that appear in a specific order or sequence on the web page. We use it for listing items in a particular order. In ordered HTML lists, all the items in the list are automatically displayed with numbers by default. Therefore, it is also known as a numbered list.
[adinserter block=”2″]
The ordered list not only makes it clear to the reader but also organizes the content in a way that’s easy to follow. It helps to present a hierarchy of structured information where order matters. For example, we can use an ordered list for presenting things like top 10 favorite songs, steps to bake a cake, etc.
How to Create an Ordered List?
To create an ordered list in HTML, we use the <ol> element or tag. Each item in the list starts with an <li> (list item) tag. The ordered list begins with the default numbering from 1. The basic syntax to create an ordered list is as:
<ol> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ol>
In the above syntax,
- <ol> is the opening tag that starts the ordered list.
- <li> (list item) tag is an opening tag that starts the list item.
- </li> tag is the closing tag that ends the list item.
- </ol> is the closing tag that marks the end of the ordered list.
Example 2:
<ol> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>React JS</li> <li>Bootstrap</li> </ol>
When the browser reads and renders this HTML code, it will display the following output on the screen:
As you can observe in the output, the browser automatically adds the numbers with list items.
In HTML, we can use the start attribute within the <ol> (ordered list) element to specify a starting number other than the default value of 1. This attribute allows us to control the numbering of list items. It can be useful in various scenarios, such as continuing a list from a previous section or starting with a specific number. The basic syntax is as:
<ol start="number"> <li>List item 1</li> <li>List item 2</li> ... </ol>
Example 3:
<ol start = "5">
<li>Java</li>
<li>Python</li>
<li>Database</li>
<li>C++</li>
<li>C</li>
</ol>
In this example, we have used the start attribute with the value of “5”, which means that the ordered list will begin numbering from 5.
HTML Description List or Definition List
A description list is a list of items (terms), with a description of each item (term). It is also referred to as a definition list, where entries are listed like a dictionary.
Description lists are used to display a list of terms, with a description of each term. For example, we can use a description list for glossaries, dictionaries, FAQs, or any scenario where we need to pair terms with definitions.
How to Create a Description List in HTML?
To create a description list or definition list in HTML, we use a <dl> tag (definition list) that defines the start of the description list. Each term starts with a <dt> tag (definition term). Each description starts with a <dd> tag (definition description). The end tags are </dt> and </dd> that are optional.
The general syntax to create a description list in html is as:
<dl> <dt>Term 1</dt> <dd>Description for Term 1</dd> <dt>Term 2</dt> <dd>Description for Term 2</dd> </dl>
Example 4:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Description List Example</title>
</head>
<body>
<dl>
<dt>HTML</dt>
<dd>Hypertext Markup Language - The standard markup language used to create web pages.</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets - A style sheet language used for describing the look and formatting of a document written in HTML or XML.</dd>
<dt>JavaScript</dt>
<dd>A programming language that allows you to implement complex features on web pages.</dd>
</dl>
</body>
</html>
In this example, the <dl> tag starts and ends the description list. Within the <dl> tag, each <dt> element specifies a term, such as “HTML”, “CSS”, and “JavaScript”. Following each <dt> element, a <dd> element provides the description or definition of the term. When the browser reads and renders this HTML code, it will display the following output on the screen:
Example 5:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Description List Example</title>
</head>
<body>
<dl>
<dt>Mercury</dt>
<dd>- The closest planet to the sun.</dd>
<dt>Venus</dt>
<dd>- The second planet from the sun.</dd>
<dt>Earth</dt>
<dd>- The third planet from the sun.</dd>
</dl>
</body>
</html>
Key Points on HTML Lists
There are the following key points that you should keep in mind to create a list in HTML.
- A List is a powerful tool to group similar elements in HTML.
- HTML supports three types of lists: numbered lists, bulleted lists, and definition lists.
- The <ul> tag creates an unordered list.
- The <ol> tag creates an ordered list.
- The <li> tag creates a list item for an unordered or ordered list.
- By default, an unordered list displays as a bulleted list in no specific order.
- An ordered list displays a list with numbers in a specific order.
- A description list pairs terms with their descriptions in a single list. The <dl> tag creates a description list.
HTML lists allow developers to organize information in a clear and hierarchical manner. They enhance readability, accessibility, and the overall user experience of web pages. Understanding the different types of lists and how to use them effectively is important for creating well-organized content. Hope that you will have understood the basic points written in this tutorial.
Happy coding!!!
