home > A computer > Tags are used to design numbered lists. Styling line numbers (numbers) in ordered lists ol

Tags are used to design numbered lists. Styling line numbers (numbers) in ordered lists ol

Description

Attributes

reversed: Specifies that the elements of the list will be in descending order (instead of ascending order). Possible boolean attribute values:

Note: the reversed attribute is only supported Chrome browsers and Safari.

Start: Sets the starting integer value from which the items in the list will be numbered. Example » type: Specifies the type of marker to be used for list items:

1 - decimal numbers (1, 2, 3, 4...).
A- latin letters in alphabetical order, in upper case(A, B, C, D...).
a- latin letters in alphabetical order, in lower case(a, b, c, d...).
I- Roman numerals in uppercase (I, II, III, IV ...).
i- Roman numerals in lowercase (i, ii, iii, iv ...).

Tag

Default style

Example

Coffee
Tea
Milk

Coffee
Tea
Milk

Let's continue our talk 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 of this series, as well as an introductory article about the beginning of learning html for those who are not yet familiar with them.

Now we will continue to study tags. I will assume that the reader is already familiar with the material of the above articles.

As always, the work plan:

paragraphs
Line breaks
Lists, and elements of lists
Titles
Horizontal rulers

paragraphs

The text almost always consists of paragraphs. A paragraph is an element of text that carries a complete thought.

AT html paragraph, as can be seen from the title, is denoted by . The letter "p" is taken from the word "paragraph", which once again means "paragraph".

Consider an example:

The text of the first paragraph. It contains thought. But that's where the thought ends.

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

As you can see, the use of paragraphs is very simple and does not require much comment. 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 such formatting is often used on the Internet, so it is often left in Russian-language texts. However, if this behavior does not suit you, you can change it using CSS.

Line breaks

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

The wind blows merrily

And the boat is pushing

He runs in waves
On raised sails.

This fragment of a poem by A.S. Pushkin helped us illustrate the effect of the tag
. I deliberately placed the last two lines of this quatrain in one line of code to show that the lines are wrapped to a new line not because we placed line breaks, but because we placed tags
. This tag is quite simple and does not need detailed explanations, so we will end our discussion of it here.

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 has no meaning outside of them. The ul container is used when we don't care about the order in which the items are listed, and we don't want to focus on the order in which they appear. And the ol tag, on the contrary, focuses on the sequence of elements, automatically numbering each line. Consider an example:

Bulka

Loaf

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

Bulka
Pie
Loaf
Pie

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

Bulka

Loaf

Now it looks like this:

Bulka
Pie
Loaf
Pie

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

Screwdrivers
1. Straight
2. cross

Drill

It takes a bit of experimentation with these lists to get used to using them. There is another type of list, but it is rarely used, so I will not talk about it now. Maybe in another article.

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

Titles

Of course, paragraphs help in structuring documents. But in order to break big text into smaller logical parts, you can name each of them. Each part can contain more subparts, with their own lower-level headings, and so on. Tags are used to set the title. , where "x" is a number from 1 to 6. The heading is the lower level, the higher this number. That is, the title of the top level will be called h1, and the lowest - h6. By default, the text found in these headings is displayed in a large, indented font. This text is displayed on the entire line, that is, hx tags are block tags. The h1 tag has the largest font, and the h6 tag has the smallest font. 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 is a webmaster able to break up text in such a way that he needs level 5 or 6 headings. Even level 4 is rarely used.

Talk less, work more!

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

bulleted list —

marked with a marker
numbered list —
1. marked with a number
  list of definitions— — consists of term pairs
  —
  definition.
  Each list is a container containing list elements or term-definition pairs. List elements behave like block elements, stacked one below the other and taking up the full width of the container block. Each list item has an additional box on the side that is not part of the layout.
  
  Creating HTML Lists
  
  1. Bulleted list
  
  bulleted list is an unordered list (from English Unordered List). Created with paired tag
  . A list item marker is a label, such as a filled circle.
  Browsers add by default following formatting list block:
  Each element of the list is created using a pair tag
2. (from English List Item).
- Microsoft
- Google
- Apple
Rice. 1. Bulleted list
2. Numbered list

numbered list created using the pair tag . Each list item is also created with an element
. The browser numbers the elements in order automatically, and if one or more elements of such a list are deleted, the remaining numbers will be automatically recalculated.
The list block also has the default browser styles:
the value attribute is available, which allows you to change the default number for the selected list item. For example, if the first item in the list is set to

