The ol tag in html means. Numbered list

The hypertext markup language HTML has a tag

    used to create bulleted lists. It is supported by everyone modern browsers and allows you to display items in an order that does not need numbering. For example, it very often displays menu items and everything related to the lists on the page: dishes, products, equipment, tools and much more that needs to be listed without indicating the priority of this or that item.

    Tag syntax

      • Item # 1
      • Item # 2
      • Item # 3
      • ...

      This code is converted to a bulleted list on the site:

      • Item # 1
      • Item # 2
      • Item # 3

      Tag

        requires the mandatory use of an end tag
      .

      A paired tag is used to form list items. Between the opening and closing tags are individual words, phrases, paragraphs, images, chunks of code and much more, which are the contents of a bulleted list.

      What can be the contents of a bulleted list?

      It can be a variety of texts, including single words, phrases and paragraphs, images, nested lists, chunks of php code, and much more that needs simple labeling.

      Each bulleted list item is indented 40 pixels to the right by default. Using CSS styles, we can change the display of this list to our liking. Tag

        is block-based, so it occupies the entire area available to it, limited by the edge of the screen, table frame, or other page elements.

        List-in-list attachments are allowed

        For example

        • Item # 1
          • Item # 2-1
          • Item # 2-2
          • Item # 2-3
        • Item # 3
        • ...

        Tag attributes and properties

          Widely used tag attribute

            is a type attribute that indicates how the list marker will look like. Can take the following values

            1. type = "disc" - marker in the form of a filled circle (this value is the default). The disk example was just above.

            2. type = "circle" - a marker in the form of a transparent circle

            For example:

            • Item # 1
            • Item # 2
            • Item # 1
            • Item # 2

            3.type = "square" - a marker in the form of a square

            For example:

            • Item # 1
            • Item # 2

            And this is how it looks on the page:

            • Item # 1
            • Item # 2
            Note 1

            In CSS, the marker type is specified using the list-style-type attribute:

            • ...

            Let's consider what values ​​the list-style-type can take:

            • disc - a marker in the form of a circle (the example was above)
            • circle - a marker in the form of a transparent circle (the example was above)
            • square - a marker in the form of a square (the example was above)
            • decimal - marker in the form of a numbered list in Arabic numerals: 1, 2, 3, ...
            • decimal-leading-zero - marker in the form of a numbered list in Arabic numerals with leading zero: 01, 02, 03, ...
            • lower-roman - marker in the form of a numbered list in the Roman alphabet in small letters: i, ii, iii, iv, v
            • upper-roman - bullet in the form of a numbered list in the Roman alphabet in big letters: I, II, III, IV, V
            • lower-latin - a marker in the form of a list in the Latin alphabet in small letters: a, b, c, d, ...
            • upper-latin - a marker in the form of a list in the Latin alphabet in capital letters: A, B, C, D, ...
            • lower-greek - a marker in the form of a list in the Greek alphabet in small letters
            • upper-greek - marker in the form of a list in the Greek alphabet in capital letters

            Note 2

            The attribute can be assigned as the tag itself

              and tags
            • ... When setting an attribute to a tag
                all list items will be displayed as the attribute indicates. But we can set our own display to this or that element. Example in the picture:

                The code looks like this:

                • Item # 1
                • Item # 2
                • Item # 3
                • Item # 1
                • Item # 2
                • Item # 3

                Changing tag markers
                  using CSS

                Bulleted List Items Created by Tag

                  , can be marked with arbitrary images. CSS is used to change the marker type. For example

                  • Item # 1
                  • Item # 2
                  • Item # 3

                  And this is how it looks on the page:

                  • Item # 1
                  • Item # 2
                  • Item # 3

                  We can use CSS to define other types of marker display as well. But you need to remember that when setting any style for the tag

                    , it applies to all elements of the list.

                    HTML provides a special set of tags for presenting information in the form of lists. Lists are one of the most commonly used forms of data presentation, both in electronic documents and in print. We meet with lists almost daily - it can be a list of necessary purchases in the store, students in the classroom, or just things that need to be done. The ability to organize list structures is available in many text editors in particular a powerful word processor Microsoft Word has convenient list formatting tools of various kinds(The possibilities for creating HTML lists using Microsoft Word are discussed in Chapter 8). Here are a number of cases for which the use of lists is quite convenient:

                    • Combining pieces of information into a single structure to give a readable look.
                    • Description of complex step-by-step processes.
                    • The location of information in the style of a table of contents, the paragraphs of which indicate the corresponding sections of the document.

                    Note that the above items are just organized in the form of a list structure.

                    HTML provides the following basic types of lists: bulleted, numbered, and list of definitions. To implement lists different types the following tags are used:

                      ,
                        ,
                        , , ... With the help of various types of lists built into the document, a wide variety of capabilities can be implemented, which are described in this chapter. The features of building lists of various types, as well as the use of nested lists are considered.

                        Bulleted list

                        One of the types of lists implemented in HTML is a bulleted list. Otherwise, lists of this type are called unnumbered or

                        disordered. The latter name is often used as a formal translation of the name of the corresponding tag.

                          , with the help of which lists of this type are organized in HTML documents (UL - Unordered List, unordered list).

                          A bulleted list uses Special symbols, called list bullets (often called bullets, which is the formal pronunciation of the English term bullet). The type of list markers is determined by the browser, and when creating nested lists, browsers automatically diversify the look of markers at various levels of nesting.

                          Tags

                            and<LI>

                            To create a bulleted list, you need to use a tag-container, inside which all the elements of the list are located. The opening and closing list tags provide line feeds before and after the list, thus separating the list from the main content of the document, so there is no need to use paragraph tags here


                            .

                            Each element of the list must begin with a tag

                          • (LI - List Item). Tag
                          • does not need an appropriate end tag, although its presence is in principle not forbidden. Browsers usually start each new list item on a new line when displaying a document.

                            The information provided is enough to build an elementary bulleted list. Here's an example of an HTML document that uses a bulleted list, the display of which is shown by the browser in Fig. 2.1.

                            Bullet list example

                              Zodiac signs:

                              • Aries

                              • Taurus

                              • Twins

                              • Cancer

                              • a lion

                              • Virgo

                              • scales

                              • Scorpion

                              • Sagittarius

                              • Capricorn

                              • Aquarius

                              • Fishes

                            Rice. 2.1. Browser Display Bulleted List

                            Note that in addition to the list items marked with the tag

                          • , there may be other HTML elements present. In the above example, one of these elements is plain text, which is not a list item, but plays the role of its heading.

                            Note

                            Some HTML textbooks instruct you to use a tag container to set the title of the list. (LH - List Header, list header). This tag is currently not recognized by any of the mainstream browsers and is not part of the HTML specification. Thus, its application becomes meaningless, although it will not lead to any errors.

                            In tag

                              two parameters can be specified: COMPACT and TYPE.

                              The COMPACT parameter is written with no values ​​and is used to tell the browser that this list should be output in a compact form. For example, the font can be reduced or the distance between the lines of the list, etc.

                              Note

                              Currently, the presence of the COMPACT parameter in the tag

                                does not in any way affect the display of lists by leading browsers. Therefore, the use of this parameter is meaningless, especially since its use is not recommended by the HTML 4.0 specification.

                                The TYPE parameter can take the following values: disc, circle and square. This parameter is used to force the appearance of the list markers. The exact type of marker will depend on the browser used. Typical options the mappings are as follows:

                                TYPE = disc - markers are displayed with filled circles; TYPE = circle - markers are displayed with open circles; TYPE = square - markers are displayed with filled squares. Recording example:

                                  .

                                  The default is TYPE = disc. For nested bulleted lists, the default is disc at the first level, circle at the second, and square at the third and beyond. This is exactly what is done in latest versions Netscape and Internet Explorer browsers. Note that other browsers may display markers differently. For example, the HTML 4.0 specification specifies a square outline for the marker appearance displayed with TYPE = square.

                                  The TYPE parameter with the same values ​​can be used to specify the type of markers for individual list items. For this, the TYPE parameter with the corresponding value can be specified in the tag of the list item

                                • .

                                  Recording example:

                                • .

                                  Note

                                  Browsers interpret specifying a marker type differently for individual element list. Netscape Browser changes the type of marker for this and all subsequent ones until the next redefinition of the marker type is encountered. Internet browser Explorer changes the appearance of the marker for this element only.

                                  Graphical list markers

                                  Graphics can be used as list markers, which is widely used to create attractive, beautifully designed HTML documents. In fact, such a possibility is not provided directly by the HTML language, but is implemented somewhat artificially. This does not mean that it is not recommended or reprehensible to do this, but only means that no special HTML language constructs will be used here.

                                  To understand the idea, you need to understand how lists are implemented in HTML pages. It turns out that the list tag

                                    (as well as tags of other types of lists, considered below) performs the only task - it tells the browser that all information located after this tag should be displayed with a shift to the right (indented) by a certain amount. Tags:
                                  • that point to individual list items provide standard list item markers.

                                    If we need to build a list with graphic markers, then we can do without tags altogether.

                                  • ... It will be enough to insert what you want before each element of the list graphic image... The only task that needs to be solved in this case will be to separate the elements of the list from each other. You can use paragraph tags for this

                                    Or forced line feed
                                    ... An example of the implementation of a list with graphic markers, the display of which is shown in Fig. 2.2 is shown below:

                                    Bulleted list

                                      Zodiac signs:

                                        Aries

                                        Taurus

                                        Gemini

                                        Pak

                                        Lev

                                        Virgo

                                        scales

                                        Scorpion

                                        Sagittarius

                                        Capricorn

                                        Aquarius

                                        Fishes

                                    Rice. 2.2. Bullet list with graphic markers

                                    In the above example, the list item marker is graphic file Green_ball.gif. Note that the use of graphics on HTML pages can significantly increase the amount of information transferred. However, in this case, this increase is extremely insignificant. Here, the same file is used for all markers,

                                    which will be transmitted only once. The size of a file containing a small image is also extremely small.

                                    Note

                                    Methods for creating lists with graphic markers are discussed in turn in Chapter 8.

                                    Numbered list

                                    Another type of lists implemented in HTML is a numbered list. Otherwise, lists of this type are called ordered. The latter name is often used as a formal translation of the name of the corresponding tag.

                                      , with the help of which lists of this type are organized in HTML documents (OL - Ordered List).

                                      Lists of this type usually represent an ordered sequence of individual elements. The difference from bulleted lists is that in a numbered list, each element is automatically preceded by a sequential number. The type of numbering depends on the browser and can be set by the parameters of the list tags. Otherwise, the implementation of numbered lists is very similar to the implementation of bulleted lists.

                                      Tags

                                        and
                                      1. To create a numbered list, use a tag-container, inside which all the elements of the list are located. The start and end tags of a list provide line feeds before and after the list, thus separating the list from the main content of the document.

                                        As with a bulleted list, each item in a numbered list must begin with the tag

                                      2. .

                                        Here's an example of an HTML document using a numbered list, whose display the browser is shown in Fig. 2.3.

                                        Example of a numbered list

                                          The brightest stars visible from Earth:

                                          • Sirius

                                          • To anopus

                                          • Arcturus

                                          • Alpha Centauri

                                          • Vega

                                          • K apella

                                          • Rigel

                                          • Procyon

                                          • Achernar

                                          • Beta Centauri

                                          • Vetelgeuse

                                          • Aldebaran


                                            . . .

                                          • Mizar


                                            . . .

                                          • Polar

                                        Rice. 2.Z. Numbered list

                                        In tag

                                          the following parameters can be specified: COMPACT, TYPE and START.

                                          The COMPACT parameter has the same meaning as bulleted lists. The TYPE parameter is used to set the type of list numbering. It can take the following values:

                                          TYPE = A - sets markers in the form of uppercase Latin letters;

                                          TYPE = a - specifies markers in the form of lowercase Latin letters;

                                          TYPE = I - specifies markers in the form of large Roman numerals;

                                          TYPE = i - specifies markers in the form of small Roman numerals;

                                          TYPE = 1 - specifies markers in the form of Arabic numerals.

                                          By default, the value TYPE = 1 is always used, i.e. numbering using Arabic numerals. This also applies to nested numbered lists. Here, unlike bulleted lists, browsers by default do not make different numbering at different levels of nesting of the lists. Note that after the number of the list element, the "dot" sign is always additionally displayed.

                                          The TYPE parameter with the same values ​​can be used to specify the style of numbering of individual list items. For this, the TYPE parameter with the corresponding value can be specified in the tag of the list item

                                        1. .

                                          Recording example:

                                        2. .

                                          Tag START parameter

                                            allows you to start numbering the list with a non-one. A natural number must always be specified as the value of the START parameter, regardless of the type of list numbering. Let's give an example:

                                              .

                                              Such an entry determines the numbering of the list from the capital Latin letter "E". For other types of numbering, the entry START = 5 will set the numbering, respectively, from the number "5", the Roman numeral "V", etc.

                                              Changing the type of numbering of the list and the values ​​of numbers can be performed for any element of the list. Tag

                                            1. for numbered lists, allows the TYPE and VALUE parameters to be used. The TYPE parameter can take the same values ​​as for the tag.
                                                .

                                                NS Example of recording:

                                              1. .

                                                Note

                                                Browsers interpret specifying the type of numbering for an individual list item differently. The Netscape browser changes the numbering for this element and all subsequent ones until it encounters another override. Internet Explorer changes the appearance of the number for this item only.

                                                Zthe value of the tag's VALUE parameter

                                              2. - allows you to change the number of this list item. This also changes the numbering of all subsequent elements. Typical applications are lists with the omission of certain elements. An example of such a list was given above (Fig. 2.3). It gives an ordered list of the brightest stars, in which at 58 and 75 places are stars that are clearly visible in our latitudes (Mizar is the brightest star in the constellation Ursa Major, and the Polar Star is Ursa Minor).

                                                Here is another original example of using different types of numbering. The HTML code below contains three lists with different numbering. For ease of viewing, each of the lists is placed in a separate cell of the table. All three lists are identical and differ only in the type of numbering: in the first column of the table - Arabic numerals, in the second - Roman, and in the third, the numbering is in Latin letters. Note that the list items are empty, i.e. after any tag

                                              3. no data available. An example of this kind can be used as a table of correspondence between the recording of numbers in Arabic and Roman numerals. It turns out that any browser that supports lists can be used as a generator for such a table (Figure 2.4), as long as you type in the provided HTML code. Roman numerals work correctly up to 3999. By examining the right column, you can understand how the Roman numerals are numbered. When the one-letter numbering (from A to Z) is exhausted, the first two-letter number is taken as the next number - AA, etc.

                                                Using different types of numbering in lists


                                                  1. . . .


                                                1. . . .


                                                1. . . .

                                                Rice. 2.4. Different types of HTML list numbering

                                                Definition list

                                                Lists of definitions, also called vocabularies of definitions of special terms, are a special kind of lists. Unlike other types of lists, each item in a definition list always has two parts. In the first part of the list item, the term being defined is written, and in the second part, the text in the form of a dictionary entry, revealing the meaning of the term.

                                                Definition lists are specified using a container tag

                                                (Definition List). Inside the container with the tag
                                                (Definition Term) marks the term being defined, and the tag
                                                (Definition Description) - a paragraph with its definition. For tags
                                                and
                                                you do not have to write the corresponding end tags.

                                                In general, the definition list is written as follows:

                                                Term

                                                Definition of the term

                                                In the text after the tag

                                                block level elements such as paragraph tags cannot be used

                                                Or headers

                                                -

                                                ... Typically, the text of the term being defined should be on one line. The text containing the definition of the term is displayed starting with next line(or across a line for some browsers) after the definition of the term, indented to the right. In the information placed after the tag
                                                , block-level elements can be located. This implies, in particular, that definition lists can be nested.

                                                In tag

                                                the COMPACT parameter can be specified, the purpose of which is similar to the other lists described above.

                                                Here's an example HTML document that uses a definition list:

                                                An example of a definition list

                                                Classification of typical human temperaments,
                                                founded

                                                on the views of Hippocrates

                                                  Phlegmatic person

                                                  Passive, very able-bodied, slowly adapting;
                                                  stable mood, little amenable to external influence;
                                                  lethargy of emotional reactions and slowness in volitional activity

                                                  Sanguine

                                                  Active, energetic, adaptable, -
                                                  liveliness and mobility of emotional reactions, speed and strength of volitional manifestations

                                                  Choleric

                                                  Active, very energetic, persistent;
                                                  impetuosity and strength of emotional reactions, violent volitional manifestations

                                                  Melancholic

                                                  Passive, easily tired, hard to adapt, -
                                                  weakness of volition and the predominance of a depressed mood, self-doubt

                                                The display of the given HTML document in the browser is shown in Fig. 2.5.

                                                Rice. 2.5. List of definitions (resembles a group of entries in a dictionary)

                                                Type Lists

                                                and

                                                Type Lists

                                                and are currently largely unused, although they are still supported by major browsers. Both of these list types are deprecated in the HTML 4.0 specification. Instead of them, it is proposed to use bulleted lists, specified by the tag
                                                  .

                                                  Initially, these types of lists were conceived to be more compact than regular bulleted lists. According to the rules for writing the elements of these lists, it was not allowed to use block elements in them, which means that it is impossible to implement nesting of lists of this type. Each item in the list was one line of text.

                                                  For lists like

                                                  it was planned to introduce a restriction on the “length of the text of a list item (24 characters). Such a limitation would make it possible to derive

                                                  lists like

                                                  in a form similar to the listing of directories in operating systems UNIX and MS-DOS when using the / W switch (multiple columns). In addition, markers were not displayed for list items of this type.

                                                  At present, all these ideas have not been implemented, since the further use of lists of these types is not recommended. Modern versions of browsers display lists of these types in exactly the same way as lists of the type

                                                    .

                                                    Nested lists

                                                    There are times when a list item of one type needs to include an entire list of the same type or another. This will organize multilevel or nested lists. HTML allows arbitrary nesting of various types of lists, but care should be taken when organizing them.

                                                    Below is the HTML code of the document with nested lists, the display of which is shown in Fig. 2.6. In this example, each item in the bulleted list has its own numbered list.

                                                    Example of a nested list

                                                      Satellites of some planets

                                                    • Zempia

                                                        1. moon

                                                    • Mapc

                                                        1. Phobos

                                                        2. Deimos

                                                    • Uranus

                                                        1. Ariel

                                                        2. Umbriel

                                                        3. Titania

                                                        4. Oberon

                                                        5. Miranda

                                                    • Neptune

                                                        1. Triton

                                                        2. Nereid

                                                      The only difference is that this tag is strictly made for numbering lists. The name of the tag comes from the English abbreviation "Ordered List" - numbered list.

                                                      Tag syntax

                                                        1. Item # 1
                                                        2. Item # 2
                                                        3. Item # 3
                                                        4. ...

                                                    Where the type = "value" attribute can take the following values

                                                    • A - sets markers in the form of uppercase 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 numerals (I, II, III, IV ..);
                                                    • i - specifies markers in the form of small Roman numerals (i, ii, iii, iv ..);
                                                    • 1 (default) - specifies markers in the form of Arabic numerals (1, 2, 3 ..);

                                                    The start = "value" attribute specifies initial value(start value) of the report.

                                                    The reversed attribute specifies a reverse count (if necessary).

                                                    Tag

                                                      requires the mandatory use of an end tag

                                                    A pair tag is used to form list items.

                                                  • ... Between the opening and closing tags are individual words, phrases, paragraphs, images, chunks of code and much more, which are the contents of a bulleted list.

                                                    Note

                                                    Inside the list, you can change the account to your own. For this, there is a special attribute value = "" for the tag

                                                  • to which some numeric value is assigned. For example

                                                    1. Item # 1
                                                    2. Item # 2
                                                    3. Item # 3

                                                  Examples with numbered lists in html (
                                                    )

                                                  Example 1. Numbered html list in the form of Latin letters

                                                  Example with in capital letters

                                                  1. Item # 1
                                                  2. Item # 2
                                                  3. Item # 3
                                                  1. Item # 1
                                                  2. Item # 2
                                                  3. Item # 3

                                                  Example with lowercase letters

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

                                                  This is how it looks on the page:

                                                  1. Item # 1
                                                  2. Item # 2
                                                  3. Item # 3

                                                  Example 2. Numbered html list in roman letters

                                                  Example with uppercase letters

                                                  1. Item # 1
                                                  2. Item # 2
                                                  3. Item # 3

                                                  This is how it looks on the page:

                                                  1. Item # 1
                                                  2. Item # 2
                                                  3. Item # 3

                                                  Example with lowercase letters

                                                  1. Item # 1
                                                  2. Item # 2
                                                  3. Item # 3

                                                  This is how it looks on the page:

                                                  1. Item # 1
                                                  2. Item # 2
                                                  3. Item # 3

                                                  Example 3. Numbered html list with different start positions

                                                  An example that shows the capabilities of the start attribute, which allows you to set the start value of the counter.

                                                  1. Item # 1
                                                  2. Item # 2
                                                  3. Item # 3

                                                  This is how it looks on the page:

                                                  1. Item # 1
                                                  2. Item # 2
                                                  3. Item # 3

                                                  Example 4. Changing account in numbered html lists

                                                  Below is an example with the ability to change the counter values ​​using the value attribute when displaying new elements in tags

                                                • .

                                                  1. Item # 1
                                                  2. Item # 2
                                                  3. Item # 3
                                                  4. Item # 4

                                                  This is how it looks on the page:

                                                  1. Item # 1
                                                  2. Item # 2
                                                  3. Item # 3
                                                  4. Item # 4

                                                  Example 5. Reversible numbered list in html

                                                  Below is an example of a reverse numbered list (counting in reverse order).

                                                  1. Item # 1
                                                  2. Item # 2
                                                  3. Item # 3
                                                  4. Item # 4

                                                  This is how it looks on the page:

                                                  1. Item # 1
                                                  2. Item # 2
                                                  3. Item # 3
                                                  4. Item # 4

                                                  Element

                                                    (from the English "unordered list" - "unordered list") creates an unordered list. Typically the element
                                                      it is used to create such lists, where changing the order of the items in this list does not significantly change the meaning of the list.

                                                      Tag

                                                        refers to block elements, so it will take up the entire width available to it, and the size of the height will depend on the amount of content.

                                                        Items for numbered lists are defined using the tag

                                                      • , which, in addition to text, can include other HTML elements (lists, images, headings, paragraphs, etc.). By default, bulleted lists are displayed on a web page as a list that starts with a small black circle. Browsers add a small margin to the left when displaying list items.

                                                        Note: If to

                                                          applied CSS property, then the elements
                                                        • inherit these properties.

                                                          Advice: To change the marker type, use the list-style-type CSS property or the list-style-image property to replace markers with images. To create numbered lists use the tag

                                                            .

                                                            Syntax

                                                              ...
                                                            • ...
                                                            • ...

                                                            End tag

                                                            Required.

                                                            Attributes

                                                            compact Deprecated in HTML5 Reduces indentation and line spacing. type HTML5 Sets the look of the list marker.

                                                            Available for this item global attributes and developments.

                                                            Default styling

                                                            Most browsers will render the element

                                                              with the following CSS values default:

                                                              Ul (display: block; list-style-type: disc; margin-top: 1em; margin-bottom: 1 em; margin-left: 0; margin-right: 0; padding-left: 40px;)

                                                              Differences between HTML 4.01 and HTML5

                                                              The compact and type attributes are not supported in HTML5.

                                                              Usage example:

                                                              Unordered HTML list:

                                                              Example HTML:

                                                              Try it yourself
                                                              • Coffee
                                                              • Tea
                                                              • Cocoa

                                                              Specifications (edit)

                                                              Specification Status
                                                              WHATWG HTML Living Standard (WHATWG) Living standard
                                                              HTML 4.01 (W3C) Recommendation
                                                              HTML5 (W3C) Recommendation
                                                              HTML 5.1 (W3C) Recommendation

                                                              Browser support

                                                              Try it yourself - Examples

                                                              How to make the list start with a number other than 1.

                                                              Hello dear readers! Today, as a continuation of the series of articles under the heading "Basics of html", I want to acquaint you with the algorithm for creating html lists with help tags ul and li (unordered list), ol and li (numbered list), dl, dt, dd (definition list).

                                                              Now I will continue to acquaint you with the most frequently used html tags, which are used to create lists on site pages. If someone does not know what it is, for sure, after the information received below, he will immediately understand what it is about, since this form of presentation of the material is very common.

                                                              HTML bulleted lists - ul and li tags

                                                              The bulleted list is defined by the ul tag. List items are located between the opening and closing ul tags, the content of each of which must, in turn, be located between the opening and closing li tags. Immediately, I note that the ul tag is paired (the presence of an opening and closing tags), as well as block, that is, it forms a container that contains elements (strings) that are formed each time by the li tag. Accordingly, the li tag is paired and lowercase.

                                                              Default appearance marker is represented by a filled circle. However, you can change its appearance by applying the type attribute, which has the following values: disc, circle, square. The disc value (which determines the appearance of the filled circle marker) is the default. That is, if the type attribute is not specified, then the appearance of the marker will look like a filled circle. If we add these attributes to the ul tag, we get the following options:

                                                              Naturally, each marker of an individual item in the bulleted list can be given its own appearance by prescribing the appropriate values ​​for the type attribute.

                                                              Numbered HTML Lists - ol and li tags

                                                              Now let's see how a numbered list is formed using ol tags (block and paired tags, similar to ul). The li tag also acts as a tag that defines the elements of the numbered html list. A numbered list is a collection of numbered items. The type of numbering is determined by the type attribute, which can take the following values:

                                                              • A - capital Latin letters;
                                                              • a - lowercase Latin letters;
                                                              • I - capital Roman numerals;
                                                              • i - lowercase Roman numerals;
                                                              • 1 - Arabic numerals
                                                              1. 1 item in a numbered list
                                                              2. 2 item in a numbered list
                                                              3. 3 item in a numbered list
                                                              1. 1 item in a numbered list
                                                              2. 2 item in a numbered list
                                                              3. 3 item in a numbered list
                                                              1. 1 item in a numbered list
                                                              2. 2 item in a numbered list
                                                              3. 3 item in a numbered list
                                                              1. 1 item in a numbered list
                                                              2. 2 item in a numbered list
                                                              3. 3 item in a numbered list
                                                              1. 1 item in a numbered list
                                                              2. 2 item in a numbered list
                                                              3. 3 item in a numbered list
                                                              1. 1 item in a numbered list
                                                              2. 2 item in a numbered list
                                                              3. 3 item in a numbered list
                                                              1. 1 item in a numbered list
                                                              2. 2 item in a numbered list
                                                              3. 3 item in a numbered list
                                                              1. 1 item in a numbered list
                                                              2. 2 item in a numbered list
                                                              3. 3 item in a numbered list
                                                              1. 1 item in a numbered list
                                                              2. 2 item in a numbered list
                                                              3. 3 item in a numbered list

                                                              You can also provide a numbered list where the items are numbered in reverse order, for example: 3, 2, 1. This is done using the reserve attribute of the ol tag.

                                                              It is also possible to start a bulleted list with any other number instead of 1. To do this, you can use the start attribute, and it does not matter at all what value of the type attribute is set. See an example of using the name attribute in conjunction with the different values ​​for the type attribute (1 and I):

                                                              HTML definition lists - dl, dd, dt tags

                                                              Another kind of html lists is a definition list. It is formed as follows. The content of this list is enclosed between the opening and closing dl tags that form the container. The dt tag defines a term, and dd is the description of that term.

                                                              As you can see, the content of the dt tag, which is a term, is shifted to the left, and the content of the dd tag, which is the definition of this term, is written in italics. All this is achieved through the use of various css styles, which we will certainly talk about in upcoming publications.

                                                              By the way, modern realities are such that html language cannot be viewed in isolation, so in order not to miss these essential materials, subscribe to the blog update via RSS feed or by e-mail. This concludes the topic of today's article, if you received necessary information, don’t refuse to use the social media buttons.