Lists

Lists are used a lot in HTML, most commonly to make menus and navigation. They come in two types. Ordered lists have bullet points, and Unordered lists have numbers. For this exercise, we will mark up a list of cat types as a bulleted list.

Why cats? I like cats. Use dogs if you're some sort of cat hater, I don't mind.

Exercise - Mark up the cats

Use a list like the following:

Persian
Siamese
Ragdoll
Pixie-Bob
Devon Rex

Wrap the whole list in opening and closing unordered list tags <ul></ul>. Doing this tells the web browser that all the elements belong to the same list.
Wrap each individual item on the list in list item tags <li> </li>. Doing this separates each list item, one from the other. When you've done this, view in your browser.
For extra credit, create a numbered list using the same data. Do this by changing the unordered list tag into an ordered list tag <ol>

Your final document should look like this:

Persian
Siamese
Ragdoll
Pixie-Bob
Devon Rex

Nested Lists

Lists can go inside other lists. We use this a lot for hierarchical navigation, or just for presenting information clearly.

First enter and mark up the following list as an unordered list.

Dogs
Cats
Hamsters

Now add the following sublist of types of dogs. Do this by creating a new ordered list and inserting it into the dogs list item, just before the closing </li> tag.

Afghan Hound
Beagle
Norfolk Terrier

Now create similar lists for cats and hamsters.

Your final document should look something like this:

Dogs
- Afghan Hound
- Beagle
- Norfolk Terrier
Cats
- Persian
- Siamese
- Ragdoll
- Hamsters
- Asyrian
- Black Russian

Downloads

Download the exercise document here:

https://www.dropbox.com/sh/efzdwejrtgydybo/AABcXrypvcuwtrBabuHe8vuea?dl=1