What is the list? Types of lists

As a rule, some information is best presented as a list. Types of lists allow you to do this as convenient as possible. If the user sees a solid text, he will read inconveniently.

Thanks to the lists, it is easier for the user to read any items listed than in one line. That's why they are constantly used both on sites, and in Word documents and other text editors.

Types of HTML lists

Lists can be numbered and marked, which are also called unnumbered.

The numbered lists use Arabic, Roman numerals, letters and everything else, so you can make an enumeration.

Marked lists use different markers (dots, circles, squares, arrows and so on).

Here are some examples of sorting items in lists.

The figure above shows simple single-level lists. But in documents can be used and multilevel. Levels can be an infinite number.

The figure above shows what can be multi-level numbered and bulleted lists.

Creature

In html it is very easy to create a list. Types of lists in html-markup are very similar. They differ only in the initial and final tags. The list items themselves are indicated by the same tag. Here you will not get confused.

Let's consider an example of creating a numbered list:

1. Item 1

2. Number 2

3. Number 3

   This code is enough to have a normal list with Arabic numerals. This sort option is set by default. The rest of the options will be considered a little further.

   The bulleted list looks like this:

   • Item 1

   • Number 2

   • Number 3

     The difference is that for the enumerated enumeration, the ol tag is put, and for the unnumbered enumeration, an ul is put.

     Types of lists in Word

     In the Word editor, list types are created exactly the same. Moreover, in some html-code editors, there is the ability to export content from the "Word". These lists are perfectly transferred there and are made with the appropriate tags.

     If you find it difficult to create a multi-level list on html yourself from scratch, you can create it first in the Word editor. Then translate it into html-markup.

     Consider how to create lists in Microsoft Word. There is a special "List" panel. Types of lists are divided into groups.

     Once you click on a type, immediately offered sorting options. In the figure above, it is suggested to select a marker type for an unnumbered list. The same is true for other options.

     When the library of multi-level lists is opened, you can see the mixed sorting.

     List operations

     In the Word editor, you can convert any list. Kinds of lists are selected through the main panel or through the right click. You need to select the text that you want to represent in this form, and press the right mouse button.

     You can select both a numbered and a bulleted list.

     In addition, it is possible to set the initial position of the reference. For example, you need to deduce items from 10th to 12th. But by default the list will be from the 1st item. To do this, you need to set the initial value to "10".

     As you can see, the editor allows you to change indents as well.

     If you select only the third item and press the right mouse button, you will be able to start the enumeration again, from one.

     At any time from the simple list you can make a multi-level. To do this, you need to stand on the desired item and again make a right click of the mouse. Then go to the menu item "Numbering" and at the bottom click on "Change the level of the list."

     In fact, there is nothing complicated. All the menu items are thought-out. The context menu (when you press the right key) always changes and depends on what you clicked on (list, link, picture, and so on).

     Registration of lists in html

     You can decorate tags through style classes or individually each time. At the very beginning, a table with various enumeration options was shown. There were indicated variants of decimal, disc, circle and so on. This value should be specified in the property of the class or style list-style-type.

     For example, like this:

     .sort {

     List-style-type: disc;

     }

     It is enough to specify the sort class to any list, and it will be represented accordingly.

     In the Word editor, you can set initial values. This was mentioned above. The same is allowed in html.

     This is done by the start attribute. Example of output of items with an initial value of "5":

     1. Item 1

     2. Number 2

     3. Number 3

        As a result, you will see the numbers 5, 6 and 7, not 1, 2 and 3.

        In addition, you can specify where the marker will be located: inside or outside. An example is below.

        In addition to this list, you can apply all sorts of CSS tricks. That is, list items can be:

        • Decorate with any color;
        • Specify any indents;
        • Specify any font size;
        • Specify any font;
        • Adjust the distance between points;
        • Set background color;
        • Specify any markers;
        • Draw in shadows;
        • Generally remove markers;
        • Withdraw items horizontally;
        • Create multi-level lists that are completely different from the parent item, and much more.

        For example, the list can be presented in this form:

        When drawing up lists, the main thing is not to overdo it. They serve to facilitate the perception of information. You do not need to turn all this into a multicolored disgrace.