There are two kinds of lists in HTML: numbered and unordered. Their creation is almost the same. Even tags differ by one character. You can also create multi-level lists, which can include both numbered and bullet lists .
These lists can be converted as you wish. It all depends on your imagination. First, we will look at standard lists, such as in the Word editor, and then we will improve and format them beyond recognition.
HTML numbered list
You can create a plain HTML numbered list using the following tags:
<ol>
<li> First list item </li>
<li> Second list item </li>
<li> Third List Item </li>
</ol>
Simple lists look like this
According to standards, each item in the list must be inside the opening and closing li tags. But if you do not put a closing tag, then the result will be exactly the same. The handler is very smart. During the conversion of the list, it analyzes the opening tags. If he sees a new <li>, then he automatically sets </li> in front of him.
Thus, lists can be done as shown below.
But from the point of view of professionals, this is incorrect.
Bulleted Lists
Unnumbered (or bullet) lists are created in exactly the same way, but instead of the ol tag, ul is written.
There are no numbers or letters in bulleted lists - only different characters called bullets.
HTML layered list
Many users are interested in this feature. Therefore, it should be noted that any HTML numbered list can be made multi-level. Additional levels may be the same or marked.
In order to create the list indicated in the example above, you need to write the following.
Please note that in this code, unlike the first examples, the type attribute is added. Thanks to it, you can specify the type of sorting for both numbered and bullet lists.
For numbered, we indicate the alphabet or type of numbers, and for other cases, indicate the type of marker.
List sorting options
If you use a special HTML tag, the numbered list can be anything you want.
You can specify the type attribute with any value from the table. Or, in the css style class, specify list-style-type with the desired sort type.
Translation of values is pretty simple. Enough basic knowledge of the English language. But even if you cannot translate the words “circle”, “square”, etc., you can visually understand what the result will be when you specify these values in the type attribute.
For numbered lists, use the following options:
- 1 - Arabic numerals;
- A - latin capital letters ;
- a - lowercase latin letters;
- I - capital Roman numerals;
- i - lowercase Roman numerals.
By default, a list with Arabic numerals is always used . That is, if you did not specify anything, it is equivalent to type = "1".
In addition, numbered lists can be started from any desired position. By default, the output is from 1. But if you want, you can start at least with a hundred. To do this, specify the start attribute with any value.
In addition, we can conclude in the reverse order. To do this, write reversed.
Making Lists
A numbered list of HTML can be designed so beautifully that you can’t immediately guess that this is a regular list, not a picture made in Photoshop.
Here are examples of beautiful listings.
As you can see from the example, you can change the appearance of numbering and the elements themselves.
You can create a regular list like this.
In css styles, you need to specify the appearance for ol tags. Please note that in this case the settings will be applied to all lists of the whole site where this stylesheet is used.
First, consider the option with a round list design. Return to the list code. The rounded-list class is listed there. It is with this class that you need to tinker with to make such a beauty. You can name the class as you want.
Now consider the square design.
The styles are very similar. The difference is that in the first case, the element is rounded by means of css capabilities.
Browser support
It is important to understand that not all browsers support all css attributes.
For example, you wanted to make a numbered list in the center. The HTML code will be the same, but the result in older browsers may be completely different.
The same goes for numbering.
As you can see, the squares around the numbers in the old versions of the IE browser did not appear, because the handler does not know the new attributes that allow such a design.
A professional typesetter must anticipate and understand that not all users use modern computers. Not everyone has Windows 7, 8, 10 installed. There is a percentage of users who are still sitting on Windows XP and using older versions of Internet Explorer.
As a rule, almost all modern design improvements to elements are not supported by them. It will seem to the user that the site design was not worked at all. That everything moved out. Elements bump into each other. To avoid this, you need to calculate all the options.
Some webmasters turn a blind eye to them, because their share in the modern market is becoming less and less. But for a professional, every visitor is important, especially if it is a commercial site.
Do something suitable for everyone or consider all browser options.