Now we’re going to add lists to our page. That may sound like something you don’t want to do, but you do. Here’s why.
- Lists stand out.
- Lists make things clear.
- Lists are easy to read.
- They get information across.
See what I did there? A list can be a numbered list, sure, but it can also mean bullet points. Later we can even add our own little images next to each point.
That list is what’s called an unordered list. An ordered list is numbered.
- This is an example.
- This shows an ordered list.
- The difference is that they are numbered.
- Your website will number them automatically for you.
Again, these are preset functions built into the HTML. You tell it to make a list, and it will move it over to the side some and it will add a bullet point, or it will add numbers. Later we’ll learn how to override those automatic things when we want to. But even when we want to change them up a little, they are useful tools.
There are two types of tags we need for a list. The list is organized in a tag that lets the browser know if it’s ordered or unordered. <ol> for ordered list and <ul> for unordered list
Then we nest the list items all tucked in between the opening and closing list tags. We write them each with the tag <li> for list, or list element, or thing I’m listing.
It looks like this.
<html>
<body>
<ol>
<li>first item</li>
<li>second item</li>
</ol>
</body>
</html>
For an unordered (unnumbered) list, it would be the same with <ul> instead of <ol>.
You can see a larger example and see what it looks like in the browser by watching the video.