Lists in HTML - bulleted list - numbered list - list of definitions - nested lists in HTML. Bulleted list in HTML

In the HTML markup language, there are 3 types of lists - ordered (numbered), unordered (unnumbered) and definition lists.

To build such a list, you need 2 types of elements: ‘ul’ (short for unordered list, i.e. unordered list) and ‘li’ (list element). Everything written inside 'li' is marked with a marker.

The appearance of such a list can be controlled by specifying the types of markers.

Types of markers

There is a special type attribute that is placed in both list elements. This is your marker type. There are only 3 types: circle, disk and square:

- square
- disk
- circumference

Depending on where you specify the marker type, you can change it for the entire list or for a specific element.

Ordered list

To build a list, you also need 2 elements: ‘ol’ and ‘li’ (list element). Markers are replaced with numbers with a dot. Example of a simple list:

1. first element
2. second element
3. last element

You can control the appearance of the ordered list by specifying different types of numbering.

Types of numbering

There is a special type attribute that is placed in the ‘ol’ or ‘li’ element. This is your list type. There are 5 types in total:

- Numbering in Arabic numerals (1, 2, 3)
- Numbering in capital letters (A, B, C)
- Numbering in lowercase letters (a, b, c)
- Numbering in large Roman numerals (I, II, III)
- Numbering in small Roman numerals (i, ii, iii)
- What number to start numbering from?

Depending on where you specify the type of numbering, you can change it for the entire list or for a specific element.

Definition list

A list of definitions has been developed for dictionary entries.

There is a general container 'dl'. Inside it are ‘dt’ (definition termin) and ‘dd’ (definition description). The simplest example:

Marketing department

This department is engaged in the promotion of goods and services

Finance department

This department deals with all financial transactions

All elements of all lists are block elements. But only inline elements can be placed inside the 'dt' element. You can put whatever you want into the 'dd' and 'li' elements. This is where nested lists come from.

Nested (mixed lists)

These are multi-level lists, within which there is a hierarchy. Often such lists are used when building a site map. Example:

Mixed list

NEWS OF THE DAY

It's raining today

It will rain all day

NEWS OF THE NIGHT

It will rain at night

Tomorrow a new day will begin

Lists are an important part of content because they help organize information. Text in lists is better perceived and easier to remember.

The simplest one is that in front of each of its elements there is a marker - a circle, square or circle. The order of items in a bulleted list is not important.

To create it, you need to use only two tags:

