HTML Lists

HTML Lists

In this tutorial, you will learn lists in HTML.

An Unordered List

  • Item
  • Item
  • Item

An Ordered List

  1. First item
  2. Second item
  3. Third item
  4. Fourth item

HTML lists are used to present a list of information in a well-formed and semantic way. There are three different types of list in HTML and each one has a specific purpose and meaning.
The 3 types of list are:

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

İn HTML unordered and ordered lists are the main lists you will be using almost all the time. That’s why developers who create video tutorials don’t usually mention the description list. The video tutorials don’t cover everything. But they are way more practical than written tutorials.

Note: You can see the difference between them in your browser when you run your HTML and look at the results.

İn the following sections you will learn them one by one:

Unordered HTML List

The list is specified using the <ul> tag and each list item is nested inside using the <li> tag.
Like this:

<h2> Some Healthy and Natural drinks </h2>
   <li>Apple Juice</li>
   <li>Orange Juice </li>
   <li> Natural lemonade </li>

The <ul> element represents an unordered list. This is because the items are listed in no particular order. This results in identical bullet points being prefixed to each item in the list.
By default, the unordered list items will be marked with bullets (small black circles).

Note: By default, the unordered list items will be marked with bullets (small black circles).
But you can change it using CSS.

Inside a list item, you can put text, images, links, line breaks, etc. You can also place an entire list inside a list item to create the nested list.
You will learn more about them in upcoming tutorials.

Ordered HTML List

The unordered list is specified using the <ol> tag and each list item is nested inside using the <li> tag. 
Like this:

<h2>Learn  Basic Math in order </h2>
   <li>Place Value</li>
   <li>Multiplication </li>
   <li> Division</li>

The <ol> element represents an ordered list
If we wanted to list the items in a particular order, we would use an ordered list. To do this we would simply swap the <ul> tag for a <ol> tag

The list item tags (i.e. the <li>) would remain the same (although we would need to ensure that they are listed in the correct order).

An HTML list also helps the browser understand that it is a list too. That way it can present the list in a particular way (eg, with bullet points or numbers, etc). However, you can change this using Cascading Style Sheets (CSS). In fact, you can change the styles of any HTML element using CSS. We will discuss CSS later in the tutorial.

HTML Description Lists

A description list is a list of items with a description or definition of each item.
The description list is created using <dl> element (tags). The <dt>  tag defines the term (name), and the <dd> tag describes each term.
Like this:

    <h2>HTML Definition List</h2>
        <dd>A baked food made of flour.</dd>
        <dd>A drink made from roasted coffee beans.</dd>

1) Use  <dl>  tag to create or define the description list.
2) Use  <dt>  tag to give a name to your term (aka list item ).
3) Use  <dd>  tag to describe your term tag (or describe the list item ) 

Comments are closed.