HTML: Learn How to Create Lists

HTML: Learn How to Create Lists

Written by
Vinish Kapoor is a seasoned software development professional and a fervent enthusiast of artificial intelligence (AI). His impressive career spans over 20 years, marked by a relentless pursuit of innovation and excellence in the field of information technology. As an Oracle ACE, Vinish has distinguished himself as a leading expert in Oracle technologies, a title awarded to individuals who have demonstrated their deep commitment, leadership, and expertise in the Oracle community.
  • HTML
  • 3 mins read

The two basic types of the lists in HTML are unordered lists and ordered lists. By default, an unordered list is displayed as a bullet list, and an ordered list is displayed as a numbered list. In this tutorial, you will learn how to create lists in HTML.

HTML Elements for Ordered and Unordered List

ElementDescription
<ul>Creates an unordered list.
<ol>Creates an ordered list.
<li>Creates a list item for an unordered or ordered list.

Create Unordered List

To create an unordered list in HTML, you use the ul element. Then, within this element, you code one li element for each item in the list. By default, when a list is displayed in a browser, each item in an unordered list is preceded by a bullet. However, you can change that bullet with CSS. The following is an example for the unordered list in HTML:

<p>We have books on a variety of languages.</p>
<ul>
	<li>Oracle</li>
	<li>Java</li>
	<li>HTML</li>
	<li>CSS</li>
</ul>

Output

We have books on a variety of languages.

  • Oracle
  • Java
  • HTML
  • CSS

Create Ordered List

To create an ordered list in HTML, you use the ol element, along with one li element for each item in the list. This works like the ul element, except that numbers rather than bullets precede the items. In this case, you can change the type of numbers that are used with CSS. The following is an example for the ordered list in HTML:

<p>Follow these steps to install Java:</p>
<ol>
	<li>Download the software.</li>
	<li>Extract to a folder.</li>
	<li>Double click the executable to run.</li>
</ol>

Output

Follow these steps to install Java:

  1. Download the software.
  2. Extract to a folder.
  3. Double click the executable to run.

Notes on Lists

  • When you work with the li element, you should be aware that it can contain text, inline elements, or block elements. For example, an li element can contain an <a> element that defines a link.

Complete Example

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

<body>
    <h1>HTML Lists</h1>

    <h2>Unordered List</h2>
    <p>We have books on a variety of languages.</p>
    <ul>
        <li>Oracle</li>
        <li>Java</li>
        <li>HTML</li>
        <li>CSS</li>
    </ul>

    <h2>Ordered List</h2>
    <p>Follow these steps to install Java:</p>
    <ol>
        <li>Download the software.</li>
        <li>Extract to a folder.</li>
        <li>Double click the executable to run.</li>
    </ol>

</body>

</html>

Output

As shown in the featured image of this article.

See also: