How to make a HTML List?
HTML Lists are used to specify information lists. Every list can have one or more list elements.
In HTML, there are three types of lists:
An unordered list is created using the
An unordered list is made of items marked with bullets by default.
Each list item is created using the
Here is an example list of shopping items:
<ul> <li>Tea</li> <li>Milk</li> <li>Eggs</li> </ul>
As you can see, the items are put between the
An ordered list uses numbers by default instead of bullets for the items.
It is created similar to the unordered list, and uses the
<ol> tag instead of
<ul> to wrap the items:
<ol> <li>Sam</li> <li>Amy</li> <li>Tom</li> </ol>
This will create a numbered list of names.
A description list is a list of terms, with a description of each term.
- Terms and definitions
- Metadata topics and values
- Questions and answers
- Any other group of name-value data
The HTML description list contains the following three tags:
<dl>tag defines the start of the list.
<dt>tag defines a term.
<dd>tag defines the term definition (description).
<dl> <dt>Google</dt> <dd> Google LLC is an American multinational technology company that focuses on search engine technology, online advertising, cloud computing, computer software, quantum computing, e-commerce, artificial intelligence, and consumer electronics. </dd> <!-- Other terms and descriptions --> </dl>
Learn more about the description list element.
Lists can be nested inside other lists.
You can make a nested unordered list, a nested ordered list, or an ordered list nested inside an unordered list.
<ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea</li> </ul> </li> <li>Milk <ul> <li>Dairy</li> <li>Almond</li> <li>Oat</li> <li>Soya</li> </ul> </li> </ul>
As you can see in this cafe drinks list, the unordered list is nested inside a list item of the another unordered list.
Remember, the list items have to open and close with
<li> </li> tags and need to be wrapped in
<ol> tags to make a valid list.
That’s all there is to it! You now understand how to build ordered, unordered and description lists in HTML.
If you liked this article, then please share. You can also find me on Twitter for more updates.