, then the rest of the numbering will be recalculated relative to the new value.

For Tag

Attribute	Description, accepted value
reversed	The reversed attribute specifies to display 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 the 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 (in the form of letters or numbers). Accepted values: 1 is the default value, decimal numbering. A - numbering of the list in alphabetical order, capital letters (A, B, C, D). a - numbering of 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 numerals (i, ii, iii, iv).

Microsoft
Google
Apple

3. List of definitions

Definition Lists created with a tag

The definition list block has the following default browser styles:

For tags

and

available .

Producer:: Petr Tochilin
Cast:: Andrey Gaidulyan; Alexey Gavrilov; Vitaly Gogunsky; Mariya Kozhevnikova

Rice. 3. List of definitions

4. Nested List

Often the possibilities of simple lists are not enough, for example, when creating a table of contents, you can’t do without nested items. The markup for a nested list would be:

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 multilevel list is used to display list items at different levels with different indents. The markup for a multi-level numbered list would be:

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

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

Ol ( /* remove the standard numbering */ list-style: none; /* Identify the counter and give it the name li. The value of the counter 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. The counter increment value is also set here (default is 1) */ counter-increment: li; / * The number of the list item is output using the content property.counters() means that the generated text is the values of all counters with that name.The quoted period adds a separating dot between the digits, and a period with a space is added before the content of each list item */ content: counters(li,".") ". "; )
Rice. 5. Multilevel numbered list

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

as shown below.

First point
Second point
Third paragraph

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

Example 11.3. Create a numbered list

numbered list

Working with time

creating punctuality (you will never be late for anything);
cure for punctuality (you will never rush anywhere);
change in the perception of time and clocks.

Result this example shown in fig. 11.3.

Rice. 11.3. Numbered list view

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

The following values can act as numbering elements:

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

The type attribute of the tag is used to indicate the type of the numbered list.

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

To start the list with certain value, the start attribute of the tag is used

Example 11.4. List numbering

Roman numerals

King Magnum XLIV
King Siegfried XVI
King Sigismund XXI
King Husbrandt I

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

Rice. 11.4. Numbered list with Roman numerals

Significance and application

A numbered (ordered) list is intended for elements that follow in a certain order. Numbered list starts with tag

ordered list

(list item).

Browser Support

Attribute			Opera		IExplorer	edge
start , type	Yes	Yes	Yes	Yes	Yes	Yes
reversed	Yes	Yes	Yes	Yes	Not	Not

Attributes

Attribute	Meaning	Description
compact	compact	Not supported in HTML5. Specifies that the list should be smaller than the normal size (line-height : 80% ). Use CSS instead of this attribute.
	reversed	Specifies that the order in a numbered (ordered) list should be descending. Attribute not supported Internet browsers Explorer and Edge.
start	number	Specifies the initial value of an ordered (ordered) list. Values must be integers, negative values are allowed. When used with letters (type = "A" and type = "a" ), the number specified in the attribute value is the ordinal number of the letter in the alphabet. For example, start = "4" will match the letter "D" and the list will start with her. When using the value start = "27", the counter is reset to zero, and the list becomes two-digit ("27" = "AA", "28" = "AB", "29" = "AC"...).
type	1 (default) A (large) a (lower case) I (Roman large) i (Roman small)	Specifies the type of marker that is used in constructing an ordered (ordered) list.

Usage example

Tag usage example <ol> <span>

First pointSecond paragraph
Third paragraph

It will look like this on the page:

First point.
Second point.
Third point.

If you want the list to start at a specific number (not 1), then you must specify the start attribute for the tag

For example:

Another interesting attribute is type , which allows you to specify alphabetic numbering ("A" - uppercase, "a" - lowercase), or numbering from Roman numerals ("I" - uppercase, "i" - lowercase).

Consider an example that presents all possible values of the type attribute (other than the default value):

An example of using the type attribute of an HTML tag<оl>

First pointSecond paragraph
Third paragraph

First pointSecond paragraph
Third paragraph

First pointSecond paragraph
Third paragraph

First pointSecond paragraph
Third paragraph

I draw your attention to the fact that it is allowed to form numbered (ordered) lists nested in other numbered lists (inside the list element

):
Example of a numbered list nested within another numbered list <span>
1. First point
  1. First pointSecond paragraph
  2. Third paragraph
  3. Third paragraph