Creating and styling lists
There are two main types of lists, ordered (numbered) and unordered (bulleted).
Here is an ordered list:
- tuna
- salmon
- crab
- yellowtail
We create this in HTML like so:
<ol>
<li>tuna</li>
<li>salmon</li>
<li>crab</li>
<li>yellowtail</li>
</ol>
Here is an unordered list:
- tuna
- salmon
- crab
- yellowtail
It is created like this:
<ul>
<li>tuna</li>
<li>salmon</li>
<li>crab</li>
<li>yellowtail</li>
</ul>
We define the list with either <ul></ul>
or <ol></ol>
tags depending on the type of list we want. Then, each list item is represented by <li></li>
.
Nesting lists
You can nest a list inside of another list to designate a sub-list.
- sushi
- california roll
- spicy salmon roll
- french fries
- crinkle-cut
- curly
<ul>
<li>sushi</li>
<ul>
<li>california roll</li>
<li>spicy salmon roll</li>
</ul>
<li>french fries</li>
<ul>
<li>crinkle-cut</li>
<li>curly</li>
</ul>
</ul>
It’s possible to nest them in many different ways. You can put an ordered list inside of an unordered list, and vice versa.
Styling lists
You can customize lists pretty extensively with CSS.
To display a list with no bullets, you must apply this property to the ul
element:
list-style: none;
You can also use CSS to set a custom emoji or symbol as the bullet.
- tuna
- salmon
- crab
- yellowtail
list-style: "\1F319 "; /* unicode */
list-style: "🌙 "; /* directly pasted */
Both of the above examples have the same effect, but the first uses the unicode codepoint. This works because we’re using an emoji, and every emoji is defined in the Unicode Standard, which assigns a unique code to represent it. Using the unicode value with CSS is preferred due to how browsers handle the display of emojis.
You can find a list of emojis and their respective unicode codepoints on emojipedia. Once you’re viewing an emoji, select the Technical Information tab and look for the Codepoints value.
✏️ Tip
The Unicode codepoints you’ll find online will look like
U+1F319
. To translate that to a web-safe CSS value, you can replace theU+
with a backslash/
soU+1F319
becomes\1F319
.
You can also use an image as bullet points if you’d like:
list-style: url("image.jpg");
✏️ Tip
Not sure how to link to an image? Check out Using absolute and relative links.
- tuna
- salmon
- crab
- yellowtail