home > Internet > Which tag is used for the numbered list. Lists in HTML - bulleted list - numbered list - definition list - nested lists in HTML

Which tag is used for the numbered list. Lists in HTML - bulleted list - numbered list - definition list - nested lists in HTML

Using HTML lists, you can create a menu for your site with different items and sub-items. Using lists, the content (map) of the site is created, which is very convenient for search engines.

And so, there are "" tags - they define a bulleted list.
Tags "" – define items, that is, elements of a bulleted list.

First, let's create a simple list of several items:

<html > <head > <title > Simple marked HTML listtitle > head > <body > <ul > <li > Oneli > <li > Twoli > <li > Threeli > <li > Fourli > ul > body > html >

Three

For html markings, you can set some types that are written inside
first tag "

type=" "

Let's create a list in which instead of points there will be small circles (punctured dots). This type is called " circle"

html >

head >

title >

body >

ul type= "circle">

li >

Four

Now, instead of the "circle" type, let's set the "type" square" (squares)

html >

head >

title >

body >

ul type= "square">

li >

The CSS lessons cover working with lists in detail, from which you can learn how to set colors for items and text in them, as well as how to set the type of marker itself (it can be not only a square
or a dot - it can be almost any symbol).

Numbered lists html

Lists can not only be labeled, but also numbered, as sometimes this is necessary. These can be numbers (1, 2, 3...) And letters of the English alphabet in lower and uppercase. Consider everything described above.

In order to set the numbering, the "" tags are used.
The type is specified inside the first tag.

Numbering by numbers (from one)

html >

head >

title >

body >

ol >

li >

Four

If you need the numbering to start from zero (zero) or from three, for example, then you need to write tags in the first start=" " and the required number.

html >

head >

title >

body >

ol start= "0" >

li >

Now let's look at how to set "letter numbering".

IN lowercase:

html >

head >

title >

body >

ol type= "a">

li >

Mercury
Venus
Earth

In uppercase:

html >

head >

title >

body >

ol type= "A">

li >

Jupiter
Saturn
Neptune
Pluto

In addition to the usual lists in html, you can create multi-level lists, that is, subsections for certain points. To do this, after the tag and title "

title "insert another list and then close it with a second tag"

html >

head >

title >

body >

ul type= "square" >

li >

ul >

li >

Violin
Guitar
- classical
- rhythm guitar
- electric guitar
Drums
Dudochka

The next lesson will look at creating a simple menu based on the knowledge gained from this lesson.

Numbered lists are a collection of elements with their serial numbers. The type and type of numbering depends on the element parameters

Arabic numerals (1, 2, 3, ...);
Arabic numerals with a leading zero for numbers less than ten (01, 02, 03, ...,10);
capital Latin letters (A, B, C, ...);
lowercase Latin letters (a, b, c, ...);
uppercase Roman numerals (I, II, III, ...);
lowercase Roman numerals (i, ii, iii, ...);
Armenian numbering;
Georgian numbering.

From a practical point of view, the principles of displaying items in a bulleted list can be applied in a similar way to a numbered list. But given that we are dealing with an enumeration, there are some features that will be discussed further.

List numbering

It is allowed to start the list from any number; the element's start attribute is used for this purpose

