Since I first began learning the wonderful coding language of HTML, I have found a certain set of html elements to be particularly useful. Those elements make up what are known as HTML lists: unordered lists, ordered lists and definition lists.
Learning how to create lists in html is a skill that can serve you in many ways and is incredibly useful. Lists are essential not only to convey information to your readers, but to convey it in an easy to read, easily scannable format.
Overview of How to Create an HTML List
First you’ll need to create the outer container that will house the items within your list. This is done by first determining what type of list you’d like to build.
For a numbered list, start by using “ol” html tags (the “ol” stands for “ordered list”), like this:
<ol>
</ol>
Then add a few items that you would like to list out inside of the opening “ol” and closing “ol” tags. This is usually (but not always) done by using “li” &mdash the “list item” html tags — like this for example:
<ol>
<li>First item</li>
<li>Second item</li>
</ol>
Unordered List
An unordered list is for when you’d like to list out things and the order isn’t particularly important. Using the following html code sets up a list with bullets placed in from of each item:
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<li>Fourth item</li>
</ul>
And here is how that code would render in the browser output:
- First item
- Second item
- Third item
- Fourth item
Ordered List
An ordered list is for when you’d like to list out things and the order is particularly important. Using the following code sets up a list with numbers placed in front of each item:
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<li>Fourth item</li>
</ol>
And here is how that code should render in the browser output:
- First item
- Second item
- Third item
- Fourth item
Definition List
A definition list — sometimes referred to as a description list — is for when you’d like to list out things in the format of first the term, then the description of that term.
Using the following code sets up a list with the terms listed first, with their corresponding descriptions (definitions) displayed below them:
<dl>
<dt>First item</dt>
<dd>Definition of first item</dd>
<dt>Second item</dt>
<dd>Definition of second item</dd>
</dl>
We added the bold emphasis to the following terms, to make them stand out by surrounding them with “<strong>” tags. And here is how that code would render in the browser output:
- First item
- Definition of first item
- Second item
- Definition of second item
HTML List Without Bullets
If you’d like to build a list that does not contain visible bullets, it’s simply a matter of setting that up in your CSS, then calling that CSS code into your list via the HTML. Here is how you would set that up:
<ul class="removeBullets">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<li>Fourth item</li>
</ul>
This is the CSS code we added to the above html list, pulling in the CSS class “removeBullets” in order to hide or not display any bullets:
<style>.removeBullets {
list-style-type: none;
}</style>
Note: if you don’t specify that this CSS class should only apply to certain html lists within a single page, and you apply that class to ALL lists on that page, then consequently all bullets will be removed from ALL lists (not just one certain list).
And here is how that code should render in the browser output:
- First item
- Second item
- Third item
- Fourth item
You could also use “list-style: none;” instead of the full “list-style-type: none;” — as both should work fine.
Lists are a great way to organize your content into bite-sized and easily digestible chunks. They are also very easy to code using HTML and can be enhanced and styled in various ways by adding some CSS code.
I hope you enjoyed this article and that you will find your new skill in creating HTML lists helpful! Stay tuned for an upcoming article on creative ways to style HTML list bullets using CSS.
