The ol tag is used for implementation. Styling line numbers (digits) in ordered lists ol. Beautiful and correct way

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

Now I will continue to introduce you to the most commonly used with html tags, which are used to create lists on site pages. If someone does not know what this is, surely after the information received below they will immediately understand what we are talking about, since this form of presenting the material is very common.

HTML bulleted lists - ul and li tags

The bulleted list will be defined by the ul tag. Between the opening and closing ul tags there are list elements, the contents of each of which must, in turn, be located between the opening and closing li tags. Let me immediately note that the ul tag is paired (the presence of an opening and closing tag), and also block-level, that is, it forms a container that includes elements (lines) formed each time by the li tag. Accordingly, the li tag is paired and lowercase.

The default appearance of a marker is a filled circle. However, you can change its appearance by using the type attribute, which has the following values: disc, circle, square. The disc value (which determines the appearance of the marker as a filled circle) 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 a separate element bulleted list You can give it your own appearance by specifying 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 (a block and pair tag similar to ul). The li tag is also used here as a tag that defines the elements of a numbered list in HTML. A numbered list is a collection of numbered elements. 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

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

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

HTML definition lists - dl, dd, dt tags

Another type of html list is a definition list. It is formed as follows. The content of this list lies between the opening and closing dl tags, which form the container. The dt tag defines a term, and the dd tag describes 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 language html cannot be considered in isolation from, therefore, in order not to miss these important materials, subscribe to blog updates via RSS feed or by e-mail. This concludes the topic of today’s article; if you have received the necessary information, do not refuse to use the social network buttons.

The hypertext markup language HTML has a tag

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

Tag syntax

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

This code translates into a bulleted list on the site:

• Element #1
• Element #2
• Element #3

Tag

requires the mandatory use of a closing tag
.

To form list elements, a paired tag is used. Between the opening and closing tags are individual words, phrases, paragraphs, images, pieces of code, and much more that are the content of the bulleted list.

What can be the content of a bulleted list?

This can be a variety of texts, including single words, phrases and paragraphs, images, nested lists, pieces of php code and much more that need simple marking.

Each bulleted list item is indented 40 pixels to the right by default. Using CSS styles, we may change the display of this list at our discretion. 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-within-a-list attachments are allowed.

For example

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

Tag Attributes and Properties

Widely used tag attribute

is a type attribute indicating what 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 a little higher.

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

For example:

• Element #1
• Element #2

• Element #1
• Element #2

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

For example:

• Element #1
• Element #2

And here's what it looks like on the page:

• Element #1
• Element #2
Note 1

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

• ...

Let's look at what values ​​list-style-type can take:

• disc - marker in the form of a circle (example was above)
• circle - marker in the form of a transparent circle (example was above)
• square - marker in the form of a square (example was above)
• decimal - marker in the form of a numbered list in Arabic numerals: 1, 2, 3, ...
• decimal-leading-zero - a marker in the form of a numbered list in Arabic numerals with a leading zero: 01, 02, 03, ...
• lower-roman - a marker in the form of a numbered list in the Roman alphabet in small letters: i, ii, iii, iv, v
• upper-roman - marker in the form of a numbered list in the Roman alphabet in capital letters: I, II, III, IV, V
• lower-latin - marker in the form of a list in the Latin alphabet in small letters: a, b, c, d, ...
• upper-latin - 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 - a marker in the form of a list in the Greek alphabet in capital letters
Note 2

