In this section, we will learn how we can create lists in an HTML document.
Lists in HTML
Using HTML elements, we can create lists of ordered or unordered types! To do this, we use the <ol> element (which stands for ordered list) and the <ul> element (which stands for unordered list)
Alright, let’s jump into the details and see how we can use these two elements and create ordered and unordered lists in HTML documents.
Types of Lists in HTML
As mentioned before, using HTML elements, we can create two types of lists in an HTML document:
- Ordered Lists
- Unordered Lists
Ordered List in HTML: <ol> Element
The HTML <ol> element stands for ordered list and it is used to create an ordered type of lists.
Note: those types of lists that are ordered in some fashion (like using numbers to represent each item in the list) these are called ordered list.
For example:
- Item one
- Item two
- Item three
HTML <ol> Element Syntax:
<ol> <li> item</li> <li> item</li </ol>
The <ol> element has opening and closing tags, and within the body of this element, we put the list items using the <li> element.
So each <li> element in the body of the <ol> element represents one item of the ordered list.
Example: ordered lists in HTML
See the Pen ordered lists in HTML by Omid Dehghan (@odchan1) on CodePen.
HTML <li> Tag:
As mentioned before, the <li> element stands for List Item and is used within the body of those HTML elements that we use to create lists like <ol> and <ul> elements.
The element has an opening and closing tags and so anything we put within its body represents one item on the target list.
HTML Unordered List: <ul> Element
The <ul> element stands for Unordered List and we use it to create an unordered list of items.
Note: unordered lists of items are those that use bullet points to represent each item on the list.
HTML <ul> Element Syntax:
<ul> <li> item</li> <li> item</li> </ul>
Note: each <li> element we put inside the <ul> element represents one item on the final list.
Example: bullet points in HTML
See the Pen bullet points in HTML by Omid Dehghan (@odchan1) on CodePen.
HTML List Styles
For the ordered list, by default, we can see each item is associated with one number. Also, in an unordered list, we can see that each item is presented with a bullet point.
But these are the default style of items in ordered and unordered lists and it is possible to use other styles for the items as well!
For example, we can use alphabet characters to represent the items on an ordered list or use square or stars for each item of an unordered list, etc.
All these are possible using the CSS list-style-type property. In the linked section, we’ve mentioned the type of values that you can use for this property, but in short, we can set the value `square` if we want each item of an unordered list to be associated with a square. Or we can assign the value `lower-alpha` if we want to assign an alpha character to each item of an ordered list.
Example: styling lists in HTML
See the Pen styling lists in HTML by Omid Dehghan (@odchan1) on CodePen.
