HTML Lists

A list is a group of related items. A list plays a significant role in a website. It is much easier for visitors to skim your text and get its idea if texts are in list format than simply putting all the text in a paragraph.

In this lesson you’ll learn how to create a list, different types of lists etc.

 

Types of lists

There are three types of lists in HTML-

  • Ordered lists,
  • Unordered lists, and
  • Definition lists

Now, let’s discuss detail about each type of list-

 

Ordered lists

In an ordered list, a sequence of numbers or letters is used to mark the list items. This type of list is suitable where list items must come in order. For example, an electronic device designing instructional steps, or steps of a recipe etc.

To create an ordered list you need two elements-

  • The ol element: The ol element defines the ordered list. Here, ol stands for ordered list.
  • The li element: Content of each ordered list item is enclosed by the opening <li> tag and closing </li> tag. Here, li stands for list item. Browsers indent (blank spaces at the beginning of the line) each list item by default.

See an ordered list example below-

Follow our courses in the order below-

<ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>jQuery</li>
</ol>

Output: Follow our courses in the order below-

  • HTML
  • CSS
  • JavaScript
  • jQuery

Attributes of ol element

HTML provides few attributes for ordered list (ol) element-

  • The type attribute
  • The start attribute
  • The reverse attribute

Let’s discuss each attribute below-

The type attribute

In the above example, you saw that the sequence of the list item started with decimal numbers (1,2,3…). Well, you can change this marker with the type attribute. The following tables shows the available markers-

Marker Meaning Output
1 Decimal numbers. It is default. 1. 2. 3.
a Lowercase letters. a. b. c.
A Uppercase letters. A. B. C.
i Lowercase roman numbers i. ii. iii.
I Uppercase roman numbers I. II. III.

Example 1: (Lowercase letters): Follow our courses in the order below-

<ol type=”a”>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>jQuery</li>
</ol>

Output: Follow our courses in the order below-

  1. HTML
  2. CSS
  3. JavaScript
  4. jQuery

Example 2: (Uppercase letters): Follow our courses in the order below-

<ol type=”A”>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>jQuery</li>
</ol>

Output: Follow our courses in the order below-

  1. HTML
  2. CSS
  3. JavaScript
  4. jQuery

Example 3: (Lowercase roman letters): Follow our courses in the order below-

<ol type=”i”>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>jQuery</li>
</ol>

Output: Follow our courses in the order below-

  1. HTML
  2. CSS
  3. JavaScript
  4. jQuery

Example 4: (Uppercase roman letters): Follow our courses in the order below-

<ol type=”I”>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>jQuery</li>
</ol>

Output: Follow our courses in the order below-

  1. HTML
  2. CSS
  3. JavaScript
  4. jQuery

The start attribute

You may not want an ordered list starts from the beginning of the marker. In this case, you have to use start attribute in the ol element. To specify a different starting number of an ordered list, mention the numeric representation of that position in the value of the start attribute. The value of the start attribute must be a whole number. See the following example- Follow our courses in the order below-

<ol start=”3”>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>jQuery</li>
</ol>

Output: Follow our courses in the order below-

  1. HTML
  2. CSS
  3. JavaScript
  4. jQuery

You can also use start attribute with different marker. See the following example- Follow our courses in the order below-

<ol type=”a” start=”3”>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>jQuery</li>
</ol>

Output: Follow our courses in the order below-

  1. HTML
  2. CSS
  3. JavaScript
  4. jQuery

In the above example, the list starts from the third position (c) of the lower case letter marker.

Changing individual list-item-position

You may also want a list item starts with a different position in its sequence. In this case, use value attribute in that li element. Mention the numeric representation of that position number in the value of the value attribute. See the following example-

<ol>
    <li>HTML</li>
    <li value=”1”>CSS</li>
    <li>JavaScript</li>
    <li>jQuery</li>
</ol>

Output:

  1. HTML
  2. CSS
  3. JavaScript
  4. jQuery

In the above example, we reassign the CSS to 1; so, the next items follow the sequences.

The reverse attribute

If you want to number the list items in descending order, then mention the reverse attribute in the ol element. It is boolean attribute, you either reverse or reverse=”reverse” will work. See the following example- Follow our courses in the order below-

<ol reversed>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>jQuery</li>
</ol>

Output: Follow our courses in the order below-

  1. HTML
  2. CSS
  3. JavaScript
  4. jQuery

Unordered lists

In an unordered list, the list items are marked as bullet points. This is the most commonly used list type on web. This type of list is suitable for the list where sequence of list items is not important. For example, an electronic device designing instructional steps, or steps of a recipe etc. To create an unordered list you need two elements-

  • The ul element: The ul element defines the unordered list. Here, ul stands for unordered list.
  • The li element: Each unordered list item is enclosed by the opening <li> tag and closing </li> tag. Here, li stands for list item. Browsers indent (blank spaces at the beginning of the line) each list item by default.

See an ordered list example below- Fruit list –

<ul>
    <li>Apple</li>
    <li>Strawberry</li>
    <li>Peach</li>
    <li>Mango </li>
</ul>

Output: Fruit list-

  • Apple
  • Strawberry
  • Peach
  • Mango

Description lists

A description list is a list of terms and their descriptions (or, metadata topics and values, questions and answers, or any other groups of name-value data.) groups. A perfect example is a glossary. To create a description list you need three elements-

  • The dl element: The dl element defines the description list. Here, dl stands for description list.
  • The dt element: Each term is contained within the opening <dt> and closing </dt> tags. Here, li stands for description term.
  • The dd element: the description of the term (s) is contained between <dd> and </dd> element. Here, dd stands for description list definition. Browsers indent (blank spaces at the beginning of the line) each dd by default. A term (dt) may have multiple descriptions, in that case, each description should have its separate dd element. Similarly, for a single dd element, there might have multiple terms (dt).

See an ordered list example below-

<dl>
    <dt>HTML</dt>
    <dd>HTML is short for Hypertext Markup Language. It is the language for the web, used to create basic web pages.</dd>
    <dt>CSS</dt>
    <dd>CSS is short for Cascading Style Sheet. It stylizes HTML and makes the web pages attractive.</dd>
</dl>

Output:

HTML
HTML is short for Hypertext Markup Language. It is the language for the web, used to create basic web pages.
CSS
CSS is short for Cascading Style Sheet. It stylizes HTML and makes the web pages attractive.

Nested Lists

When you add a list inside another, it is called nested list. When the parent list is an ordered or unordered list, then you must place the child list between the opening <li> and closing </li> tags. Browsers more indent child list then its parent. Browsers add a different bullet type if the second list is a unordered list See the following example- Follow our courses in the order below-

<ol>
    <li>HTML
        <ul>
            <li>HTML Tables</li>
            <li>HTML Links</li>
            <li>HTML Lints</li>
        </ul>
    </li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>jQuery</li>
</ol>

Output:

Follow our courses in the order below-

  1. HTML
    • HTML Tables
    • HTML Links
    • HTML Lists
  2. CSS
  3. JavaScript
  4. jQuery

 

Using unordered list to make a website navigation bar

Web designers use unordered list to create navigation (top menu, footer menu) of a website. See the example below-

<nav>
    <ul>
        <li><a href="index.html">Home</li>
        <li><a href="about.html">About</li>
        <li><a href="faq.html">FAQ</li>
        <li><a href="contact.html">Contact Us</li>
    </ul>
</nav>

List as navigation bar

Using CSS, the above list could be made as a horizontal navigation bar like the following- (To learn CSS, take the course CSS for Beginners)