Lists

HTML lists present information in a recognizable, readable, and semantic way.

One common example of the use of lists is the links in a navigation bar at the top of a webpage. We present a list of links to other parts of our page, website, or other locations on the web and use CSS to align them horizontally.

There are three different kinds of lists in HTML, each one having a specific purpose and meaning:

  • Unordered list <ul> — Used to create a list of related items, in no particular order.
  • Ordered list <ol> — Used to create a list of related items, in a specific order.
  • Description list <dl> — Used to create a list of terms and their descriptions.

We will look at each type of list in this section, and explore some common use cases for each.

UNORDERED LISTS

The <ul> or unordered list element gives us an unordered list in which our list items are bulleted and listed in no particular order.

These bullet points can be removed in CSS using the list-style property.

Unordered lists are commonly used to create navigation menus on web pages. Including this one!

Adding a set of opening and closing <ul> tags by themselves does nothing visually.

It just defines we're going to make an unordered list structure. The <ul> tags act as a container of sorts for the items that will comprise the list.

The browser knows when it sees a <ul> element that everything inside of those tags, is part of an unordered list.

So when we add <ul> tags, we need to add list item elements inside.

<ul>

<li>List Item 1</li>

<li>List Item 2</li>

<li>List Item 3</li>

</ul>
  • List Item 1
  • List Item 2
  • List Item 3

ORDERED LISTS

The <ol> element gives us a list that is ranked numerically, alphabetically, or with roman numerals. Ordered lists can be reversed and we can also set an initial start value.

<ol>

<li>List Item 1</li>

<li>List Item 2</li>

<li>List Item 3</li>

</ol>
  1. List Item 1
  2. List Item 2
  3. List Item 3

LIST ITEMS

List items are added using an <li> </li> tags.

Inside list items, we can add text, images, and other HTML elements - like links or images.

So the <ul> or <ol> elements define that there is going to be a list structure, and the <li> tags inside are the items that will make up the list.

We can even add more lists inside lists, which we would call nested lists. We can then add lists inside of those nested lists!

DESCRIPTION LISTS

A description list comes with a description or definition for each item.

A description list is created using the <dl> element.

The <dt> is used in conjunction with this, which specifies a term, and the <dd> element specifies the term's definition.

Browsers render definition lists by placing the terms and definitions in separate lines, with the definitions slightly indented.

<dl>

<dt>HTML</dt>

<dd>The standard markup language for documents designed to be displayed in a web browser.</dd>

<dt>CSS</dt>

<dd>A language used for describing the presentation of a document written in a markup language like HTML.</dd>

<dt>JavaScript</dt>

<dd>A lightweight, interpreted, or just-in-time compiled programming language. Most well-known as the scripting language for Web pages.</dd>

</dl>
HTML
The standard markup language for documents designed to be displayed in a web browser.
CSS
A language used for describing the presentation of a document written in a markup language like HTML.
JavaScript
A lightweight, interpreted, or just-in-time compiled programming language. Most well-known as the scripting language for Web pages.

DEFINING THE START OF AN ORDERED LIST & REVERSING IT

We can define a type of ordered list and alter the number the list starts at by adding HTML attributes.

Attributes give us additional information about elements and are always added to the opening tag.

Inside the opening <ol>, we type start and then define the numerical value inside quotes:

<ol start="100">

<li>List Item 1</li>

<li>List Item 2</li>

<li>List Item 3</li>

</ol>
  1. List Item 1
  2. List Item 2
  3. List Item 3

We can also use the reversed keyword to make the list run the other way, counting from large to small.

We retain the start attribute to make the numbers start at a given number and run in reverse from there. If you were creating a top 10 countdown list you would use:

<ol reversed start="10">

<li>List Item</li>

<li>List Item</li>

<li>List Item</li>

<li>List Item</li>

<li>List Item</li>

<li>List Item</li>

<li>List Item</li>

<li>List Item</li>

<li>List Item</li>

<li>List Item</li>

</ol>
  1. List Item
  2. List Item
  3. List Item
  4. List Item
  5. List Item
  6. List Item
  7. List Item
  8. List Item
  9. List Item
  10. List Item

DEFINING A TYPE OF ORDERED LIST

We can also define a type of ordered list.

Though it is not stated explicitly with the type attribute in the numbered ordered lists we have seen, it is equivalent to adding type="1".

<ol type="1">

<li>List Item 1</li>

<li>List Item 2</li>

<li>List Item 3</li>

</ol>
  1. List Item 1
  2. List Item 2
  3. List Item 3

If we were to change the type value to an uppercase 'A': type="A", then the list is ordered with uppercase letters:

  1. List Item 1
  2. List Item 2
  3. List Item 3

If we wanted lowercase letters rather than uppercase, we would use a lowercase 'a' in the attribute value: type="a".

We could have a list with Roman numerals by using type="I" for uppercase Roman numerals and type="i" for a list ordered with lowercase roman numerals.

  1. List Item 1
  2. List Item 2
  3. List Item 3
  1. List Item 1
  2. List Item 2
  3. List Item 3

Whether it is numbers, letters, or numerals, what is important to note is that our list has a definite order.

NESTED LISTS

HTML also supports lists within lists, or nested lists as they are known.

<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>
<ol>
<li>Nested Item 1</li>
<li>Nested Item 2</li>
<li>Nested Item 3</li>
</ol>
</li>
</ul>
  • List Item 1
  • List Item 2
  • List Item 3
    1. Nested Item 1
    2. Nested Item 2
    3. Nested Item 3

You can even nest lists inside your nested list by following the same pattern. There is no limit to how deep lists can be nested. You can keep going until infinity.

SUMMARY

In this section, we have covered ordered, unordered, and description lists.

The <ul> element gives us an unordered list in which our list items are bulleted. The bullets can be removed with the CSS list-style-type property.

The <ol> element gives us a list that is ranked numerically, alphabetically, or with roman numerals.

Our ordered list can be reversed, and we can set an initial start value.

Inside both ordered and unordered lists, we add list items inside which we can add other HTML elements. Including nested lists.

We also saw description lists. A description list is a list of items with a description or definition of each item.

The description list is created using the <dl> element and allows us to specify a term and a definition.

Once we reach the CSS section, we will create some responsive navigation bars using lists and Flexbox.

Until then, we continue with HTML, and in the next section, we will look at links and images and the attributes each contains.

FURTHER RESOURCES

GITHUB REPO USED IN THE VIDEO

Next section →