The ol tag in html means. How do I arrange list items horizontally? Changing tag markers with CSS

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 at your own 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-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

  C using CSS we can define other types of marker display. But you need to remember that when setting any style for the tag

  , it applies to all elements of the list.

  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 that 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 will be 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 individual element You can customize the bulleted list 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 (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 item in a numbered list 2 item in a numbered list 3 item in a numbered list
  1 item in a numbered list 2 item in a numbered list 3 item in a numbered list	1 item in a numbered list 2 item in a numbered list 3 item in a numbered list
  1 item in a numbered list 2 item in a numbered list 3 item in a numbered list	1 item in a numbered list 2 item in a numbered list 3 item in a numbered list
  1 item in a numbered list 2 item in a numbered list 3 item in a numbered list	1 item in a numbered list 2 item in a numbered list 3 item in a numbered list
  1 item in a numbered list 2 item in a numbered list 3 item in a numbered list	1 item in a numbered list 2 item in a numbered list 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.

  HTML lists are used to group related pieces of information together. 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,
       definition list- - consists of pairs of term
       —
       definition.

       Each list is a container that contains list items or term-definition pairs. List items behave like block items, stacking one under the other and taking up the entire width of the container block. Each list item has an additional box on the side that does not participate in the layout.

       Generating HTML Lists

       1. Bulleted list

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

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

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

       Each list item is created using a pair 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 rest of the numbers will be automatically recalculated.

    The list box 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 rest of the 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 specifies the display of the list in reverse order (for example, 9, 8, 7 ...).
    start	The start attribute specifies initial value, from which the numbering will start, for example, the construction the first item will be assigned a serial number "10". You can also set the numbering type at the same time, for example, .
    type	The type attribute specifies the kind of marker to use in the list (as letters or numbers). Accepted values: 1 - default value, decimal numbering. A - numbering of the list in alphabetical order, capital letters(A, B, C, D). a - numbering the list in alphabetical order, lowercase letters (a, b, c, d). I - numbering in Roman capital numerals (I, II, III, IV). i - numbering in Roman lowercase digits (i, ii, iii, iv).

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

    3. List of definitions

    Definition lists are created using the tag

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

    The definition list box has the following default browser styles:

    For tags

    ,

    and

    available.

    Director:

    Petr 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, you cannot 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. Multilevel numbered list

    A layered list is used to display list items at different levels with different indents. The markup for a multilevel 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 starting with one for each nested list. To make nested numbering, you need to use the following properties:
    counter-reset resets one or more counters, setting a value to reset;
    counter-increment specifies the value of the counter increment, i.e. with what step each subsequent item will be numbered;
    content - the generated content, in this case it is responsible for displaying the number before each item in the list.

    Ol (/ * remove the standard numbering * / list-style: none; / * Identify the counter and name it li. The counter value is not specified - by default it is 0 * / counter-reset: li;) li: before (/ * We define the element to be numbered - li. The pseudo-element before specifies that the content inserted using the content property will be placed before the list items. It also sets 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 is the values ​​of all counters with that name. The quoted period adds a separating period between numbers, and a period with a space is added before the contents of each list item * / content: counters (li, ".") ".";)
    Rice. 5. Multilevel numbered list

  Let's continue our conversations about the beginnings of html. In this article, I want to talk about how to create paragraphs, lists, and headings in text. And also, about single tags
  and

  ---

  .

  I strongly advise you to read the first lesson in this series, as well as an introductory article on getting started learning html for those who are not yet familiar with them.

  We will now continue our study of tags. I will assume that the reader is already familiar with the material of the above articles.

  As always, the work plan:

  1. Paragraphs
  2. Line breaks
     
  3. Lists, and list items
  4. Headings
  5. Horizontal rulers

     ---

  Paragraphs

  The text is almost always made up of paragraphs. A paragraph is an element of text that carries a complete idea.

  V html paragraph, as can be judged from the title, is indicated by. The letter "p" is taken from the word "paragraph", which just means "paragraph".

  Let's consider an example:

  First paragraph text. It contains thought. But the thought ended.
  

  
  

  Another thought has already begun and we are writing it in another paragraph.
  

  As you can see, the application of paragraphs is very simple and does not require any special comments. If we look at this code in a browser, we will see two lines with one blank line between them. In Russian texts, it is customary to separate a paragraph not by an empty line, but by shifting the first line to the right. But on the Internet just such formatting is often used, therefore it is often left in Russian-language texts as well. However, if this behavior does not suit you, you can change it using CSS.

  Line breaks
  

  Sometimes you need to translate a line without ending the thought, without closing the paragraph. That is, just go to new line... There is a single tag for this
  ... Here is an example of its application:

  The wind walks merrily
  
  And the boat urges
  
  He runs to himself in the waves
  With the sails raised.
  

  This fragment of a poem by A.S. Pushkin helped us illustrate the action of the tag
  ... I deliberately placed the last two lines of this quatrain in one line of code to show that lines are wrapped on a new line not because we placed line breaks, but because we placed tags
  ... This tag is very simple and does not need a detailed explanation, so this is where we will finish discussing it.

  Lists,

  and list items

  Sometimes you need to list something in the text. Three tags are used for this purpose: ul, ol, li. All of these tags are container tags, but the tag is always contained in one of the containers or, and does not make sense outside of them. The ul container is used when we don't care about the order of the listed items, and we don't want to focus on the order in which they go. The ol tag, on the other hand, focuses on the sequence of elements by automatically numbering each line. Let's consider an example:

  
  
  • Bulka
  
  
  • Pie
  
  
  • Loaf
  
  
  • Pie
  
  

  On the browser screen, this code will look like this:

  • Bulka
  • Pie
  • Loaf
  • Pie

  If we just replace the ul tag with the ol tag, we get a numbered list:

  
  
  1. Bulka
  
  
  2. Pie
  
  
  3. Loaf
  
  
  4. Pie
  
  

  It now looks like this:

  1. Bulka
  2. Pie
  3. Loaf
  4. Pie

  Nobody forbids nesting one list into another, forming nested lists with sublists:

  
  Instruments:
  
  • Saw
  
  
  • Screwdriver
    
    
    
    1. Straight
    
    
    2. Cross
    
    
    
    
  
  
  • Drill
  
  

  You need to experiment a little with these lists to get used to using them. There is another type of lists, but it is rarely used, so I will not talk about it now. Maybe in another article.

  Of course, like everything else, the appearance of these elements can be changed beyond recognition with CSS.

  Headings

  Of course, paragraphs help in structuring documents. But in order to break up a large text into smaller logical parts, you can caption each of them. Each part can contain more subparts, with their own lower-level headings, and so on. To set the title, use the tags , where "x" is a number from 1 to 6. The higher the number, the lower the heading. That is, the top-level heading will be h1, and the bottom-most heading h6. By default, the text in these headings is displayed in large, indented font. This text is displayed on the whole line, that is, hx tags are block-based. The h1 tag has the largest font, and the h6 tag has the smallest. As a rule, there is one, maximum - two top-level h1 tags on the page. As the level decreases, the number of tags increases. But rarely will a webmaster be able to break up text in such a way that he needs 5 or 6 headings. Even the 4th level is rarely used.

  Talk less, work more!

  Element

  (from the English "unordered list" - "unordered list") creates an unordered (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.