Unordered Lists in HTML

Unordered Lists in HTML

  • HTML
  • 2 mins read

Use the ul element to create an unordered list in HTML, and the li element to create each item in the list.

In addition to containing text, list items can contain inline elements like links and images. They can also contain block elements like headings, paragraphs, and other lists. For example, the first item on this list is a paragraph that has text and a link. Then, the second list item contains only text, but it’s divided into two paragraphs. As you can see, the second paragraph is aligned with the first paragraph, but it doesn’t have a bullet because it’s part of the same list item.

Elements That Create Unordered Lists

ElementsDescription
ulCreates an unordered list.
liCreates a list item for the list.

HTML Unordered List Example

<h3>This is how HTML unordered list works.</h3>
<ul>
    <li>
        <p>First paragraph content.</p>
    </li>
    <li>
        <p>Second paragraph content.</p>
        <p>Third para.</p>
    </li>
</ul>

Output:

This is how HTML unordered list works.

  • First paragraph content.
  • Second paragraph content.Third para.

A li element typically contains text, but it can also contain other inline elements such as links and block elements such as paragraphs and other lists.

Another Simple Example of an Unordered List in HTML

<ul>
<li>Choice A</li>
<li>Choice B
  <ul>
    <li>Sub 1</li>
    <li>Sub 2</li>
  </ul>
</li>
</ul>

Output:

  • Choice A
  • Choice B
    • Sub 1
    • Sub 2

Below is another example to create a Navigation menu using an unordered list:

<div id="navigation">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Support</a></li>
    </ul>
</div><!-

Output: