Lists
<li> tag for each item inside.
You have seen plenty of websites up to now.
Have you ever noticed how some pages group things together like this?
Nadia
Nadia (born 1988) is an American software engineer, web developer, educator, and content creator.
See Also
- List of top web development educators
- List of YouTube channels for learning HTML
- List of free coding resources online
References
- Tech Education Journal. 2023.
- Digital Learning Today. 2024.
- Silicon Valley Times. 2021.
Nadia in 2025
See those two sections at the bottom of the card. One has bullet points, the other has numbers. Those are lists. And they are everywhere. Ingredients in a recipe. Steps in a tutorial. References on a page. Any time you have a group of related items a list is the right tool.
Let us learn how to build both.
Unordered List
For a bulleted list you use the <ul> tag. ul stands for unordered list.
Inside it you put each item wrapped in an <li> tag. li stands for list item.
Think of <ul> as the container and each <li> as one item sitting inside it.
See Also
- List of top web development educators
- List of YouTube channels for learning HTML
- List of free coding resources online
Each item gets a bullet point automatically. You did not add any styling. The browser just knows that is how a
<ul> looks.
Ordered List
Sometimes you want items to be numbered instead of bulleted. Maybe it is a set of steps or a ranking. That is where an ordered list comes in.
The only difference is you use <ol> instead of <ul>. The
<li> tags stay exactly the same inside.
References
- Tech Education Journal. 2023.
- Digital Learning Today. 2024.
- Silicon Valley Times. 2021.
Swap <ul> for <ol> and your list goes from bullets to numbers. That is
literally all there is to it.
Types of Unordered Lists
You can also change what the bullet looks like. By default it is a filled circle but you can change it with the
type attribute.
type="disc"— filled circle, this is the defaulttype="circle"— hollow circletype="square"— filled square
- Disc — filled circle
- Circle — hollow circle
- Square — filled square
In practice most people change bullet styles using CSS rather than the type attribute. But it is
good to know it exists.
Types of Ordered Lists
The type attribute works on ordered lists too. You can use letters or Roman numerals instead of numbers.
type="1"— numbers, this is the defaulttype="a"— lowercase letters, a, b, ctype="A"— uppercase letters, A, B, Ctype="i"— lowercase Roman numerals, i, ii, iiitype="I"— uppercase Roman numerals, I, II, III
- Numbers — 1, 2, 3
- Lowercase letters — a, b, c
- Uppercase letters — A, B, C
- Lowercase Roman numerals — i, ii, iii
- Uppercase Roman numerals — I, II, III
Most of the time you will only ever use numbers and letters. But it is good to know the others exist.
In practice most people change list styles using CSS rather than the type attribute. But it is good
to know it exists.
Have anything to say about this lesson?
Your feedback helps improve these tutorials. If something was confusing or missing, let us know.