There are different ways to make a list of items in HTML. In this tutorial, you will learn about 2 ways that are used the most often. In addition, you will learn when and how to implement lists.

Table of Contents

1. Beginning HTML – HTML Doctypes, Head, Body
2. HTML Images and Hyperlinks – IMG, A
3. Basic HTML Structure, Tags, Classes, and IDs – HTML Cheatsheat, Divs, Spans, Paragraph
4. HTML List Tags – UL, LI, OL
5. Beginning Cascading Stylesheet (CSS) – Inline Styles, Internal Stylesheet, External Stylesheet
6. Positioning HTML elements with CSS – Floats, Margins, Padding, Relative, Absolute
7. Background Images in CSS
8. HTML/CSS Cheatsheet and Tricks – Overflow, Hovers, Text-Indent
9. Browser Compatibility – Internet Explorer (IE 6, 7, 8), Mozilla Firefox, Apple Safari, Google Chrome

Final Result

Basic List Tags – OL and UL

More or less, you’ll be running into a situation where you need to list a couple of items or have multiple similar elements together. Sure you can use DIVs and Paragraph tags to do the same, however semantically speaking, if you have a list of items (to-do list, list of images, list of terms, list of navigation items), then you want to use the HTML list tags. There are 2 major list tags (there are more, but for the purpose of common HTML use, the other tags don’t get used as much as these).

OL – Ordered Lists

Ordered lists are lists that are meant to be in order such as a list of things to do to clean the dishes. For example:

Here’s the tag needed for an ordered list:

<ol>
<li>Pour the soap</li>
<li>Wash the dishes</li>
<li>Dry them off</li>
</ol>

Simple enough. <ol> stands for ordered lists and you will see that you need to have list items for a list, and so that’s what <li> is for. For every item in the list, you should use an LI tag.

By default, the browser will automatically generate the numbers for you if you didn’t style them. I inserted the above code and put it in our index.html file that we should have.

UL – Unordered lists

Another type of list is an Unorderd list. An unordered list is similar to an ordered list except it will use bullets instead of numbers so that it becomes a list of things rather than a list of things that should be done in order or have any importance to them like a grocery list.

To create an unordered list, we will use the <ul> tag:

<ul>
<li>Milk</li>
<li>Eggs</li>
<li>Meat</li>
</ul>

When placed in the code, you’ll notice the bullets. With CSS, you will be able to replace those bullets with other styles like disc styles, squares, or even have a bullet image that you created yourself.

Why should we use lists?

Obviously lists are great to use when you’re making a list. You can style them in a way so that they pop out easily rather than trying to format with spaces. Another reason why lists are used is that it’s one of those things that makes sense to use when you do. You will see many websites that uses lists for their navigation, site maps, sidebar, image gallery, and so forth. The reason why is because of styling the list items.

The list items within the list will most likely carry the same styles such as color, font, background, etc.. Since they are part of a list, then they should be the same style which makes it easy for coding because you can just style the <li> and all the list items will follow that style. Remember all your lists can look different from each other by using [[ids and classes]] that we learned last tutorial.

Make sure to check out the additional resources below for more information on why you should use lists and how you should use them. (Pretty much the same reason here but more in depth)

Let’s practice making lists

Let’s open our index.html file. Basically we are going to make two unordered lists, and one ordered list. One <ul> will be used for the navigation, and the other will be a regular one so that later one I can show you that you can style lists differently. And finally, an <ol> will be used just for an example.

Our navigation:

<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
</ul>

Our other Unordered List:

<ul class="list">
<li>Milk</li>
<li>Eggs</li>
<li>Meat</li>
</ul>

Our Ordered List:

<ol>
<li>Pour the soap</li>
<li>Wash the dishes</li>
<li>Dry them off</li>
</ol>

Here’s how my index.html looks like in the end.

<div id="wrapper">

<div id="header">
<span class="titles">My site Name</span>
</div>

<div id="navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
</ul>
</div>

<div id="content">
<p>This should be a paragraph of text, but I'm too lazy to make
a block of them.  You can do it on your free time.</p>
<p>This is another paragraph of text that will contain more information.</p>

<ol>
<li>Pour the soap</li>
<li>Wash the dishes</li>
<li>Dry them off</li>
</ol>

</div>

<div id="sidebar">
<p class="sidebar-text">Tiny information about this blog can be put here.
This will act as a side bar soon.</p>

<ul class="list">
<li>Milk</li>
<li>Eggs</li>
<li>Meat</li>
</ul>

</div>

<div id="footer">
<div class="footer-info">
<span class="copyright">Copyright 2010 MySite.Com</span>
</div>
</div>

</div>

And there you have it. The picture above shows what it looks like in firefox after you check it out. The source files for this lesson is at the bottom so you can compare your code with it, if you get lost. Our next lesson is going to change your perspective of HTML a bit. You might be saying how all of this HTML can convert into those sites that you see today. Well, all I can say is CSS does wonders in creating sites. I’ll make sure to have that tutorial soon.

Conclusion

That’s it for this segment of Basic HTML and CSS. We covered how to make HTML lists using UL, OL, and LI. Check out the additional resources below to understand them better in detail. If you have any questions or comments, feel free to leave your say below. I’ll have the next tutorial coming up soon.

Download Source Files (.zip)

Additional Resources

W3 Schools – HTML Lists
Using HTML Lists Properly
Why use lists for site navigation?