The ol tag specifies. Numbered list

Description

Attributes

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

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

Start: Sets the starting integer value from which the numbering of elements in the list will begin. Example » type: Defines the type of marker to be used for list items:

1 - decimal numbers (1, 2, 3, 4 ...).
A- Latin letters in alphabetical order, in uppercase(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 lower case (i, ii, iii, iv ...).

Tag

Default style

Example

Coffee
Tea
Milk

Coffee
Tea
Milk

The hypertext markup language HTML has a tag

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 can change the display of this list as we wish. Tag

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

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

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

The attribute can be assigned to the tag itself

. When setting an attribute to a tag

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

Element #1

Element #2

Element #3

And this is what it looks like on the page:

Element #1
Element #2
Element #3

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

Element

Tag

Items for numbered lists are defined using a tag

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

Note: If to

CSS property

inherit these properties.

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

Syntax

Closing tag

Required.

Attributes

Available for this item global attributes And events.

Default styling

Most browsers will display the element

CSS values

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:

Coffee
Tea
Cocoa

Specifications

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 can I make the list start with a number other than 1?

Task

Display a bulleted list horizontally without bullets.

Solution

Bullet tag

vertically above each other. To create navigation elements, in some cases it is convenient to display the list horizontally. There are several ways to achieve this list display.

You should already know that HTML has block and inline elements. Inline elements do not create their own blocks; an example of such elements is tags or . Block elements are displayed on a new line and create a rectangular block, an example of such tags
or
So here's the tag
is also a block element.

To tag

did not behave like a block element, you can use CSS to make it inline.

The CSS property display determines how the element will be displayed in the document. Let's consider three of its meanings (although there are more):

block - the element is displayed as a block element.

inline - the element is displayed as inline.

inline-block - block-line element, read more about this type of element below, we will use it.

First, let's make a horizontal list by turning its bullet points into inline elements. In CSS style, let's write a rule in which the li selector is set to display property with the value inline .
List horizontally

Paragraph 1

Point 2

Point 3

So, this style worked and we got a horizontal arrangement of list items:
Figure 1. Example #1 at work.
This method has disadvantages. The fact is that inline elements have some limitations compared to block elements. For example, they cannot be given width and height, but block ones can.

For example, we need the menu element we create to have a width of 150px and a height of 40px. Let's try to change the style to the following, that is, add two rules that set the size of the menu item:

These edits will not lead to any changes. In order for menu items to be positioned horizontally and to be able to set their width and height, they need to set the type to inline-block . Let's change our example code:
List horizontally

Paragraph 1

Point 2

Point 3

This code works and the changes are visible:

Figure 2. Example No. 2 in action.
But there may be different options, for example we need to display nested lists in the menu:
Nested list.

Edit

Cancel

Cut

Copy

Insert

Typeface

Bold

Italic

Underlined

Size

Small

Normal

Average

Big

Here is the result of this code:

Figure 3. Example No. 3 at work.
We see that the blocks are not aligned in height as we would like. Of course, you can specify the same height for all blocks, but we don’t always know its exact value in advance, and it can change.

But actually, why does this happen?

Our blocks have a display property set to inline-block . This means that they have the qualities of both block elements (the ability to specify width and height) and inline elements. What we are seeing is the quality of the inline elements.

Let's look at a string with "A" characters of different sizes:

A A A A A A A

We see that all letters are vertically aligned along the bottom line. More precisely, along the baseline, but let’s not get into the weeds now. So, the same thing happened with our blocks.

To align text vertically, use vertical-align property. In our example #3, we need to use the value top , which will align the top border of the element to the top of the tallest element on the line.

For now let's apply it to a string with "A" characters of different sizes:

A A A A A A A

The letters seem to "jump" a little. I set the CSS border to the tallest letter to show that there are actually no jumps, just empty space between the top border (where the alignment occurs) and the top point of the "A".

The vertical-align property must be applied to each inline element, it is not inherited. You can read more about this property: vertical-align .

After this digression, we will continue to place the list elements horizontally.

Second way

You can place list items horizontally using the float property. This property specifies which side the element is aligned on, and has two positions: left and right .

Here's an example using this code:
List horizontally

Paragraph 1

Point 2

Point 3

Here is the result of the code:
Figure 4. Example working.
The example seems to work. But there is one caveat in using this property. Now we will look at it. For example, let's take a code in which there are two horizontal list With in different ways arrangement of elements horizontally: display and float:
List horizontally

Paragraph 1

Point 2

Point 3

Paragraph 1

Point 2

Point 3

Here is the result of the code:
Figure 5. Example working.
In these examples the list containers
have a red border 1 pixel thick. But the top list, which uses the display property, includes list items. But the elements of a list created using the float property fall out of their container.

At first glance, everything works. But let's swap our lists. Let's put the list with the menu-1 class in the code before the list with the menu-2 class (now it is lower).

This is what we get as a result:
Figure 6. Example working.
The items in the bottom menu also wrap around the top menu, because the effect of the float property has not been canceled and it applies to all subsequent elements.

How to solve this problem?

To do this, you need to use the clear property, it cancels the element's wrapping around another element if it has the float property set.

Here's a modified example using the clear property:
List horizontally

Paragraph 1

Point 2

Point 3

Paragraph 1

Point 2

Point 3

It can be seen that the lower list no longer wraps around the upper one, the elements do not collide with each other. But in the first list there are tags
are still located outside the container
.
Figure 7. Example working.
In addition, in work we do not always know which element will follow the element using float. The ideal option would be to close the operation of the float property in the same block in which it is open.

This is done using a pseudo element. Here's the code:
List horizontally

Paragraph 1

Point 2

Point 3

Paragraph 1

Point 2

Point 3

Now we have 100% working code.
Figure 8. Example working.
This technique with the float property is usually used when designing websites to align columns created by tags
. In this way we get a normal construction of columns with the required height alignment. When we create a menu, in most cases the height of the blocks is not important to us; it is almost always the same. Therefore, using the rule (display: inline-block) in these cases is quite justified.

But for the completeness of the topic, we have familiarized ourselves with all the possible options. Although there may be other ways, for example, using CSS tables, search engines strongly recommend using tables only for their intended purpose, and not for organizing navigation elements or anything else.

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
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, located one below the 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 a paired tag
. 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
(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).

Microsoft

Google

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:

paragraph

paragraph

paragraph

paragraph

paragraph

paragraph

paragraph

paragraph

paragraph

paragraph

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 in this case 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

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).

The ol tag specifies. Numbered list

Description

Attributes

Default style

Example

Tag Attributes and Properties

Changing Tag Markers using CSS

Syntax

Closing tag

Attributes

Default styling

Differences between HTML 4.01 and HTML5

Usage example:

Example HTML:

Specifications

Browser support

Try it yourself - Examples

Second way

Creating HTML Lists

1. Bulleted list

2. Numbered list

3. List of definitions

4. Nested list

5. Multi-level numbered list

Changing Tag Markers
using CSS