Get up to 80 % extra points for free! More info:
This week up to 80% off on Python courses. More info:

Lesson 5 - Lists in HTML and a table example

In the previous lesson, Tables in HTML, we learned how to use tables. Today, we're going to add a table to our website and introduce lists. After today's lesson, you will finally have the required information to be able to use CSS and create custom website designs.

The skills subpage

Create another subpage on your website, this time, save it as skills.html. Add all of the necessary tags (doctype, html, head, body) and add a table to the body. The table will have 2 rows The first row, will have an icon of a programming language we know. Whereas, the second one will include a description of what we are able to do with it. I've downloaded the icons used in this lesson from Our subpage should now look something like this:

<!DOCTYPE html>
<html lang="en">

    <meta charset="utf-8" />


                <img src="images/html.png" alt="HTML" />
                <img src="images/java.png" alt="Java" />
                <img src="images/pascal.png" alt="Pascal" />
                <p>I started out with HTML. I can create simple websites, just like this one.</p>
                <p>I'm currenlty learning Java using's courses. I can create simple console and form applications using object-oriented programming.</p>
                <p>I was taught Pascal in school, but I prefer the modern languages taught at</p>

    <p><a href="index.html">Back to the home page</a></p>


Browser preview:

HTML table of skills

We'll also need to include a link to the subpage in index.html. Done! Now let's head on over to Lists.


We use lists whenever we need to list items that are related somehow. A List can be used for cited works, numbered tutorial steps, navigation menus, and many, many other things. I'm sure you are familiar with bullet points from MS Word and other similar programs. There are 3 types of lists in HTML.

Unordered list

The first type is <ul>, which stands for Unordered List. Items in it are unindexed and are displayed as bullet points as default. Although the list is seen as unordered, the order of items is kept when displayed in a browser. <ul> is a paired tag that wraps list items.

List items

The <li> tag, stands for List Item, takes a single item in the list, and wraps its text. Aside from text, it also takes images or any other type of element.

Let's take a look at an example of an unordered list:

<h2>What I have learned today</h2>
    <li>How to create tables</li>
    <li>How to merge cells</li>
    <li>What does semantics mean</li>
    <li>How to create an unordered list</li>

The output:

Unordered list ul – HTML tutorial

Lots of people use the <ul> element to set up navigation menus. We'll go over how to do all of that further along in the course.

Ordered list

Unlike unordered lists, items in ordered lists are ordered using a key. All the key is, is a priority or sequence of events. Its syntax is exactly the same as that of unordered lists. We use the <ol> tag to wrap <li> list items. For ordered lists, browsers display numbers by default:

<h2>My priority menu</h2>
    <li>Creamy sauce</li>
    <li>Cheese burger</li>

Here's what it would look like:

Ordered list ol – HTML tutorial

Contrary to unordered lists, the <ol> element has several attributes:

  • reversed - If the attribute is specified, list items are numbered backwards, in descending order. You may set the value to "reversed", but it wouldn't make a difference if you do (you could just leave it blank).
  • start - The value of this attribute sets the first number of the list (entered as a number).
  • type - Specifies the type of numbering to be used. Values can be set to 1, A, a, I, i for Arabic numerals, Latin letters, and Roman numerals.

There is only one attribute that can be added to the <li> element:

  • value - In an **ordered list, this attribute sets the item number. The items after the one that holds this attribute are automatically numbered based on the set value.

Let's try an even more complex example:

<ol reversed="reversed" start="4" type="I">

The result:

More complex ordered list ol – HTML tutorial

Definition list

The last list type is the definition list. Unlike the first two, it contains 2 types of items:

Definition Term

We add terms that are to be explained/defined into <dt> tags (stands for Definition Term).


We add explanations into <dd> tags (stands for Definition Definition).

Here's a little showcase of definition lists:

<h2>Article glossary</h2>
        <dd>A guide to doing things, shown step by step in most cases</dd>
        <dd>A social network and knowledge base for programmers</dd>
        <dd>A set of items that are related somehow</dd>

And the result:

Definition list dl – HTML 5 manual

Know what the next lesson, Solved tasks for HTML and CSS lessons 4-5, is going to be about? That's right! We're going to introduce you to CSS styling! Look forward to it because our website is going to look really fancy soon :)

In the following exercise, Solved tasks for HTML and CSS lessons 4-5, we're gonna practice our knowledge from previous lessons.


Did you have a problem with anything? Download the sample application below and compare it with your project, you will find the error easily.


By downloading the following file, you agree to the license terms

Downloaded 76x (68.87 kB)
Application includes source codes in language HTML


Previous article
Tables in HTML
All articles in this section
Make Your First Website, Step by Step!
Skip article
(not recommended)
Solved tasks for HTML and CSS lessons 4-5
Article has been written for you by David Capka
User rating:
6 votes
The author is a programmer, who likes web technologies and being the lead/chief article writer at He shares his knowledge with the community and is always looking to improve. He believes that anyone can do what they set their mind to.
Unicorn university David learned IT at the Unicorn University - a prestigious college providing education on IT and economics.