Numbering list in HTML. MARKED LIST HTML numbers - HTML lessons

Numbered lists are a set of elements with their sequence numbers. View and type of numbering depends on the attributes of the tag

which is used to create a list. Each point of the numbered list is indicated by the tag
1. As shown below.
   1. First point
   2. Second point
   3. Third point

   If you do not specify any additional attributes and simply write a tag

   The default list with Arab numbers (1, 2, 3, 3, ...) is applied, as shown in Example 11.3.

   Example 11.3. Creating a numbered list

   Work with time

   1. creation of punctuality (will never be late for);
   2. cure from punctuality (you will never hurry anywhere);
   3. change of time perception and clock.

   Result this example shown in fig. 11.3.

   Fig. 11.3. View of a numbered list

   Note that automatic indents tops are also added in the numbered list, from the bottom and left of the text.

   The following values \u200b\u200bmay act as numbering elements:

   • arab numbers (1, 2, 3, ...);
   • capital Latin letters (A, B, C, ...);
   • lowercase Latin letters (a, b, c, ...);
   • registration Roman numbers (I, II, III, ...);
   • lCD Roman numbers (I, II, III, ...).

   To specify the type of numbered list, the TYPE Tag attribute is applied

   . Its possible values \u200b\u200bare given in Table. 11.2.
   Table. 11.2. Types of numbered list

   Type of list	HTML code	Example
   Arab numbers		1. Cheburashka 2. Crocodile Gena 3. Shapoklyak
   Capital letters of the Latin alphabet		A. Cheburashka B. Crocodile Gena C. Shapoklyak
   Ltrical letters of the Latin alphabet		a. Cheburashka b. Crocodile Gena c. Shapoklyak
   Roman numbers in the upper case		I. Cheburashka II. Crocodile Gena III. Shapoklyak
   Roman Numbers in Lower Register		i. Cheburashka II. Crocodile Gena III. Shapoklyak

   To start a list from a specific value, the start tag attribute is used.

   . It does not matter which type of list is installed using Type, the Start attribute is equally working with Roman and Arab numbers. In Example 11.4, the creation of a list using Roman numbers in the upper case starting with eight is shown.

   Example 11.4. Numbering list

   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.

   

   Fig. 11.4. Numbered list with Roman numbers

   IN hTML language There are two types of lists: numbered and non-measured. Their creation is practically the same. Even tags differ on one character. You can also create which may include both numbered and marker.

   These lists can be converted as you like. It all depends on your imagination. First we consider standard lists, the same as in editor Word.And then we will improve them and make it unrecognizable.

   Numbered list HTML

   The usual numbered can be created using the following tags:

   1. First list list
   2. The second list of the list
   3. Third list list

   Simple lists look like this

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

   4. , then automatically puts in front of him
   .

   Thus, lists can be done as shown below.

   

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

   

   Non-dimensional (or marker) lists are created in the same way, only instead of the OL tag, UL is written.

   No numbers or letters - only various symbolswhich are called markers.

   

   Multi-level numbered HTML List

   Many users are interested in such an opportunity. 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 a list specified in the example above, you need to write the following.

   

   Please note that in this code, as opposed to the first examples, the Type attribute has been added. Thanks to him, you can specify the type of sorting both for numbered and for marker lists.

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

   If you use a special HTML tag, a numbered list can be any way you want.

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

   

   Transfer of values \u200b\u200bis rather simple. Enough basic knowledge of English language. But even if you cannot translate the words "Circle", "Square", etc., then you can visually understand what the result will be when you specify these values \u200b\u200bin the Type attribute.

   For numbered lists, you need to use the following options:

   • 1 - Arabic figures;
   • A - capital;
   • a - lowercase Latin letters;
   • I - capital roman numbers;
   • i - lowercase Roman numbers.

   By default, the list is always used, if you have not specified anything, it is equivalent to Type \u003d "1".

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

   

   In addition, it can be concluded in the reverse order. To do this, write a refersed.

   

   Registration of lists

   The numbered HTML list can be made so beautiful that it is not possible to guess that this is the usual list, and not the picture made in Photoshop.

   Here are examples of beautiful lists.

   

   As can be seen from the example, you can change appearance Numbering and elements themselves.

   Create a regular list can be like this.

   

   In CSS styles, you need to specify the design for OL tags. Please note that in this case the settings will be applied to all the lists of the entire site where this style file is used.

   

   Consider first the option with a round design of the list. Return to the list code. The Rounded-List class is specified. That's it with this class you need to tinker to make such beauty. You can call the class as you want.

   

   

   

   Now consider the square design.

   

   Styles are very similar. The difference is that in the first case it is rounded the element through the capabilities of CSS.

   Professional gag 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 sits on Windows XP and uses old versions. internet browser Explorer.

   As a rule, almost all modern design improvements of the elements are not supported. It will seem to the user that the site design did not work at all. That everything came out. Elements run on each other. To avoid this, you need to calculate all the options.

   Some webmasters close their eyes on them, because their share in the modern market is becoming less and less. But for professional every visitor is important, especially if this is a commercial site.

   Do something suitable for everyone or consider all browser options.

   The only difference is that this tag is strictly made to number the lists. The title of the tag came from English reduction "Ordered List" - a numbered list.

   Syntax tag

   1. Element # 1.
   2. Element # 2.
   3. Element # 3.
   4. ...

   Where the attribute type \u003d "value" can take the following values

   • A - Specifies markers in the form of capital Latin letters (A, B, C ..);
   • a - sets markers in the form of lowercase Latin letters (A, B, C ..);
   • I - sets markers in the form of large Roman numbers (I, II, III, IV ..);
   • i - sets markers in the form of small Roman numbers (I, II, III, IV ..);
   • 1 (by default) - sets markers in the form of Arabic numbers (1, 2, 3 ..);

   The START \u003d "VALUE" attribute sets the initial value (starting value) of the report.

   The Reversed attribute sets the return account (if necessary).

   Tag

   requires mandatory use of a closing tag

   For the formation of the list item, a pair tag is used

   1. . There are separate words, phrases, paragraphs, images, pieces of code, and much more between opening and closing tags, the contents of the marked list.

      Note

      Inside the list it is possible to change your account to your. To do this, there is a special attribute Value \u003d "" The tag

   2. which is assigned some numeric value. for example

      1. Element # 1.
      10. Element # 2.
      11. Element # 3.

      Examples with numbered lists in HTML (

      )

      Example 1. Numbered HTML List in the form of Latin letters

      Example S. capital letters

      1. Element # 1.
      2. Element # 2.
      3. Element # 3.

      1. Element # 1.
      2. Element # 2.
      3. Element # 3.

      Example with stringent letters

      1. Element # 10.
      2. Element # 11.
      3. Element # 12.

      This is how it looks on the page:

      1. Element # 1.
      2. Element # 2.
      3. Element # 3.

      Example 2. Numerized HTML List in the form of Roman letters

      Example with capital letters

      1. Element # 1.
      2. Element # 2.
      3. Element # 3.

      This is how it looks on the page:

      1. Element # 1.
      2. Element # 2.
      3. Element # 3.

      Example with stringent letters

      1. Element # 1.
      2. Element # 2.
      3. Element # 3.

      This is how it looks on the page:

      1. Element # 1.
      2. Element # 2.
      3. Element # 3.

      Example 3. Numbered HTML List Miscellaneous Start Position

      An example that shows the features of the start attribute that allows you to set the starting value of the meter.

      50. Element # 1.
      51. Element # 2.
      52. Element # 3.

      This is how it looks on the page:

      1. Element # 1.
      2. Element # 2.
      3. Element # 3.

      Example 4. Change counting in numbers HTML

      Below is an example with the ability to change the meter values \u200b\u200busing the Value attribute when displaying new items in the tags

   3. .

      10. Element # 1.
      11. Element # 2.
      100. Element # 3.
      101. Element # 4.

      This is how it looks on the page:

      1. Element # 1.
      2. Element # 2.
      3. Element # 3.
      4. Element # 4.

      Example 5. Reversible numbered list in HTML

      The following is an example of a reversing numbered list (account in the reverse order).

      10. Element # 1.
      11. Element # 2.
      12. Element # 3.
      13. Element # 4.

      This is how it looks on the page:

      1. Element # 1.
      2. Element # 2.
      3. Element # 3.
      4. Element # 4.

      Lists are an important component of the content, as they help streamline information. Text on lists is better perceived and easier to remember.

      The simplest - before each element it is a marker - a circle, a square or a circle. The sequence of elements in the marked list is not important.

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

      and
      • .
        - This is a container containing a list whose elements are set by the tag.
        • .
          • A rock
          • Scissors
          • Paper

          By default, a black circle is used as a list marker ( dISK.). Adding to tag

          attribute type and assigning the corresponding value to him, the marker can be changed to the circle ( circle.) or black square ( square.).

          It differs from marked with the fact that the order of elements is important in it, and therefore instead of the marker, consistently running numbers or letters are used here. You don't need to care about the order in the list: the browser takes this task. If you change the list (delete or add an item, violating the order), the browser recalculates it and displays correctly.

          Tags used to create numbered lists

          and
          1. . Container
             determines the beginning and end of the list, tag
             1. Specifies the beginning and end of its element - everything is as in the marked list, only
                Replaced by
                .
                1. A rock
                2. Scissors
                3. Paper

                

                Since with numbered lists is not always so simple for the tag

                Created the following attributes (please note: the numbered list is just shown below):

                1. type. This attribute allows you to numbered a list not only by Arabic, but also the Roman numbers or Latin letters of a different register. type Supports values \u200b\u200b1 (default), A, A, I, I (try experimenting with them yourself).

                2. start.. Not always numbering should begin with a unit. This attribute allows you to set the initial value - the number of the first element of the list. It can be specified that the report begins, for example, with the number 100 or the letter K.

                3. reversed. If the list should not go from 1 to 10, and from 10 to 1, then you must use this attribute. If it is specified, the numbering will be carried out in the reverse order.

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

                1. attribute :

                2. Forty fifth element after thirty eighth

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

                List of definitions

                Not such a well-known type of list as discussed above. Consists of terms and their definitions. Created with the help of tags:

                - Container containing a list.

                - Terminal tag.

                - Definition tag

                The scope of the lists of definitions - glossary, reference books, tests, dictionaries and other sensations of the type "Term - Explanation".

                Here is an example of a list of definitions:

                Descriptor

                The main unit of the markup language known to all as the "tag".

                Attribute

                Tag property giving him additional features Text design.

                Label

                Single tag that does not need to close.

                

                The list consisting of lists attached to each other. It may include lists of different types. The complexity of the creation is to comply with the correct nesting tags, since in a multi-level structure it is easy to get confused.

                Here is an example of a multi-level list:

                Programming languages \u200b\u200bare divided into:

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

                In the HTML markup language, 3 types of lists are distinguished - ordered (numbered), disordered (non-measured) and definition list lists (Definition List).

                To build such a list, you need 2 types of items: 'UL' (abbreviation from Unordered List, i.e. disordered list) and 'Li' (list item). All that is written inside 'Li' is marker.

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

                Types of markers

                There is a special Type attribute that is placed in both elements of the list. This is the type of your marker. Total 3 types: circle, disc and square:

                - Square
                - Disc
                - Circle

                Depending on where to specify the type of marker, you can change it from the entire list or from a particular element.

                Numerized list (Ordered List)

                To build a list, you also need 2 elements: 'OL' and 'Li' (list item). Markers are replaced by numbers with a point. An example of a simple list:

                1. First element
                2. second element
                3. The last element

                The appearance of an ordered list can be controlled by setting different types Numbering.

                Numbering types

                There is a special Type attribute that is installed in the 'OL' or 'Li element. This is the type of your list. Total 5 types:

                - Numbering Arabic numbers (1, 2, 3)
                - Numbering with capital letters (A, B, C)
                - Numbering with lower case letters (A, B, C)
                - Numbering by large Roman numbers (I, II, III)
                - Numbering with small Roman numbers (I, II, III)
                - with what digit to start numbering

                Depending on where to specify the type of numbering, you can change it from the entire list or in a particular element.

                Definition List

                The list of definitions was designed for Word Articles.

                There is a general container 'DL'. Inside it is 'DT' (Definition Termin - term) and 'DD' (Definition Description - Description). The simplest example:

                Marketing department

                This department is engaged in promoting goods and services.

                Financial department

                This department is engaged in all financial transactions.

                All elements of all lists are block. But inside the 'DT' element, only lowercase elements can be set. In the elements 'DD' and 'Li' you can put anything. From here there are nested lists.

                Nested (mixed lists)

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

                Mixed list

                News of the day

                Today the rain

                Rain will go all day

                News of Night

                At night it will rain

                Tomorrow will begin a new day