Lesson with practice on HTML
To choose a different lesson from the course
Discussion
Theory lesson

4.1. Numbered list in HTML

What is a numbered list in HTML? Numbered list is a set of elements with a sequence number. Its advantage is that the process of numbering the elements is automated and so you don't get confused. Also can you start counting not from the first but with a hundred of the first element. You can change the type of list: Arabic numerals, uppercase Latin letters, lowercase Latin alphabet Roman numbers in uppercase Roman numbers lowercase. Around a numbered list are added margins: top, bottom, and left. To create a numbered list, use the tag <ol> Each item is allocated a numbered list of paired tag <li>, next, an example of how to create numbered list:

An example of creating a numbered list
<ol>
    <li>The first point</li>
    <li>The second point</li>
</ol>

Numbered lists you can nest into each other. Depth can be any. This method is often used to create menus on the website. Further example of a nested, numbered list:

Example of a nested, numbered list
<ol>
    <li>The first point
        <ol>
            <li>The first point in the first</li>
            <li>The second point in the first
                <ol>
                    <li>The first point in the first, in second</li>
                    <li>The second point in the first, in second</li>
                </ol>
            </li>
        </ol>
    </li>
    <li>The second point</li>
</ol>

To change the list type, you need to use attribute type. The value of the attribute must be the first character of the sequence, for example, for Arabic numbers type = "1", for the Roman capital type = "I" etc.

  • Arabic numbers – 1, 2, etc.
  • Uppercase Latin letters A, B, etc.
  • Lowercase Latin letters a, b, etc.
  • Uppercase Roman numbers I, II etc.
  • Lowercase Roman numbers i, ii etc.

Take our previous example and specify the types of list:

Код HTML
<ol type = "i">
    <li>The first point
        <ol type = "1">
            <li>The first point in the first</li>
            <li>The second point in the first
                <ol type = "A">
                    <li>The first point in the first, in second</li>
                    <li>The second point in the first, in second</li>
                </ol>
            </li>
        </ol>
    </li>
    <li>The second point</li>
</ol>

Next, consider the attribute of a numbered list - start. Attribute start needed to start the list with the desired values. Attribute start works with all types of lists.

Use the start attribute
<ol start = "1920">
    <li>The first point</li>
    <li>The second point</li>
</ol>

Design with CSS numbered list

This will be still a lot of lessons, so we briefly review the styling of the list. To begin, let's open our numbered list from the left edge 20 pixels. For this we use the property margin.

Код CSS
ol {
    margin: 0 0 0 20px;
}

Online frequently asked question: "How to change the color of markers (bulleted list) or the color of numbering (numbered list)?". It is very simple, for example, like this:

Add the span tag
<ol start = "1920">
    <li><span>The first point</span></li>
    <li><span>The second point</span></li>
</ol>
Replaceable color
li {
    color: red;
}
li span {
    color: #000000;
}

Numbered list and SEO

Numbered lists also play an important role in SEO promotion, as they make the information on the website more structured. This means, if you use the lists in the right places, the information will be more understandable for the reader and for search engines.

<
×
>
✖