Making a List

There are three types of lists in HTML:

  1. Ordered lists
  2. Unordered lists
  3. Definition lists

Ordered lists

Ordered lists are used in situations where the ordering of the list items is essential. In some cases like when the list is a sequence of directions or steps of instructions, the lists have a clear order of arrangement. They are also known as numbered lists since each list item is preceded by a number. The

    tag is used to begin an ordered list. Each list item is enclosed within a

  1. element. 
    <ol>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
</ol>

    By default the ordered lists have numbers preceding each item in the list. This can be changed using the type attribute. It takes value such as 1, A, a, I, and i for different type of ordered lists. While the initial number is 1, it can be changes to any number using the start attribute.

    <ol type="i" start="4">
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
</ol>

    Unordered lists

    Unordered lists are the most common lists used in web pages. They are suitable for lists where the order does not matter like to-do lists and shopping lists.

    <ul>
        <li>Reduce</li>
        <li>Reuse</li>
        <li>Recycle</li>
</ul>

    Similiar to how the type of ordered lists can be changed, we can also change the type of the marker for the unordered lists. This can be done using the list-style-type property of the style attribute which accepts values like disc(default), square, circle and none.

    <ul style="list-style-type:square">
        <li>Reduce</li>
        <li>Reuse</li>
        <li>Recycle</li>
</ul>

    Definition lists

    Definition lists are a special type of lists that are suited for pairs of terms and definitions similiar to that found in a dictionary. By default, the browser indents the definition from the margin. The terms are enclosed within the

    element and the definitions are enclosed within theelement. All the pairs of terms and definitions are enclosed within the

    element.
    <dl>
        <dt>Dictionary</dt>
        <dd>a book or electronic resource that lists the words of a language (typically in alphabetical order) and gives their meaning, or gives the equivalent words in a different language, often also providing information about pronunciation, origin, and usage.</dd>
        <dt>Thesaurus</dt>
        <dd>a book that lists words in groups of synonyms and related concepts.</dd>
</dl>

    Example web page

    <!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Lists in HTML</title>
</head>

<body>
    <ol>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
    </ol>
    <ul>
        <li>Reduce</li>
        <li>Reuse</li>
        <li>Recycle</li>
    </ul>
    <dl>
        <dt>Dictionary</dt>
        <dd>a book or electronic resource that lists the words of a language (typically in alphabetical order) and gives their meaning, or gives the equivalent words in a different language, often also providing information about pronunciation, origin, and usage.</dd>
        <dt>Thesaurus</dt>
        <dd>a book that lists words in groups of synonyms and related concepts.</dd>
    </dl>
</body>

</html>