And
• .
  is a container containing a list whose elements are specified by the tag
  • .
    • Stone
    • Scissors
    • Paper
    
    
    

    By default, the list marker is a black circle ( disk). By adding to the tag

    attribute type and by assigning the appropriate value to it, the marker can be changed to a circle ( circle) or black square ( square).

    It differs from marked in that the order of the elements in it is important, and therefore instead of a marker, sequential numbers or letters are used here. There is no need to worry about the order in the list: the browser takes care of this task. If you change the list (remove or add an item out of order), the browser will recalculate it and display it correctly.

    Tags are used to create numbered lists

    And
    1. . Container
       defines the beginning and end of the list, tag
       1. specifies the beginning and end of its element - everything is like in a bulleted list, only
          replaced by
          .
          1. Stone
          2. Scissors
          3. Paper
          
          
          

          

          Since things are not always so simple with numbered lists, for the tag

          created the following attributes (note: below is just a numbered list):

          1. type. This attribute allows you to number the list not only with Arabic, but also with Roman numerals or Latin letters of different case. type supports values ​​1 (default), a, A, i, I (try experimenting with them yourself).

          2. start. Numbering does not always have to start with one. This attribute allows you to set the initial value - the number of the first element of the list. In it you can specify that the report begins, for example, with the number 100 or the letter K.

          3. reversed. If the list should go not from 1 to 10, but from 10 to 1, then this attribute must be used. If it is specified, the numbering will be in reverse order.

          In order to assign an arbitrary number to an element in the middle of the list, you need to use in the tag

          1. attribute :

          2. The forty-fifth element after the thirty-eighth

          By changing the number of one element in the middle of the list, you will change the numbering of all elements following it - the report will start with the value in the value attribute. For example, if you assigned element 18 the number 35, then the elements following it will have numbers not 19, 20, 21, but 36, 37, 38.

          List of definitions

          A list type that is not as well known as those discussed above. Consists of terms and their definitions. Created using tags:

          - a container containing a list.

          - term tag.

          - definition tag

          The scope of application of lists of definitions is glossaries, reference books, tests, dictionaries and other capacious listings of the “Term - explanation” type.

          Here is an example list of definitions:

          Descriptor

          The basic unit of markup language, known to everyone as "Tag".

          Attribute

          A property of a tag that gives it additional text formatting options.

          Label

          A single tag that does not need to be closed.

          
          
          

          

          A list consisting of lists nested within each other. May include lists of different types. The difficulty of creation lies in maintaining the correct nesting of tags, since it is easy to get confused in a multi-level structure.

          Here is an example of a multi-level list:

          Programming languages ​​are divided into:

          • Structural
          1. Pascal
          2. Oberon
          1. Limbo
          • Object-oriented
          1. Java
          • Functional
          1. Lisp
          2. Python

          
          
          

          Numbered lists are a collection of elements with their serial numbers. The type and type of numbering depends on the tag attributes

          , which is used to create the list. Each item in the numbered list is indicated by a tag
          1. as shown below.
             1. First point
             2. Second point
             3. Third point

             If you do not specify any additional attributes and just write the tag

             , then the default is a list with Arabic numbers (1, 2, 3,...), as shown in Example 11.3.

             Example 11.3. Create a numbered list

             Working with time

             1. creating punctuality (you will never be late for anything);
             2. cure for punctuality (you will never be in a hurry);
             3. change in perception of time and clocks.
             
             
             

             The result of this example is shown in Fig. 11.3.

             Rice. 11.3. Numbered list view

             Note that a numbered list also adds automatic indentation to the top, bottom, and left of the text.

             The following values ​​can serve as numbering elements:

             • Arabic numbers (1, 2, 3, ...);
             • capital Latin letters (A, B, C, ...);
             • lowercase Latin letters (a, b, c, ...);
             • capital Roman numerals (I, II, III, ...);
             • lowercase Roman numerals (i, ii, iii, ...).

             To indicate the type of numbered list, use the type attribute of the tag

             . Its possible values ​​are given in table. 11.2.
             Table 11.2. Types of numbered list

             List type	HTML code	Example
             Arabic numbers		1. Cheburashka 2. Crocodile Gena 3. Shapoklyak
             Capital letters of the Latin alphabet		A. Cheburashka B. Crocodile Gena C. Shapoklyak
             Lowercase letters of the Latin alphabet		a. Cheburashka b. Crocodile Gena c. Shapoklyak
             Roman numerals in uppercase		I. Cheburashka II. Crocodile Gena III. Shapoklyak
             Roman numerals in lower case		i. Cheburashka ii. Crocodile Gena iii. Shapoklyak

             To start a list with a specific value, use the start attribute of the tag

             . It doesn't matter what type the list is set to using type , the start attribute works the same with both Roman and Arabic numerals. Example 11.4 shows how to create a list using uppercase Roman numerals starting with eight.

             Example 11.4. List numbering

             8. King Magnum XLIV
             9. King Siegfried XVI
             10. King Sigismund XXI
             11. King Husbrandt I
             
             
             

             The result of this example is shown in Fig. 11.4.

             

             Rice. 11.4. Numbered list with Roman numerals

             Numbered lists are a collection of elements with their serial numbers. The type and type of numbering depends on the element parameters

             , which is used to create the list. The following values ​​can serve as numbering elements:
             • Arabic numerals (1, 2, 3, ...);
             • Arabic numerals with a leading zero for numbers less than ten (01, 02, 03, ...,10);
             • capital Latin letters (A, B, C, ...);
             • lowercase Latin letters (a, b, c, ...);
             • uppercase Roman numerals (I, II, III, ...);
             • lowercase Roman numerals (i, ii, iii, ...);
             • Armenian numbering;
             • Georgian numbering.

             From a practical point of view, the principles of displaying items in a bulleted list can be applied in a similar way to a numbered list. But given that we are dealing with an enumeration, there are some features that will be discussed further.

             List numbering

             It is allowed to start the list from any number; the element's start attribute is used for this purpose

             or value of the element
             1. . The value is any positive integer. It does not matter what type of numbering is set, even if Latin letters are used as a list. If both the start and value attributes are applied to a list at the same time, then the latter takes precedence and the numbering is displayed from the number specified by value , as shown in Example 1.

                Example 1: Changing the list numbering

                4. You should take good care of your workplace.
                5. Adjust the lighting in the room so that the light source is located to the side or behind the operator.
                10. To avoid medical complications, it is recommended to choose a chair with a soft seat.
                
                
                

                The first element of the list in this example will begin with the Roman numeral IV, since the start="4" attribute is specified, then comes the number V, and the last element comes out of order and is assigned the number X (Figure 1).

                Rice. 1. Roman numerals in the list

                Writing numbers

                By default, a numbered list has a certain appearance: first there is a number, then a dot, and after that the text is displayed separated by a space. This form of writing is visual and convenient, but some developers prefer to see a different way of designing list numbering. Namely, so that instead of a dot there is a closing bracket, as shown in Fig. 2 or something similar.

                

                Rice. 2. Numbered list view with bracket

                Styles allow you to change the type of list numbering using the content and counter-increment properties. First, the ol selector needs to be set to counter-reset : item , this is necessary so that the numbering in each new list starts anew. Otherwise, the numbering will continue and instead of 1,2,3 you will see 5,6,7. The item value is a unique identifier for the counter; we choose it ourselves. Next, you need to hide the original markers through the style property list-style-type with the value none .

                The content property typically works in conjunction with the ::after and ::before pseudo-elements. Thus, the li::before construction says that some content must be added before each element of the list (example 2).

                Example 2. Creating your own numbering

                Li::before ( content: counter(item) ") "; /* Add a parenthesis to the numbers */ counter-increment: item; /* Set the name of the counter */ )

                The content property with the value counter(item) displays a number; By adding a parenthesis, as shown in this example, we get the required type of numbering. counter-increment is needed to increase the list number by one. Note that the same identifier, named item , is used throughout. The final code is shown in Example 3.

                Example 3: Changing the list view

                1. First
                2. Second
                3. Third
                4. Fourth
                
                
                

                Using the above method, you can make any type of numbered list, for example, put a number in square brackets; in this case, only one line will change in the styles.

                Content: "[" counter(item) "] ";

                List with Russian letters

                There is a numbered list with Latin letters, but there are no Russian letters for the list. They can be added artificially using the above technique. Since the numbering is done through styles, the list itself remains original, only the selected class is added to it, let’s call it cyrilic (example 4).

                Example 4: Code to create a list

                1. One
                2. Two
                3. Three

                Adding letters is done using the ::before pseudo-element and the content property. Since each line must have its own letter, we will use the pseudo-class :nth-child(1) , with the letter number written in parentheses. The first letter, naturally, is A, the second is B, the third is C, etc. This entire set is added to the li selector as follows (example 5).

                Example 5: Using the pseudo-class:nth-child

                Cyrilic li:nth-child(1)::before ( content: "a)"; ) .cyrilic li:nth-child(2)::before ( content: "b)"; ) .cyrilic li:nth-child(3)::before ( content: "at)"; )

                In this example, each letter is followed by a parenthesis, all letters are lowercase. You can define your own type of list numbering, for example it can contain capital letters with a dot, with one or two brackets, or only letters. Unlike standard numbering, we are free to do whatever we want here. A list of ten letters should be enough for almost all situations, but if this suddenly turns out to be not enough, nothing prevents us from expanding our list to include at least all the letters of the Russian alphabet.

                We finally adjust the alignment and position of the letters, optionally specify the font size, color and other parameters (example 6).

                Example 6. List with Russian letters

                1. Borsch
                2. Pike cutlets
                3. Kulebyaka
                4. Mushrooms in sour cream
                5. Pancakes with caviar
                6. Kvass
                
                
                

                The result of this example is shown in Fig. 3.

                Numbered list

                Numbered lists are sometimes called ordered lists. Lists of this type are an ordered sequence of individual elements. The difference from bulleted lists is that in a numbered list, each element is automatically preceded by a serial number. The type of numbering depends on the browser and can be specified by attributes of list tags. Otherwise, the implementation of a numbered list is very similar to the implementation of a bulleted list.

                To create a numbered list you should use a container tag<OL> OL>, inside which all the elements of the list are located.

                Each list element must begin with a tag<LI> and end with the tagLI>.

                OL element specification:

                TYPE="type of numbering"

                START="start position">

                The TYPE attribute specifies the type of numbering used to highlight list elements. It can have the following meanings:

                 A – markers in the form of capital Latin letters;

                 a – markers in the form of lowercase Latin letters;

                 I- markers in the form of large Roman numerals;

                 i- markers in the form of small Roman numerals;

                 1- markers in the form of Arabic numerals, this value is used according to
                default.

                The START attribute specifies the position at which list numbering begins. Using this attribute, you can start numbering, for example, with the number 5 or the letter E, depending on the type of numbering. The value of the START attribute is a number, regardless of the type of numbering.

                LI element specification for numbered list:

                TYPE="type of numbering"

                VALUE="element number">!}

                The TYPE attribute specifies the type of numbering; it can take the same values ​​as the OL element attribute of the same name. The default value of this attribute is 1.

                The VALUE attribute allows you to change the number of this element, and the numbers of subsequent elements will also change.

                An example of using a numbered list:

                Russian cities by size:

             2. Moscow
             3. Saint Petersburg
             4. Novosibirsk

             This is how the browser will display this example:

             List of definitions

             Definition lists, also called definition dictionaries, are a special type of list. Unlike other types of lists, each element of a definition list always consists of two parts. The first part of the list element indicates the term being defined, and the second part contains text in the form of a dictionary entry that reveals the meaning of the term.

             Definition lists are specified using a container tag<D.L.>. Inside it is tagged<D.T.> the term being defined is marked, and the tag<DD> – a paragraph with its definition. Inside an element

             Paragraphs (P) and headings (H1-H6) cannot be used, but they can be used inside an element
             . There are no attributes for definition list elements. In general, the list of definitions is written as follows:

             Term
             Definition of the term

             An example of using a definition list:

             Composition of Microsoft Office

             Microsoft Word
             Multifunctional word processor
             Microsoft Excel
             Program for working with electronic

             tables