In the last guide, we talked about optimizing and embedding images on your webpage. While that was a very lengthy and in-depth guide, we’re going to change gears and do something that is a little lighter and easier to understand: Lists.
Lists can be used to help organize content. In HTML, they can also be used to help build more complex things like CSS dropdown menus. We won’t get into anything heavy, though, so we’re just going to talk about a light and simple list. There are three kinds of lists in HTML. These lists are known as the “Ordered List” (ol), the “Unordered List” (ul), and Description Lists (dl). In the first two cases, we’ll also be needing to use “List Items” (li). These are the only three things you need to know when creating lists that aren’t Description Lists.
Ordered List
So, let’s create an Ordered list. first, we need to set up our test HTML document. This is what I created:
Now that we have a basic mockup of a stripped down HTML document, we can start code testing!
What we need to start with is the Ordered List tag – namely this:
<ol>
So, we insert it into our code between the body tags. Next, we need to insert items in our list. We shall use this little tag here:
<li>
After we insert those two in our code, we’ll insert a list item. Once that item is inserted, we need to close the list item tag. Every time we want to add another item, we open up another “li” tag and insert our item after the opening tag and closing it off after with the closing tag.
When we are done, we need to insert a closing “ol” tag to close out our list.
So, let’s say we want to create an ordered list that contains “Apples”, “Oranges”, and “Bananas”. Our code would look something like this:
The output would then be this:
Unordered List
Unordered lists are different from ordered lists in that they use bullets instead of numbers and that both use different tags. Both, however, still use list items in their code. Essentially, swap out the “ol” tags for “ul” tags and you have yourself an unordered list. So, let’s say I want a list that has the items “Sweet”, “Salt”, Sour”, and “Bitter” underneath our ordered list. Our code might look something like this:
Break tag inserted to separate the two lists out a little more. Our results are the following:
If we want to create a sublist, we can insert a list within the list. In this example, I’ve mixed ordered lists and unordered lists together:
As you can see, I’ve added a little bit extra to our second list. This is what the end results looked like:
Kind of nifty in that it builds on the spacing nicely like that, isn’t it?
Description Lists
Description lists are a little different from other lists. They not only are used to convey more information, but their tags are also different from the previous two lists. In this case, we need to use the Description List tag:
<dl>
Next, we need the Description Title:
<dt>
Finally, we need the Description Definition:
<dd>
With these tags, we can form our lists. So, let’s say we want to build a two item list underneath our previous two lists. The first item is “Hardware” and a brief description of what hardware is. The second item is “Software” and a brief description of that. So, our code might look a little something like this:
The output looks like this:
Could use a little sprucing up, but the basic components are certainly there.
That would be it for lists. Coming up next, our tutorial on HTML tables!