A bulleted and numbered list of HTML

In HTML, there are two types of lists: numbered and unnumbered. Their creation is almost the same. Even the tags are different by one character. You can also create multi-level lists, which can include both numbered and marker lists.

These lists can be converted as you like. It all depends on your imagination. First, we'll look at the standard lists, the same as in the Word editor, and then we will improve them and make out beyond recognition.

Numbered HTML List

The usual numbered HTML list can be created using the following tags:

1. The first item on the list

2. The second item in the list

3. The third item on the list

   Simple lists look like this

   According to the standards, each item on the list must be inside the opening and closing li tag. But if you do not put the closing tag, the result will be exactly the same. The processor is very smart. During the conversion of the list, it analyzes the opening tags. If he sees a new

4. , he automatically puts before him.

   Thus, the lists can be done as shown below.

   But from the point of view of professionals this is incorrect.

   Bulleted lists

   Unordered (or marker) lists are created exactly the same way, only instead of the ol tag, ul is written.

   In the bulleted lists there are no numbers or letters - only different symbols, which are called markers.

   Multilevel numbered HTML list

   Many users are interested in this possibility. Therefore, it should be noted that any numbered list of HTML can be made multilevel. Additional levels can be the same or marked.

   To create the list specified in the example above, you need to write the following.

   Note that in this code, unlike the first examples, the type attribute is added. Thanks to it, you can specify the sorting type for both numbered and marker lists.

   For numbered we indicate the alphabet or type of digits, and for other cases - the marker type.

   List sorting options

   If you use a special HTML tag, the numbered list can be anything you want.

   You can specify a type attribute with any value from the table. Or in the css style class, specify list-style-type with the desired sort type.

   The translation of the values is quite simple. Enough of the basic knowledge of English. But even if you can not 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, you need to use the following options:

   • 1 - Arabic numerals;
   • A - capital Latin 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, this is equivalent to type = "1".

   In addition, numbered lists can be started from any desired position. By default - the output from 1. But if you want, you can start with at least a hundred. To do this, you must specify the start attribute with any value.

   In addition, it can be inferred in the reverse order. To do this, write reversed.

   Registration of lists

   The numbered list of HTML can be designed so beautifully that you can not immediately guess that this is an ordinary list, and not a picture made in Photoshop.

   Here are examples of beautiful lists.

   As you can see from the example, you can change the appearance of the numbering and the elements themselves.

   You can create an ordinary list like this.

   In css styles, you need to specify the layout for the ol tags. Note that in this case, the settings will be applied to all lists of the entire site where this stylesheet is used.

   First consider the option with a circular design of the list. Return to the list code. There is a class rounded-list. That's it with this class you need to tinker to make such a beauty. You can name the class as you like.

   Now consider the square design.

   Styles are very similar. The difference is that in the first case, the element is rounded up using the capabilities of css.

   Browser support

   It is important to understand that not all browsers support all css attributes.

   For example, you wanted to make a numbered list centered. The HTML code will be the same, but the result in older browsers may be completely different.

   The same goes for the registration of the numbering.

   As you can see, the squares around the numbers in older versions of the IE browser did not appear, since the handler does not know the new attributes that allow this kind of design.

   A professional web designer should foresee and understand that not all users use modern computers. Not everyone has Windows 7, 8, 10. There is a percentage of users who still sit on Windows XP and use the older versions of the Internet Explorer browser.

   As a rule, almost all modern design improvements of elements are not supported by them. The user will feel that the design of the site did not work at all. That everything has moved. The elements run into each other. To avoid this, you need to calculate all the options.

   Some webmasters turn a blind eye to them, as their share in the current market is getting smaller and smaller. But for a professional every visitor is important, especially if it is a commercial site.

   Do something suitable for everyone or consider all variants of browsers.