. The value is any positive integer. It does not matter what type of numbering is set, even if Latin letters are used as a list. If both the start and value attributes are applied to a list at the same time, then the latter takes precedence and the numbering is displayed from the number specified by value , as shown in Example 1.
Example 1: Changing the list numbering
Lists
1. You should take good care of your workplace.
2. Adjust the lighting in the room so that the light source is located to the side or behind the operator.
3. To avoid medical complications, it is recommended to choose a chair with a soft seat.
The first element of the list in this example will begin with the Roman numeral IV, since the start="4" attribute is specified, then comes the number V, and the last element comes out of order and is assigned the number X (Figure 1).
Rice. 1. Roman numerals in the list
Writing numbers
By default, a numbered list has certain type: the number comes first, then the dot, and then the text is displayed separated by a space. This form of writing is visual and convenient, but some developers prefer to see a different way of designing the numbering of lists. Namely, so that instead of a dot there is a closing bracket, as shown in Fig. 2 or something similar.
Rice. 2. Numbered list view with bracket
Styles allow you to change the type of list numbering using the content and counter-increment properties. First, the ol selector needs to be set to counter-reset : item , this is necessary so that the numbering in each new list starts anew. IN otherwise, the numbering will continue and instead of 1,2,3 you will see 5,6,7. The item value is a unique identifier for the counter; we choose it ourselves. Next, you need to hide the original markers through the style list-style-type property with the value none .
The content property typically works in conjunction with the ::after and ::before pseudo-elements. Thus, the li::before construction says that some content must be added before each element of the list (example 2).
Example 2. Creating your own numbering
Li::before ( content: counter(item) ") "; /* Add a parenthesis to the numbers */ counter-increment: item; /* Set the name of the counter */ )
The content property with the value counter(item) displays a number; By adding a parenthesis, as shown in this example, we get the required type of numbering. counter-increment is needed to increase the list number by one. Note that the same identifier, named item , is used throughout. The final code is shown in Example 3.
Example 3: Changing the list view
Lists
1. First
2. Second
3. Third
4. Fourth
Using the above method, you can make any type of numbered list, for example, put a number in square brackets, in this case only one line will change in the styles.
Content: "[" counter(item) "] ";
List with Russian letters
There is a numbered list with Latin letters, but there are no Russian letters for the list. They can be added artificially using the above technique. Since the numbering is done through styles, the list itself remains original, only the selected class is added to it, let’s call it cyrilic (example 4).
Example 4: Code to create a list
1. One
2. Two
3. Three
Adding letters is done using the ::before pseudo-element and the content property. Since each line must have its own letter, we will use the pseudo-class :nth-child(1) , with the letter number written in parentheses. The first letter, naturally, is A, the second is B, the third is C, etc. This entire set is added to the li selector as follows (example 5).
Example 5: Using the pseudo-class:nth-child
Cyrilic li:nth-child(1)::before ( content: "a)"; ) .cyrilic li:nth-child(2)::before ( content: "b)"; ) .cyrilic li:nth-child(3)::before ( content: "at)"; )
In this example, each letter is followed by a parenthesis, all letters are lowercase. You can determine own view list numbering, for example it can contain capital letters with a dot, with one or two brackets, or only letters. Unlike standard numbering, we are free to do whatever we want here. A list of ten letters should be enough for almost all situations, but if this suddenly turns out to be not enough, nothing prevents us from expanding our list to include at least all the letters of the Russian alphabet.
We finally adjust the alignment and position of the letters, optionally specify the font size, color and other parameters (example 6).
Example 6. List with Russian letters
List
1. Borsch
2. Pike cutlets
3. Kulebyaka
4. Mushrooms in sour cream
5. Pancakes with caviar
6. Kvass
Result this example shown in Fig. 3.

IN HTML language There are two types of lists: numbered and unnumbered. Their creation is almost the same. Even the tags differ by one character. You can also create which can include both numbered and marker ones.
These lists can be transformed in any way you like. It all depends on your imagination. First we'll look at standard lists, same as in Word editor, and then we will improve them and design them beyond recognition.
HTML Numbered List
A regular numbered one can be created using the following tags:
First list item

Second list item

Third item on the list

Simple lists look like this

According to standards, each list item must be inside an opening and closing li tag. But if you don't put the closing tag, the result will be exactly the same. The processor is quite smart. During list conversion, it parses the opening tags. If he sees a new one

, then automatically puts in front of it

Thus, lists can be made as shown below.

But from the point of view of professionals, this is incorrect.

Unnumbered (or bulleted) lists are created in the same way, only instead of the ol tag, ul is written.

There are no numbers or letters - only various symbols called markers.

HTML multi-level numbered list

Many users are interested in this opportunity. Therefore, it should be noted that any HTML numbered list can be made multi-level. Additional levels may be the same or labeled.

To create the list shown in the example above, you need to write the following.

Please note that in this code, unlike the first examples, the type attribute is added. Thanks to it, you can specify the sorting type for both numbered and bulleted lists.

For numbered ones we indicate the alphabet or type of numbers, and for other cases - the type of marker.

If you use a special HTML tag, the numbered list can become anything you want.

You can specify the type attribute with any value from the table. Or in the css style class, specify list-style-type with the desired sorting type.

Translation of values is quite simple. Enough basic knowledge in English. But even if you cannot translate the words “circle”, “square”, etc., you can visually understand what the result will be when specifying these values in the type attribute.

For numbered lists, use the following options:

1 - Arabic numerals;
A - capital letters;
a - lowercase Latin letters;
I - capital Roman numerals;
i - lowercase Roman numerals.

The default is always a list with That is, if you don't specify anything, it's the same as type="1".

In addition, numbered lists can begin at any desired position. By default, the output starts from 1. But if you wish, you can start at least from a hundred. To do this, you need to specify the start attribute with any value.

In addition, you can draw the conclusion in reverse order. To do this you need to write reversed.

Design of lists

An HTML numbered list can be designed so beautifully that you may not immediately realize that this is a regular list and not a picture made in Photoshop.

