Lesson 7: Unordered Lists

Overview

In this HTML lesson, we demonstrate how to make unordered lists. We begin by explaining that an unordered list is a composite element that is fundamentally made up of several elements. Then we show how the list specifies its item markers, rather than the individual items. Next, we give an example of how we can insert content between list items because they are block elements. Lastly, we demonstrate that we can put almost anything in a list.

A Composite Element

The unordered list is a composite element. Here, we give an example of a list with the four gospels in it. The list is made up of a ul, or unordered list, element with a series of li, or list item, elements nested inside it. The list items are displayed with dot markings next to them to indicate where the items are and how many of them there are.

Example1.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <ul>
      <li>Matthew</li>
      <li>Mark</li>
      <li>Luke</li>
      <li>John</li>
    </ul>
  </body>
</html>

Output

A Second List

This second list example contains the five books of the Pentateuch. It is similar to the first with one more item.

Example2.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <ul>
      <li>Genesis</li>
      <li>Exodus</li>
      <li>Leviticus</li>
      <li>Numbers</li>
      <li>Deuteronomy</li>
    </ul>
  </body>
</html>

Output

The Nature of Unordered Lists

In this example, we copied and append the list items from the previous example to the list element. For comparison, these elements are outside a list. Finally, we color the first, third, and fifth elements of each list to demonstrate that the list controls the markers when the list items are inside a list element.

Example3.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <ul>
      <li>Genesis</li>
      <li>Exodus</li>
      <li>Leviticus</li>
      <li>Numbers</li>
      <li>Deuteronomy</li>
    </ul>
    <li>Genesis</li>
    <li>Exodus</li>
    <li>Leviticus</li>
    <li>Numbers</li>
    <li>Deuteronomy</li>
  </body>
</html>

Output

Output with Indicated Blocks

Inserting Within a List

In this example, we demonstrate that we can put a title or header on a list and we can put content between list items.

Example4.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <ul><strong>Pentateuch</strong>
      <li>Genesis</li>
      -----------------
      <li>Exodus</li>
      -----------------
      <li>Leviticus</li>
      -----------------
      <li>Numbers</li>
      -----------------
      <li>Deuteronomy</li>
    </ul>
  </body>
</html>

Output

Flexibility

In our last example, we deomnstrate that we can put other types of content, like large text passages and images, into a list as items.

Example5.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <ul>
      <li>And God said, "Let there be light"; and there was light. And God saw that the light was
      good; and God separated the light from the darkness. God called the light Day, and the
      darkness he called Night. And there was evening and there was morning, one day.</li>
      <li><img src="https://xoax.net/lib/images/XoaXLogoNew.png" alt="XoaX.net Logo"></li>
    </ul>
  </body>
</html>