We can create bulleted or numbered lists in html easily using the ul, ol and li tags.
Here’s an example of an unordered list:
<ul> <li>Cats</li> <li>Bats</li> <li>Hats</li> </ul>
Note that every time we open a tag, we close it again in the correct order. Tags are always completely enclosed in their parent tags.
We can nest lists inside other lists to get sublists, like so:
<ul> <li>Cats</li> <li> Bats <ul> <li>Fruit</li> <li>Pipistrel</li> <li>Vampire</li> </ul> </li> <li>Hats</li> </ul>
Lists are most commonly used in HTML for navigation. When you think about it, a site navigation is really just a list of hyperlinks.
With CSS we can style a list any way we like, as buttons, as a horizontal strip, as dropdowns, as a header, as a hierarchical sidebar. We’ll see more on this later.