In this lesson, you’ll learn:
- How to create bullet-point lists
- How to create numbered lists
- How to style lists
- How to create a navigation menu using lists
Making lists in HTML is easy if you know how to use the <ol> and <ul> elements. These are two basic types of lists called ordered lists and unordered lists. Ordered lists are numbered lists, while unordered lists are bullet-point lists that don’t follow a certain order (hence the names).
Making Unordered Lists
This is the most common type of list used on the web. This is used for bullet-point lists, lists of links, navigation menus, and much more.
To make an unordered list, you will use the list element <ul> and the list-item element <li>.
By nesting <li> elements inside of a <ul> element, you can make a simple list.
<ul><li>This is my first point.</li><li>This is the second point.</li></ul>
Please note that only <li> elements can be placed directly inside of a <ul> element. Please do not place a <p> or <a> or any other element directly inside a <ul>, or you will break the internet. (Just kidding, but don’t do it.) However, you can place any content you’d like (<a>, <p>, <div>, etc.) inside an <li> element.
Making Ordered Lists
An ordered list is structured just like an unordered list, except you will use the <ol> element instead of the <ul> element. These are used for lists that have a specific order to them, such as a list of steps in a recipe.
<ol><li>This is the first step.</li><li>This is the second step.</li></ol>
You can use attributes to manipulate your ordered lists in many ways.
To start your list from a number other than one, use the start attribute.
<ol start="5"><li>This is step number 5.</li><li>This is step number 6.</li></ol>
To reverse the numbering on a list, use the reversed attribute. This one doesn’t need a value.
<ol reversed><li>My #3 favorite color.</li><li>My #2 favorite color.</li><li>My #1 favorite color.</li></ol>
To skip numbers, you can add the value attribute to any of the list-items to skip to that number. All of the list-items after that will go in order from the new number.
<ol><li>The first item.</li><li value="6">Skipped to the 6th item.</li><li>The seventh item.</li><li>The eighth item.</li></ol>
Making Description Lists
Another type of list found in HTML is called a description list. This element makes a list of terms and their definitions, much like a dictionary or glossary. This list follows a specific structure: the outer layer is a <dl> (description list), and inside is placed a <dt> (description title) and a <dd> (description data).
<dl><dt>adumbrate</dt><dd>describe roughly or give the main points or summary of</dd><dt>diaphanous</dt><dd>so thin as to transmit light</dd></dl>
As you see above, you can list <dt> and <dd> elements in order inside the <dl> tag. You cannot place anything but <dt> and <dd> directly inside <dl>, but you can place other elements inside of <dt> and <dd>.
Lists Inside Lists
You learned above that you can place other elements inside list items, or description list titles or data. This means that you can nest lists inside of other lists.
For example, to add a secondary bullet-point list inside of an existing unordered list, you can write the following code:
<ul><li>The first point</li><li>The second point</li><li>The third point<ul><li>An inner list point</li><li>An inner list point</li><li>An inner list point</li></ul></li></ul>
Notice how the entire <ul> fits inside of the <li> tag, after the text.
You can nest ordered lists, unordered lists and description lists inside of each other.
Styling Lists
You can change the bullet point or numbering style of ordered and unordered lists, using the list-style-type property in CSS.
The default list-style-type for an ordered list is decimal, but you can change it to other numbering styles like upper-roman (uppercase roman numerals) or lower-roman (lowercase roman numerals).
ol {list-style-type: lower-roman;}
The default list-style-type for an unordered list is disc, but you can change it to circle or square.
ul {list-style-type: square;}
For a full list of accepted values for list-style-type, visit the W3C Wiki.
If these default styles are not enough, you can use an image in place of the bullet point in an unordered list. This is specified with the list-style-image property.
ul {list-style-image: url(images/checkmark.png);}
Make sure the image path is an absolute path or a relative path from the CSS document.
Another way to style an unordered list is to remove the bullet points completely and list them horizontally across the page. You can do this by removing the list-style-type, removing margins and padding, and making the list-item elements inline-block.
HTML:
<ul><li><a href="facebook.com">Facebook</a></li><li><a href="twitter.com">Twitter</a></li><li><a href="instagram.com">Instagram</a></li><li><a href="youtube.com">YouTube</a></li></ul>
CSS:
ul {list-style-type: none;margin: 0;padding: 0;}li {display: inline-block;margin: 0 5px;padding: 0;}
This comes in handy for navigation menus at the top and bottom of web pages.
Finally, let’s look at an example of a fully-styled navigation menu. If you look at the HTML and CSS, you’ll see that it’s a combination of things you’ve already learned! Why not try making your own with your own colors, margins, or gradients?
HTML:
<ul class="nav"><li><a href="/">Home</a></li><!----><li><a href="/blog">Blog</a></li><!----><li><a href="/about">About</a></li><!----><li><a href="/contact">Contact</a></li></ul>
CSS:
.nav {border-left: 1px solid #ccc;list-style-type: none;margin: 0;padding: 0;}.nav li {display: inline-block;margin: 0;padding: 0;}.nav a {background-color: #efefef;border-top: 1px solid #ccc;border-right: 1px solid #ccc;border-bottom: 1px solid #ccc;display: block;color: #000;font-family: Helvetica;font-weight: bold;font-size: 14px;text-align: center;text-decoration: none;text-transform: uppercase;padding: 20px;width: 75px;}
Now you know how to make lists in HTML! Go to the next lesson to add images, video, and audio in HTML.
