This post was originally published at thedevspace.io. Everything you need to master web development, all in one place.
There are three different types of lists in HTML: ordered, unordered, and description lists.
Ordered lists are defined with the <ol> element, and each individual list item is created with <li>.
<ol>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
</ol>
Unordered lists are defined with the <ul> element.
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
</ul>
Description lists are a bit more complex, as they consist of a list of items and a description for each item. The description list is defined with the <dl> element, each list item is defined with <dt>, and each description statement is defined with <dd>.
<dl>
<dt>Apple</dt>
<dd>A delicious and nutritious fruit with a crisp texture.</dd>
<dt>Banana</dt>
<dd>A sweet and creamy fruit packed with essential nutrients.</dd>
<dt>Orange</dt>
<dd>A juicy and refreshing citrus fruit rich in vitamin C.</dd>
</dl>
Customizing list marker
By default, unordered lists are marked by dots, and ordered lists are marked with numbers.
You can customize the list marker using the list-style-type property.
ul {
list-style-type: circle;
}
ol {
list-style-type: georgian;
}
Some default style options are available for both ordered and unordered lists, as shown in the demo below.
There are many more variants for ordered lists, as it has to account for the numbering system in many different languages. We cannot cover all of them in this demo, but here is a full list of all built-in values for list-style-type property.
If these options are not enough, you can always extend the default options by passing a string value to the list-style-type property:
In this example, \1F600 is the textual representation of the emoji character 😀. You can find a full list of emojis and their corresponding code on unicode.org.
For more complex customizations, you will have to use @counter-style, which defines how list counters are converted into string representations. For example,
The @counter-style is called an "@rule". They are special directives that control how CSS behaves. Each @rule has a unique purpose, which we have discussed in the linked article.
Image marker
Besides these basic textual markers, you can also replace them with images using the list-style-image property.
ul {
list-style-image: url(marker.jpg);
}
url() is a CSS function used to load an external file, and in this case, we are loading the image marker.jpg, assuming you have the following file structure.
.
├── marker.jpg
├── index.html
└── style.css
Control list numbering
You can customize the ordered list by controlling its numbering. For example, you can use the start attribute to control the starting number of the list.
<ol start="4">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Etiam ut quam at lacus volutpat congue eu at risus.</li>
<li>Integer sed mauris lacinia augue aliquet ultricies.</li>
<li>Ut quis magna ante.</li>
</ol>
You can also use the reversed attribute to make the list count in the reversed order.
<ol start="4" reversed>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Etiam ut quam at lacus volutpat congue eu at risus.</li>
<li>Integer sed mauris lacinia augue aliquet ultricies.</li>
<li>Ut quis magna ante.</li>
</ol>
If you want to micro-manage the numbering of individual list items, use the value attribute.
<ol>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li value="5">Etiam ut quam at lacus volutpat congue eu at risus.</li>
<li>Integer sed mauris lacinia augue aliquet ultricies.</li>
<li>Ut quis magna ante.</li>
</ol>
List spacing
When designing webpages, it is good to leave some white spaces between elements so they don't look too crowded.
To add extra spacing between list elements, you can utilize the margin technique, which we are going to discuss in the box model lesson. For example, you can add a 10px bottom margin for each <li> element like this:
Customizing text
You can also customize the text in your list using the same style rules we discussed in the typography lessons.
Multi-column lists
Sometimes, the list you create takes up too much vertical space, so it might be a good idea to create a multi-column list instead. This can be done using the column-count property.
The column-count property is a very important CSS property when it comes to creating webpage layout. It can be applied to almost all HTML components, not just lists,and we will return to this topic in future lessons.
Further readings
If you found this guide helpful, follow us on social media for more tips, tutorials, and updates on web development:
🔹 TheDevSpace | LinkedIn
🔹 TheDevSpace | X
🔹 TheDevSpace | Threads
Let's stay connected! 🚀
Top comments (0)