Here are examples of beautiful lists.

As can be seen from the example, you can change appearance numbering and the elements themselves.

You can create a regular list like this.

IN css styles you need to specify the design for the ol tags. Please note that in this case the settings will be applied to all lists throughout the site where this style file is used.

Let's first consider the option with a round list design. Return to the list code. The class rounded-list is indicated there. This is the class you need to tinker with to create such beauty. You can name the class whatever you want.

Now let's look at the square design.

The styles are quite similar. The difference is that in the first case the element is rounded using CSS capabilities.

A professional layout designer must anticipate and understand that not all users use modern computers. Not everyone has Windows 7, 8, 10 installed. There is a percentage of users who are still on Windows XP and use old versions of the Internet Explorer browser.

As a rule, almost all modern design improvements to elements are not supported by them. It will seem to the user that no work was done on the site design at all. That everything has moved away. Elements collide with each other. To avoid this, you need to consider all options.

Some webmasters turn a blind eye to them as their share of the modern market becomes smaller and smaller. But for a professional, every visitor is important, especially if it is a commercial site.

Make something suitable for everyone or take into account all browser variations.

Lists are actively used for automatic numbering of content blocks. However, when using nested lists, it is impossible to obtain numbering of subclauses like 1.1, 1.2, 1.3, since each list will be independent. But what is not possible in SHTML can be assigned to styles.

First, let's look at how to create nested lists in general. The main container is the tag

. The nested list also starts with

, this is how the correct syntax is maintained (example 1).

Example 1: Regular nested list

Nested list

Paragraph 1
1. Subclause 1.1
2. Subclause 1.2
3. Subclause 1.3

Point 2
1. Subclause 2.1
2. Subclause 2.2

The result of this example is shown in Fig. 1. Please note that the numbering of nested lists starts anew each time.

Rice. 1. Nested list view

Now let’s remove the built-in numbering of lists and create a new one, but in the form that we need. To do this, you need three style attributes: counter-reset, counter-increment and content.

counter-reset - sets a variable that will store the counter value;

counter-increment - increases or decreases the counter value by the specified number;

content - prints the counter value when using the counter(variable) argument. Works in conjunction with the after or before pseudo-elements.

For the first level list, let's call the counter variable list1 , and for the second level - list2 . Then the initiation of counters for lists will be as follows.

OL ( counter-reset: list1; ) /* First level list */
OL OL ( counter-reset: list2; ) /* Second level list*/

In this case, content selectors help separate the nested list from the outer list. The OL OL construct means to apply style only to the tag

The counter value is increased through the OL LI:before selector, to which the counter-increment and content style attributes are added. The counter-increment attribute with the value list1 increments the value of this counter by one, and content: counter(list1) "." displays the value of the counter before the list item. These attributes work in pairs, so they must be enabled simultaneously.

OL LI:before ( /* First level list */
counter-increment: list1;
/* Output the value as 1., 2.*/
}
OL OL LI:before ( /* Second level list */
counter-increment: list2; /* Increase the counter value */
}

For a nested list, we again use content selectors (OL OL) and at the same time use the output of the counter list1 and list2, in this case we will get the numbering of the type we need.

The final code is shown in Example 2.

Example 2. Nested lists with auto-numbering

Nested list

Paragraph
1. Sub-clause
2. Sub-clause
3. Sub-clause

Paragraph
1. Sub-clause
2. Sub-clause

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

Rice. 2. Type of list auto-numbering in the Opera browser

Comment

The given example does not work in the Internet Explorer browser up to version 7 inclusive, since it does not support any of the given style properties.

Because the Internet browser Explorer does not support many interesting style attributes; especially for it, the usual numbering in lists should be left untouched. To do this, remove list-style-type: none . But this will also affect other browsers in which the example works correctly, so you will have to use a hack - this means a technique when different browsers different style code is given. For example, you can use the !important tag. Adding !important to the value of a style attribute increases its importance. If you redefine the same attribute without !important , it will be ignored by browsers. But not on Internet Explorer versions 6 and below.

LI (
list-style-type: none !important; /* Remove numbering in Opera, Safari, Firefox browsers */
list-style-type: decimal; /* Leave numbering in browser IE6 and below */
}

Replacing these codes with the string with the LI selector in example 2, we get a nested list that works correctly in all browsers.

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 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 a paired tag
  . The marker of a list element is a label, for example, a filled circle.
  Browsers add by default following formatting list block:
  Each list element is created using a paired tag
2. (from English List Item).
- 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

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 initial value, from which the numbering will begin, for example, the design 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

3. List of definitions

Lists of definitions are created using a 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
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 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