The attribute can be assigned to the tag itself

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

  The code looks like this:

  • Element #1
  • Element #2
  • Element #3

  • Element #1
  • Element #2
  • Element #3

  Changing Tag Markers

  using CSS

  Bullet list items created by tag

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

  • Element #1
  • Element #2
  • Element #3

  And this is what it looks like on the page:

  • Element #1
  • Element #2
  • Element #3

  C using CSS we can set other types of marker display. But you need to remember that when specifying any style for a tag

  , it applies to all elements of the list.

  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" - a numbered list.

  Tag syntax

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

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

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

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

  The reversed attribute specifies reverse counting (if necessary).

  Tag

  requires the mandatory use of a closing tag

  To form list elements, a paired tag is used

  • . Between the opening and closing tags are individual words, phrases, paragraphs, images, pieces of code, and much more that are the content of the bulleted list.

    Note

    Inside the list you can change the account to your own. There is a special attribute value="" on the tag for this purpose.

  • , 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. HTML numbered list in Latin letters

  Example with capital letters

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

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

  Example with lowercase letters

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

  This is what it looks like on the page:

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

  Example 2. HTML numbered list in Roman letters

  Example with capital letters

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

  This is what it looks like on the page:

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

  Example with lowercase letters

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

  This is what it looks like on the page:

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

  Example 3. Numbered list html different starting position

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

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

  This is what it looks like on the page:

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

  Example 4. Changing the count in html numbered lists

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

  • .

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

    This is what it looks like on the page:

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

    Example 5. Reverse numbered list in html

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

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

    This is what it looks like on the page:

    1. Element #1
    2. Element #2
    3. Element #3
    4. Element #4
    If you decide to change the standard ul and li lists, then this topic will be interesting to you. Because here you will learn several original solutions. Which will definitely help you change standard view to a unique one, where the CSS style goes, for the design of lists. The advantage is that we will use only one class throughout, which will radically change the look. In addition to these parameters, you can specify at what number the list should begin; here you can do everything yourself. The default starting value for numbered lists is at the first or letter A.

    With the basics out of the way, we'll now take a closer look at the elements used to provide structure and meaning to the different parts of the design. If anyone doesn’t know, then ul and li are a much better option than simple text text because when text is wrapped, especially in mobile phone, it indents perfectly and doesn't wrap around the marker.

    Lists are considered a great way to present information on pages because they are easy to read and look good. Many people seem to think that bullet points are little images, but in fact they are all created through fairly simple HTML code. You can embed different types lists into each other if you want, just remember to close them correctly. You can play with the text you want in all these list commands.

    You also need to know that lists initially contain several elements:

    1 . Disorganized information.
    2 . Organized information.
    3 . Definitions.

    Let's start installation:

    1. Option:

    
    
    • List item
    
    
    • Unique list
    
    
    • Original lists
    
    
    • ZORNET.RU - Webmaster
    
    
    • Another list
    
    
    
    CSS

    Ksangelopan (
    margin: 19px 0 0;
    padding:0;
    list-style: none;
    counter-reset: li;
    }
    .ksangelopan li (
    border: 2px solid #3575ad;
    background: #d7dee4;
    position: relative;
    margin-bottom: 17px;
    padding: 15px 9px;
    }
    .ksangelopan li:hover (
    z-index: 1;
    }
    .ksangelopan li:before (
    border: 2px solid #2270b3;
    position: absolute;
    top: -14px;
    padding: 3px 9px;
    font-size: 11px;
    font-weight: bold;
    color: #246eaf;
    background: #f2f4f7;
    counter-increment: li;
    content: counter(li);
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
    }
    .ksangelopan li:hover:before (
    background: #2672b3;
    color: #f7f9fb;
    -webkit-transform: translate(-11px, 0);
    -ms-transform: translate(-11px, 0);
    -o-transform: translate(-11px, 0);
    transform: translate(-11px, 0);
    }
    .ksangelopan li:after (
    content: "";
    position: absolute;
    transition-duration: 0.3s;
    -webkit-transition-property: width;
    transition-property: width;
    z-index: -1;
    background: #FFF;
    height: 100%;
    left: 0;
    top: 0;
    width: 0;
    }
    .ksangelopan li:hover:after (
    width: 100%;
    }

    
    That's all for the installation.

    2 Second option:

    

    
    
    • List item
    
    
    • Unique list
    
    
    • Original lists
    
    
    • ZORNET.RU - Webmaster
    
    
    • Another list
    
    
    
    CSS

    Beleduzlopamges (
    margin-bottom: 8px;
    padding:0;
    list-style: none;
    counter-reset: li;
    }
    .beleduzlopamges li (
    position: relative;
    border: 2px solid #195588;
    background: #eff3f7;
    padding: 15px 19px 15px 27px;
    margin: 12px 0 12px 40px;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    }
    .beleduzlopamges li:hover (
    background: #FFF;
    }
    .beleduzlopamges li:before (
    line-height: 32px;
    position: absolute;
    top: 4px;
    left: -39px;
    width: 39px;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    color: #f9f5f5;
    background: #275b88;
    counter-increment: li;
    content: counter(li);
    transition-duration: 0.2s;
    }
    .beleduzlopamges li:hover:before (
    width:46px;
    }
    .beleduzlopamges li:after (
    position: absolute;
    left: 0;
    top: 4px;
    content: "";
    height: 0;
    width: 0;
    border: 16px solid transparent;
    border-left-color: #275b88;
    -webkit-transition-duration: 0.2s;
    transition-duration: 0.2s;
    }
    .beleduzlopamges li:hover:after (
    margin-left: 6px;
    }

    
    You can independently set the center gamma to match the main style of the site.

    3 Third option:

    

    
    
    • Scripts for uCoz
    
    
    • Templates for uCoz
    
    
    • Website design
    
    
    • Website styles
    
    
    • Styling with CSS
    
    
    
    CSS

    Nizualisanelag (
    padding:0;
    list-style: none;
    counter-reset: li;
    }
    .nizualisanelag li (
    position: relative;
    padding: 9px 17px 17px 25px;
    margin-left: 39px;
    transition-duration: 0.2s;
    cursor: pointer;
    font-weight: bold;
    color: #343638;
    }
    .nizualisanelag li:before (
    border: 3px solid transparent;
    line-height: 35px;
    position: absolute;
    top: 0;
    left:-29px;
    width:41px;
    text-align:center;
    font-size: 14px;
    font-weight: bold;
    color: #619dce;
    counter-increment: li;
    content: counter(li);
    transition-duration: 0.3s;
    
    box-sizing: border-box;
    }
    .nizualisanelag li:hover:before (
    color: #337AB7;
    }
    .nizualisanelag li:after (
    position: absolute;
    top: 0;
    left: -29px;
    width: 41px;
    height: 41px;
    border: 5px solid #468bd0;
    border-radius: 50%;
    content: "";
    opacity: 0.5;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }
    .nizualisanelag li:hover:after (
    animation: 500ms ease-in-out 0s bounceIn;
    opacity: 1;
    }

    @keyframes bounceIn (
    0% {
    opacity: 0;
    transform: scale3d(.3, .3, .3);
    }
    20% {
    transform: scale3d(1.3, 1.3, 1.3);
    }
    40% {
    transform: scale3d(.9, .9, .9);
    }
    60% {
    opacity: 1;
    transform: scale3d(1.03, 1.03, 1.03);
    }
    80% {
    transform: scale3d(.97, .97, .97);
    }
    to(
    opacity: 1;
    transform: scale3d(1, 1, 1);
    }
    }

    
    Comes with beautiful animation.

    4 Fourth option:

    

    
    
    • The first element for the site
    
    
    • Second element for the site
    
    
    • Third element for the site
    
    
    • The fourth element for the site
    
    
    • The fifth element for the site
    
    
    
    CSS

    Padding:0;
    list-style: none;
    }
    .kudezamuden li(
    padding:6px;
    }
    .kudezamuden li:before (
    padding-right: 11px;
    font-weight: bold;
    color: #4979a0;
    content: "\2606";
    transition-duration: 0.4s;
    }
    .kudezamuden li:hover:before (
    color: #235e90;
    content: "\2605";
    }

    
    Similar previous versions, only the icon itself has been changed.

    In general, this is a small selection of lists that the web master can make nice list on the portal, where he himself can design it more, as he himself wants to see it.

    If you need to put items in a numbered list instead of a bulleted one, then ordered HTML will be used. This list is created using the ol tag. Numbering starts at one and increases by one for each subsequent ordered list element with the li tag.

    HTML lists used to group related pieces of information. There are three types of lists:

    bulleted list —

    - each element of the list
    • marked with a marker,
      numbered list —
      - each element of the list
      1. marked with a number
         list of definitions- - consists of term pairs
         —
         definition.

         Each list is a container within which list elements or term-definition pairs are located. List elements behave like block elements, stacked underneath each other and occupying the entire width of the container block. Each list item has an additional block located on the side, which does not participate in the layout.

         Creating HTML Lists

         1. Bulleted list

         Bulleted list is an unordered list (from English Unordered List). Created using tag pair

         . The marker of a list element is a label, for example, a filled circle.

         Browsers by default add the following formatting to the list block:

         Each list element is created using a paired tag

      2. (from English List Item).
      available .
      • Microsoft
      • Google
      • Apple
      Rice. 1. Bulleted list

      2. Numbered list

      Numbered list is created using a paired tag. Each list item is also created using the element

    • . The browser numbers the elements in order automatically, and if you delete one or more elements of such a list, the remaining numbers will be automatically recalculated.

      The list block also has default browser styles:

    • The value attribute is available, which allows you to change the default number for the selected list item. For example, if for the first item in the list you set
    • , then the remaining numbering will be recalculated relative to the new value.

      For tag

      The following attributes are available:
      Table 1. Tag attributes

      Attribute	Description, accepted value
      reversed	The reversed attribute causes the list to be displayed in reverse order (for example, 9, 8, 7...).
      start	The start attribute specifies the initial value from which the numbering will begin, for example, a construction the first item will be assigned the serial number “10”. You can also specify the numbering type at the same time, for example, .
      type	The type attribute specifies the type of marker to use in the list (letters or numbers). Accepted values: 1 — default value, decimal numbering. A — list numbering in alphabetical order, capital letters (A, B, C, D). a — list numbering in alphabetical order, lowercase letters (a, b, c, d). I - numbering in Roman capital numerals (I, II, III, IV). i — numbering in Roman lowercase numerals (i, ii, iii, iv).

      1. Microsoft
      2. Google
      3. Apple
      Rice. 2. Numbered list

      3. List of definitions

      Lists of definitions are created using a tag

      . To add a term, use a tag
      , and to insert a definition - the tag
      .

      The definition list block has the following default browser styles:

      For tags

      ,

      And

      available .

      Director:

      Peter Tochilin

      Cast:

      Andrey Gaidulyan

      Alexey Gavrilov

      Vitaly Gogunsky

      Mariya Kozhevnikova

      
      Rice. 3. List of definitions

      4. Nested list

      Often, the capabilities of simple lists are not enough; for example, when creating a table of contents, there is no way to do without nested items. The markup for the nested list would be as follows:

      • Paragraph 1.
      • Point 2.
        • Subclause 2.1.
        • Subclause 2.2.
          • Subclause 2.2.1.
          • Subclause 2.2.2.
        • Subclause 2.3.
      • Point 3.

      
      Rice. 4. Nested list

      5. Multi-level numbered list

      A multi-level list is used to display list items at different levels with different indentations. The markup for a multi-level numbered list would be as follows:

      1. paragraph
      2. paragraph
         1. paragraph
         2. paragraph
         3. paragraph
            1. paragraph
            2. paragraph
            3. paragraph
         4. paragraph
      3. paragraph
      4. paragraph

      This default markup will create a new numbering for each nested list, starting with one. To create nested numbering, you need to use the following properties:
      counter-reset resets one or more counters, specifying the value to be reset;
      counter-increment specifies the counter increment value, i.e. in what increments each subsequent item will be numbered;
      content - generated content, in this case it is responsible for displaying the number before each list item.

      Ol ( /* remove the standard numbering */ list-style: none; /* Identify the counter and give it the name li. The counter value is not specified - by default it is 0 */ counter-reset: li; ) li:before ( /* We define the element that will be numbered - li. The before pseudo-element indicates that the content inserted using the content property will be placed before the list items. Here we also set the value of the counter increment (default is 1). */ counter-increment: li; / * The content property displays the number of the list item. counters() means that the generated text represents the values ​​of all counters with that name. A period in quotation marks adds a separating period between numbers, and a period with a space is added before the content of each list item */ content: counters(li,".") "."; )
      Rice. 5. Multi-level numbered list