These free mini-courses will give you a strong foundation in web development. Track your progress and access advanced courses on HTML/CSS, Ruby and JavaScript for free inside our student portal.
Scroll down...
HTML lists are a fundamental building block of pretty much every web page. You've likely interacted with lists without even knowing that is what you were clicking or hovering. They're most commonly used for:
There are two types of lists. There are ordered lists and unordered lists. We'll cover both in this lesson as well as point you to a tutorial that will run through some details about how to use HTML lists.
There are two main parts to an HTML list:
<ul></ul>
or <ol></ol>
<li></li>
.The end result looks like this:
<ul>
<li>Fish</li>
<li>Cats</li>
<li>Dogs</li>
</ul>
The above is an example of an unordered list. It is nothing too complex, although lists can become a lot more complicated and help to create really rich and meaningful markup. Let's have a look at each type. After we get you started you'll read through a detailed walkthrough about creating HTML lists.
Ordered lists get their name from having an order. The order by default starts at 1 and will increase as you add items. Here is an example:
<ol>
<li>Bananas</li>
<li>Oranges</li>
<li>Apples</li>
<li>Pears</li>
</ol>
This will render to:
Then as we add items the numbers increase automatically:
Ordered lists make great candidates for listing items in a rank. Like medals for example:
Unordered lists lack the numeric sorting that ordered lists have. They usually default to a bullet circle next to each item. Here is an example:
<ul>
<li>Bananas</li>
<li>Oranges</li>
<li>Apples</li>
<li>Pears</li>
</ul>
This will render:
Because unordered lists have no sorting quality or rank they make great candidates for navigation links:
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/basics.html">Basics</a></li>
<li><a href="/lists.html">Lists</a></li>
<li><a href="/forms.html">Forms</a></li>
<li><a href="/tables.html">Tables</a></li>
</ul>
</nav>
You'll likely find yourself using unordered lists to create stacks and lines of links for sidebars and headers.
Nesting lists is a great way to show hierarchies of collections of items. Nesting lists can help you create outlines as well as nest links under categories or subpages in your navigation. Here is an example of how you'd nest some lists:
<ol>
<li>Bananas</li>
<li>Oranges</li>
<li>Apples</li>
<li>Pears</li>
<li> Nested List
<ul>
<li>Bananas</li>
<li>Oranges</li>
<li>Apples</li>
<li>Pears</li>
<li> Nested List
<ol>
<li>Bananas</li>
<li>Oranges</li>
<li>Apples</li>
<li>Pears</li>
</ol>
</li>
</ul>
</li>
</ol>
As you can see the nested lists go inside the <li></li>
tags regardless of whether they are ordered or unordered. Also, notice that the li
tag with the nested list still gets its own text.
Here is an example of a rendered nested list:
There's plenty more that you can do with HTML lists, but so far you've seen the basics. The basics with lists gets you far indeed.
Your task is to read through a walkthrough of working with ordered and unordered lists written by Shay Howe. Read through the sections that deal with the HTML side of lists. There are sections that deal with using CSS to style lists. While you are welcome to read these as extra credit, they are not necessary as we'll be diving into CSS and styling separately.
The important bits of code from this lesson
< !-- Unordered Lists -->
<ul>
<li>Fish</li>
<li>Cats</li>
<li>Dogs</li>
</ul>
< !-- Ordered Lists -->
<ol>
<li>Bananas</li>
<li>Oranges</li>
<li>Apples</li>
<li>Pears</li>
</ol>
< !-- Nesting Lists -->
<ol>
<li>Bananas</li>
<li>Oranges</li>
<li>Apples</li>
<li>Pears</li>
<li> Nested List
<ul>
<li>Bananas</li>
<li>Oranges</li>
<li>Apples</li>
<li>Pears</li>
<li> Nested List
<ol>
<li>Bananas</li>
<li>Oranges</li>
<li>Apples</li>
<li>Pears</li>
</ol>
</li>
</ul>
</li>
</ol>
You should now have a much firmer grasp on how to use HTML lists to create ranked collections of items and group together links for navigation. Lists are one of the core HTML tags that you'll be using everyday, so having a clear understanding of when and how to use them will aid you in creating more complex HTML components later.