HTML Lists
We’ll take a closer look at HTML lists in this article. Our discussion will cover the different types of lists, their syntax, and some best practices for using them.
With HTML lists, web developers can arrange related items into groups.
The term <list> is used to describe the collection of short items of related data, or it can be used to describe the display of data or information on a web page in an ordered or unordered fashion. Suppose you need to purchase items, and you need to prepare a list that can either be ordered or unordered. This will make it easier for you to organize the data and it will also make it easier to find what you are looking for
Example
HTML list that is not ordered:
- Item1
- Item2
- Item3
- Item4
A properly formatted HTML list:
- Item Number 1
- Item Number 2
- Item Number 3
- Item Number 4
Ordered HTML List
Ordered lists begin with the <ol> tag. A list item is identified by a <li> tag as it comes to HTML lists.
Numbers will be displayed by default on list items:
Example
Unordered HTML List
A list of unordered items begins with a <ul> tag. List items are divided by a <li> tag when it comes to HTML lists.
By default, list items will be kept with bullets (small black circles):
Example:
HTML Description Lists
A description list can also be added to HTML . There is a description for each term in a description list inHTML lists .
A description list is specified by the <dl> tag, the name of a term is determined by the <dt> tag, and the description is determined by the <dd> tag:
Example
HTML Nested List
Nested lists are lists within other lists. Whenever you want to have a bulleted list inside a numbered list, then this type of list will be referred to as a nested list as it comes to HTML lists.
Here is an example of the nested list:
Example:
HTML Odered List Styling
The HTML Odered list can also be styled by using the CSS properites on it. See example below
Example:
HTML Unodered List Styling
The HTML Unodered list can also be styled by using the CSS properites on it. See example below
Example:
HTML List Tags
<dd>Defines the term in a description list
| Tag | Overview |
|---|---|
| <dt> | Represents a term in a description list |
| <ol> | An ordered list is specified. |
| <ul> | A list of unordered items |
| <dl> | Creates a list of descriptions |
| <li> | List items are defined by this property |
Reminder: Visit our HTML Tag Reference to see a complete list of all HTML tags.
Benefits of Using HTML lists
Using HTML lists has some benefits, including:
- Improved Readability: Lists organize information into a clear and structured format, which makes it easier to read. In this way, users do not have to spend much time reading long paragraphs of text in order to find the information they need.
- Semantic Structure: Your content is semantically structured with HTML lists. You can indicate relationships between items in a list by using the appropriate list type, such as steps, options, or definitions.
- Accessibility: Users who use assistive technologies such as screen readers will benefit from HTML lists. It is easier for visually impaired users to navigate and understand content with the help of screen readers that can recognize and announce list items.
- Customization: You can customize lists using CSS to match your website’s design. Your website’s bullet style, numbering style, spacing, and indentation can all be changed.
- SEO Benefits: By providing search engines with meaningful content to index, properly structured lists can improve your website’s search engine ranking. By doing this, you can increase the visibility of your website in search results, helping it rank higher in search engines.
