How to create bulleted list in html. Bulleted lists numbered lists html - HTML Lessons

AT HTML language a special set of tags is provided for presenting information in the form of lists. Lists are one of the most commonly used forms of data representation in both electronic documents, as well as in print. We see lists almost daily, whether it be a list of things we need to do at the store, students in the classroom, or just things to do. The ability to organize list structures is available in many text editors in particular a powerful word processor Microsoft Word has convenient tools for formatting lists of various types (the ability to create HTML lists when help from Microsoft Word are discussed in chapter 8). Here are a few cases where using lists is quite convenient:

Combining pieces of information into a single structure to give a readable look.
Description of complex step-by-step processes.
The arrangement of information in the style of a table of contents, the paragraphs of which point to the relevant sections of the document.

Note that the above items are just organized in the form of a list structure.

HTML provides the following main types of lists: bulleted, numbered, and definition list. The following tags are used to implement lists of various types:

, , . With the help of various types of lists embedded in a document, a variety of features can be implemented, the description of which is the subject of this chapter. The features of building lists of various types, as well as the use of nested lists are considered.

bulleted list

One of the types of lists implemented in HTML is the bulleted list. Otherwise, lists of this type are called unordered or

disordered. The last name is often used as a formal translation of the corresponding tag name.

In a bulleted list, to highlight its elements, special characters are used, called list markers (often called bullets, which is the formal sounding of the English term bullet). The appearance of list markers is determined by the browser, and when creating nested lists, browsers automatically diversify the appearance of markers of different levels of nesting.

Tags

and<LI >

To create a bulleted list, you must use a tag-container, inside which all the elements of the list are located. The opening and closing list tags provide a line break before and after the list, thus separating the list from the main content of the document, so there is no need to use paragraph tags here.

Each list item must start with a tag

(LI - List Item, list item). Tag
does not need an appropriate closing tag, although its presence is in principle not forbidden. Browsers usually start each new list item on a new line when displaying a document.

The above information is sufficient to construct an elementary bulleted list. Here is an example of an HTML document using a bulleted list, the browser rendering of which is shown in Fig. 2.1.

Bulleted List Example
Rice. 2.1. Browser display of a bulleted list

Note that in addition to the list items marked with the tag

, other HTML elements may be present. In the example above, one of these elements is plain text, which is not a list item, but plays the role of its heading.

Note

In some textbooks on the HTML language, there is an indication that the container tag should be used to set the title of the list (LH - List Header, list header). This tag is currently not recognized by any of the common browsers and is not part of the HTML specification. Thus, its use becomes meaningless, although it will not lead to any errors.

In the tag

The COMPACT parameter is written without a value and is used to indicate to the browser that the given list should be displayed in a compact form. For example, the font or the spacing between the lines of a list can be reduced, etc.

Note

Currently, the presence of the COMPACT parameter in the tag

does not affect the display of lists by leading browsers. Therefore, the use of this parameter is meaningless, especially since its use is not recommended by the HTML 4.0 specification.

The TYPE parameter can take the following values: disc, circle, and square. This parameter is used to force the appearance of list markers. The exact look of the marker will depend on the browser you are using. Typical display options are as follows:

TYPE = disc - markers are displayed as solid circles; TYPE = circle - markers are displayed as unfilled circles; TYPE = square - markers are displayed as filled squares. Recording example:

The default value is TYPE = disc. For nested bulleted lists, the default value is disc at the first level, circle at the second level, and square at the third level. This is exactly what is done in latest versions Netscape browsers and Internet Explorer. Note that other browsers may display markers differently. For example, in the HTML 4.0 specification, the marker type displayed when TYPE = square is specified as a square outline.

The TYPE parameter with the same values can be used to specify the type of markers for individual list items. To do this, the TYPE parameter with the corresponding value is allowed to be specified in the list element tag

.

Recording example:

Note

Browsers interpret the indication of the type of marker in different ways for individual element list. The Netscape browser changes the appearance of the marker for this and all subsequent ones until the next redefinition of the appearance of the marker is encountered. Internet browser Explorer changes the appearance of the marker only for given element.

List graphic markers

You can use graphic images as list markers, which is widely used to create attractive, beautifully designed HTML documents. In fact, this possibility is not provided directly by the HTML language, but is implemented somewhat artificially. This does not mean that it is not recommended or reprehensible to do so, but only that no special HTML language constructs will be used here.

To understand the idea, you need to understand how lists are implemented in HTML pages. It turns out that the list tag

Pointing to individual list items provide standard list item markers.

If we need to build a list with graphic markers, then we can do without tags at all

. It will be enough to insert the desired graphic image before each element of the list. The only task that needs to be solved in this case is to separate the elements of the list from each other. You can use paragraph tags for this.

Or forced line feed
. An example of the implementation of a list with graphic markers, the display of which is shown in fig. 2.2 is shown below:

bulleted list

Zodiac signs:

Aries

Taurus

Gemini

Pack

Leo

Virgo

Scales

Scorpion

Sagittarius

Capricorn

Aquarius

Fish

Rice. 2.2. Bulleted list with graphic bullets

In the given example, the graphic file Green_ball.gif is used as a list element marker. Note that the use of graphics in HTML pages can significantly increase the amount of information transmitted. However, in this case this increase is extremely small. Here the same file is used for all markers,

which will be transmitted only once. The size of a file containing a small image is also extremely small.

Note

Techniques for creating lists with graphic markers are discussed in turn in Chapter 8.

numbered list

Another type of list implemented in HTML is the numbered list. Otherwise, lists of this type are called ordered. The last name is often used as a formal translation of the corresponding tag name.

Lists of this type usually represent an ordered sequence of individual elements. The difference from bulleted lists is that in a numbered list, each element is automatically preceded by a serial number. The type of numbering depends on the browser and can be set by the parameters of the list tags. Otherwise, the implementation of numbered lists is much like the implementation of bulleted lists.

Tags

and

To create a numbered list, you should use a container tag, inside which all the elements of the list are located. The list start and end tags provide a line break before and after the list, thus separating the list from the main content of the document.

As with a bulleted list, each item in a bulleted list must begin with the tag

Here is an example of an HTML document using a numbered list, whose display browser is shown in Fig. 2.3.

Numbered list example

The brightest stars visible from Earth are:

Sirius
K anopus
Arcturus
Alpha Centauri
Vega
K apella
Rigel
Procyon
Achernar
Beta Centauri
Vetelgeuse
Aldebaran

. . .
Mizar

. . .
Polar

Rice. 2.Z. numbered list

In the tag

The COMPACT parameter has the same meaning as bulleted lists. The TYPE parameter is used to specify how the list is numbered. It can take the following values:

TYPE = A - sets markers in the form of uppercase Latin letters;

TYPE = a - sets markers in the form of lowercase Latin letters;

TYPE = I - sets markers in the form of large Roman numerals;

TYPE = i - sets markers in the form of small Roman numerals;

TYPE = 1 - sets markers in the form of Arabic numerals.

By default, the value TYPE = 1 is always used, i.e. numbering using Arabic numerals. This also applies to nested ordered lists. Here, unlike bulleted lists, browsers by default do not make different numbering at different nesting levels of lists. Note that after the number of the list element, the "dot" sign is always additionally displayed.

The TYPE parameter with the same values can be used to specify how the individual elements of the list should be numbered. To do this, the TYPE parameter with the corresponding value is allowed to be specified in the list element tag

.

Recording example:

Tag START parameter

Such a notation determines the numbering of the list from the capital Latin letter "E". For other types of numbering, the entry START=5 will set the numbering, respectively, from the number "5", the Roman numeral "V", etc.

Changing the type of numbering of the list and the values of the numbers can also be done for any element of the list. Tag

for numbered lists, allows the use of the TYPE and VALUE parameters. The TYPE parameter can take the same values as for the tag

P record example:

.

Note

Browsers interpret the indication of the type of numbering for an individual list item in different ways. The Netscape browser changes the numbering for this element and all subsequent elements until the next override is encountered. Internet Explorer only changes the number appearance for this element.

Wvalue of the VALUE parameter of the tag
- allows you to change the number of the given element of the list. This changes the numbering of all subsequent elements. A typical use is for lists where some elements are omitted. An example of such a list was given above (Fig. 2.3). It gives an ordered list of the brightest stars, in which at 58 and 75 places there are stars that are clearly visible in our latitudes (Mizar is the brightest star in the constellation Ursa Major, and the North Star is Ursa Minor).

Here is another original example of the use of numbering of various types. The HTML code below defines three lists with different numbering. For ease of viewing, each of the lists is placed in a separate cell of the table. All three lists are identical and differ only in the type of numbering: in the first column of the table - Arabic numerals, in the second - Roman, and in the third the numbering is in Latin letters. Note that the elements of the list are empty, i.e. after any tag

there is no data. An example of this kind can be used as a correspondence table between Arabic and Roman numerals. It turns out that any browser that supports lists can be used to generate such a table (Figure 2-4) as long as you type the HTML code provided. Numbering in Roman numerals works correctly up to the value 3999. By examining the right column, you can understand how the numbering in Latin letters is performed. After the exhaustion of one-letter numbering (from A to Z), the first two-letter number - AA, etc. is taken as the next number.

Usage <a href="https://obanracer.ru/en/operatory-vetvleniya-v-komande-select-preobrazovaniya-nvl-dlya-razlichnyh-tipov.html">various types</a> numbering in lists

. . .

. . .

. . .

Rice. 2.4. Different Types of HTML List Numbering

List of definitions

Definition lists, also called term definition dictionaries, are a special kind of list. Unlike other types of lists, each element of a definition list always consists of two parts. The first part of the list element contains the defined term, and the second part contains text in the form of a dictionary entry that reveals the meaning of the term.

Definition lists are specified using the container tag

(Definition Term) the defined term is marked, and the tag

(Definition Description) - a paragraph with its definition. For tags

and

you can omit the appropriate end tags.

In general, the list of definitions is written as follows:

Term

Definition of the term

In the text after the tag

block-level elements, such as paragraph tags, cannot be used
or headlines
-
. As a general rule, the text of the term being defined should be on one line. The text containing the definition of the term is displayed starting with next line(or a line for some browsers) after the term definition, indented to the right. In the information placed after the tag
, block-level elements can be placed. It follows, in particular, that lists of definitions can be nested.

In the tag
the COMPACT parameter may be specified, the purpose of which is similar to the other lists described above.

Here is an example of an HTML document that uses a list of definitions:

Definition list example

Classification of typical human temperaments,
founded

on the views of Hippocrates

Phlegmatic person

Passive, very able-bodied, slow to adapt;
the mood is stable, little susceptible to external influence;
lethargy of emotional reactions and slowness in volitional activity

sanguine

Active, energetic, adaptable, -
liveliness and mobility of emotional reactions, speed and strength of volitional manifestations

Choleric

Active, very energetic, persistent;
impulsiveness and strength of emotional reactions, violent volitional manifestations

melancholic

Passive, easy to tire, difficult to adapt -
weakness of volitional manifestations and the predominance of depressed mood, self-doubt

The display of the given HTML document in the browser is shown in Fig. 2.5.

Rice. 2.5. List of definitions (resembles a group of entries in a dictionary)

Type Lists
and

Type Lists
and are now practically not used, although their support by leading browsers is still provided. In the HTML 4.0 specification, both of these list types are marked as deprecated. Instead, it is proposed to use bulleted lists specified by the tag
.

Initially, lists of these types were conceived as more compact than conventional bulleted lists. According to the rules for writing elements of these lists, they were not allowed to use block elements, which means that it is impossible to implement the nesting of lists of this type. Each element of the list was one line of text.

For lists like
it was planned to introduce a limit on the "length of the text of the list element (24 characters). Such a restriction would allow

type lists
in a form similar to listing directories in operating systems UNIX and MS-DOS when using the /W switch (in multiple columns). In addition, bullets were not displayed for list items of this type.

Currently, all these ideas have not been implemented, since the further use of lists of these types is not recommended. Modern versions of browsers render lists of these types in exactly the same way as lists of the type
.

Nested Lists

There are times when a list element of one type needs to include an entire list of the same type or another. This will organize multi-level or nested lists. HTML allows arbitrary nesting of different types of lists, but care must be taken when organizing them.

Below is the HTML code of the document with nested lists, the display of which is shown in Fig. 2.6. In this example, each element of the bulleted list has its own numbered list.

Nested list example

Satellites of some planets

Zempa

Moon

mapc

Phobos

Deimos

Uranus

Ariel

Umbriel

Titania

Oberon

Miranda

Neptune

Triton

Nereid

Another type of list implemented in HTML is the numbered list. Otherwise, HTML lists of this type are called ordered. The last name is often used as a formal translation of the corresponding tag name.
, with the help of which lists of this type are organized in HTML documents (OL - Ordered List, an ordered list).

Lists of this type are usually an ordered sequence of individual elements. The difference from bulleted lists is that in a numbered list, each element is automatically preceded by a serial number. The type of numbering depends on the browser and can be set by the parameters of the list tags. Otherwise, the implementation of numbered lists is much like the implementation of bulleted lists.
tags
and

To create a numbered list, you should use the container tag, inside which all the elements of the list are located. The list start and end tags provide a line break before and after the list, thus separating the list from the main content of the document.
As with a bulleted list, each item in a bulleted list must begin with the tag
.
Here is an example of an HTML document using a numbered list, whose display browser is shown in Fig. 2.3.
Numbered list example
The brightest stars visible from Earth are:
Sirius
K anopus
Arcturus
Alpha Centauri
Vega
K apella
Rigel
Procyon
Achernar
Beta Centauri
Vetelgeuse
Aldebaran
Mizar
Polar

Rice. 2.Z. numbered list
In tag
the following parameters can be specified: COMPACT, TYPE and START.
The COMPACT parameter has the same meaning as bulleted lists. The TYPE parameter is used to specify how the list is numbered. It can take the following values:
TYPE = A - sets markers in the form of uppercase Latin letters;
TYPE = a - sets markers in the form of lowercase Latin letters;
TYPE = I - sets markers in the form of large Roman numerals;
TYPE = i - sets markers in the form of small Roman numerals;
TYPE = 1 - sets markers in the form of Arabic numerals.
By default, the value TYPE = 1 is always used, i.e. numbering using Arabic numerals. This also applies to nested ordered lists. Here, unlike bulleted lists, browsers by default do not make different numbering at different nesting levels of lists. Note that after the number of the list element, the "dot" sign is always additionally displayed.
The TYPE parameter with the same values can be used to specify how the individual elements of the list should be numbered. To do this, the TYPE parameter with the corresponding value is allowed to be specified in the list element tag
.
Recording example:
.
Tag START parameter
allows you to start numbering the list not from one. The value of the START parameter must always be a natural number, regardless of the type of list numbering. Here's an example:
.
Such a notation determines the numbering of the list from the capital Latin letter "E". For other types of numbering, the entry START=5 will set the numbering, respectively, from the number "5", the Roman numeral "V", etc.
Changing the type of numbering of the list and the values of the numbers can also be done for any element of the list. Tag
for numbered lists, allows the use of the TYPE and VALUE parameters. The TYPE parameter can take the same values as for the tag
.
Recording example:
.
Note
Browsers interpret the indication of the type of numbering for an individual list item in different ways. The Netscape browser changes the numbering for this element and all subsequent elements until the next override is encountered. Internet Explorer only changes the number appearance for this element.
The value of the VALUE parameter of the tag
- allows you to change the number of the given element of the list. This changes the numbering of all subsequent elements. A typical use is for lists where some elements are omitted. An example of such a list was given above (Fig. 2.3). It gives an ordered list of the brightest stars, in which at 58 and 75 places there are stars that are clearly visible in our latitudes (Mizar is the brightest star in the constellation Ursa Major, and the North Star is Ursa Minor).

Here is another original example of the use of numbering of various types. The HTML code below defines three lists with different numbering. For ease of viewing, each of the lists is placed in a separate cell of the table. All three lists are identical and differ only in the type of numbering: in the first column of the table - Arabic numerals, in the second - Roman, and in the third the numbering is in Latin letters. Note that the elements of the list are empty, i.e. after any tag
there is no data. An example of this kind can be used as a correspondence table between Arabic and Roman numerals. It turns out that any browser that supports lists can be used to generate such a table (Figure 2-4) as long as you type the HTML code provided. Numbering in Roman numerals works correctly up to the value 3999. By examining the right column, you can understand how the numbering in Latin letters is performed. After the exhaustion of one-letter numbering (from A to Z), the first two-letter number - AA, etc. is taken as the next number.
Using different type of numbering in lists

. . .

Rice. 2.4. Different Types of HTML List Numbering

HTML supports lists of three different types, each of which has its own terms:

- a numbered (using numbers or letters) list, each element of which has a serial number (letter);
- a bulleted (not numbered) list, next to each element of which a marker is placed (rather than numeric or alphabetic characters indicating a serial number);
– The list of definitions consists of name/value pairs, including terms and definitions.

Numbered Lists

In a numbered list, the browser automatically inserts the element numbers in order, starting from some value (usually 1). This allows you to insert and remove list items without disturbing the numbering, since the remaining numbers will be automatically recalculated.
Numbered lists are created using a block element
(from the English. Ordered List - a numbered list). Next to the container
for each item in the list, an element is placed
(from English List Item - list item). The default is a numbered list with Arabic numerals.
Tag
has the following syntax:

element 1

element 2

element 3

Numbered list items must contain multiple list items, as shown in the following example:

Example: Numbered List

Try it yourself "

Step-by-step instruction

Get the key

Insert the key into the lock

Turn the key two turns

Get the key from the lock

Open the door

Step-by-step instruction

Get the key

Insert the key into the lock

Turn the key two turns

Get the key from the lock

Open the door

Sometimes when looking at existing HTML codes, you will encounter the argument type in element
, which is used to specify the type of numbering (letters, Roman and Arabic numerals, etc.). Syntax:

Here: type - characters of the list:

A - uppercase Latin letters (A, B, C . . .);

a - lowercase Latin letters (a, b, c . . .);

I - large Roman numerals (I, II, III . . .);

i - small Roman numerals (i, ii, iii . . .);

1 - Arabic numerals (1, 2, 3 . . .) (used by default).

If you want the list to start with a number other than 1, you must specify this using the attribute start tag
.
The following example shows an ordered list with large Roman numerals and initial value XLIX:

Numbering can also be started using the attribute value, which is added to the element
in the following way:

In this case, the sequential numbering of the list will be interrupted and from this point the numbering will start anew, in this case from seven.

Attribute usage example value tag
, which allows you to change the number of a given list element:

In this example, "First List Item" would be number 1, "Second List Item" would be number 7, and "Third List Item" would be number 8.

Formatting numbered lists with CSS

To change list numbers, use the property list-style-type css stylesheets:

Numbered List Styles

Example Meaning Description
a, b, c lower-alpha Lower case
A, B, C upper-alpha Capital letters
i, ii, iii lower roman Roman numerals in lower case
I, II, III upper roman Roman numerals in capital letters

Example: Applying a CSS property list-style-type

Bulleted Lists

Bulleted Lists essentially similar to numbered ones, only they do not contain sequential numbering of paragraphs. Bulleted lists are created using a block element
(from the English Unordered List - an unordered list). Each element of the list, as in numbered lists, begins with a tag
. The browser indents each list item and automatically displays bullets.
Tag
has the following syntax:

First point

Second paragraph

Third paragraph

In the following example, you can see that, by default, a small filled circle marker is added in front of each list item:

Inside the tag
it is not necessary to place only text, it is permissible to place any element of streaming content (links, paragraphs, images, etc.)

Nested Lists
Any list can be nested within another. Inside an element
it is possible to create a nested list, or a second-level list. To nest a list, describe a new list inside an element
already existing list. When nesting one bulleted list into another, the browser automatically changes the bullet style for the second-level list. Any list can be nested within another. The following example demonstrates the structure of a bulleted list nested in the second item of a numbered list.
Example: Nested Lists

Try it yourself "

Monday
Send mail

Visit to the editor
Topic selection

Decorative design

Final Report

Evening message viewing

Tuesday
Revise schedule

Submit images

Wednesday...

Monday

Send mail

Visit to the editor

Topic selection

Decorative design

Final Report

Evening message viewing

Tuesday

Revise schedule

Submit images

Wednesday...

Formatting bulleted lists

For change appearance list markers should use the property list-style-type css stylesheets:

The following example shows different styles for bulleted lists:

Example: Bulleted List Styles

Try it yourself "

Coffee

Coffee

Coffee

Coffee

Disc:

Coffee

Milk

Circle:

Coffee

Milk

Square:

Coffee

Milk

None:

Coffee

Milk

Graphic markers.

In HTML, it is possible to create a list with graphic markers. It is one thing when the list markers are standard circles or squares, and quite another when the developer selects the marker himself in accordance with the page design. In order to make list items look pretty, small pictures are often used.
To replace a regular marker with a graphic one, replace the property list-style-type per property list-style-image and specify the URL of the image:

Example: Graphic markers

Try it yourself "

Zodiac signs

Taurus

Gemini

Zodiac signs

Aries

Taurus

Gemini

Lists of definitions (descriptions)

Definition lists are very handy for creating, for example, your personal glossary of terms. Each item in the list of definitions has two parts: the term and its definition.
You put the whole list into an element
(from the English. Definition List - a list of definitions). It includes tags
(from the English. Definition Term - defined word, term) and
(from the English. Definition Description - a description of the defined term).
Lists of definitions are often used in scientific, technical and educational publications, making glossaries, dictionaries, reference books, etc. with their help.

The general structure of the list of descriptions is as follows:

First term

Description of the first term

Second term

Description of the second term

The following example shows one of possible uses definition list:

Example: List of definitions

Try it yourself "

World Wide Web - from English. The World Wide Web (WWW) is a distributed system that provides access to interconnected documents located on various computers connected to the Internet. The Internet is a set of networks that use a single exchange protocol to transfer information. A site is a set of individual web pages that are linked by links and have a common design.

The World Wide Web

- from English. The World Wide Web (WWW) is a distributed system that provides access to interconnected documents located on various computers connected to the Internet.

Internet

- a set of networks that use a single exchange protocol for transmitting information.

Website

- a set of separate web pages that are interconnected by links and a single design.

By default, the text of the term is nestled to the left edge of the browser window, and the description of the term is located below and shifted to the right.

Numbered lists are a set of elements with their serial numbers. The type and type of numbering depends on the tag attributes
, which is used to create the list. Each item in a numbered list is identified by a tag
as shown below.

First point

Second paragraph

Third paragraph

If you do not specify any additional attributes and just write a tag
, then the list with Arabic numbers (1, 2, 3,...) is used by default, as shown in Example 11.3.

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.

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

Rice. 11.3. Numbered list view

Note that the numbered list also adds automatic indents 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.
. Its possible values are given in Table. 11.2.
Tab. 11.2. Numbered List Types
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 a specific value, use the start attribute of the tag
. It doesn't matter which list type is set with type , the start attribute works the same for both Roman and Arabic numerals. Example 11-4 shows how to create a list using uppercase Roman numerals beginning with eight.

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

In HTML, a whole set of tags is responsible for organizing lists, the organization of which must comply with certain data structuring rules.

Fifth standard html versions 3 types of lists are supported: numbered lists, bulleted lists and definition lists. It also provides the ability to nest lists within each other, creating nested multilevel lists.

numbered list

numbered list is a set of elements (list items) that have a certain sequence. Each item in a numbered list has a unique marker that indicates the order of the item in relation to other items in the list. By default, numbered list item markers are numbers. The first item goes under the number 1, the second under the number 2, and so on.

The most common examples of numbered lists are recipes for cooking various dishes. Since any recipe is a numbered list, with a clear sequence of actions.

To create numbered lists in HTML, use the tag
, inside which the elements of the list with data are located. Each list item is identified with a tag.
:

Numbered list:

Coffee

Tea

Milk

Try »
note: tag
as child elements can only contain tags
, that is, the entire contents of the numbered list must be placed inside the elements
. Tag
, in turn, has no restrictions on content, so you can place paragraphs, pictures, links, tables, other lists, etc. in it.

bulleted list

bulleted list- these are unordered, that is, unordered lists of elements, the sequence of which does not matter. All bulleted list items have the same bullets, by default they are displayed as small black circles.

The HTML tag is used to create bulleted lists.
, inside which the elements of the list itself are located (as in the case of numbered lists, the tag is used
, which contains all the displayed contents of the list):

Bulleted List:

Coffee

Tea

Milk

Try »
Types of markers

The types of bullets in a numbered list can be changed using the type attribute. This attribute supports five types of markers:

Bulleted lists don't have a type attribute, so you can't change the type of bullet in a bulleted list using HTML. To change the type of marker, in this case, you can use CSS property m list-style-type , with which, in addition to the default value, you can select two more types of marker: circle or square .

Changing markers for lists:
Page Title
Numbered list with type="a" attribute:

Apples
Bananas
Lemons

Numbered list with type="I" attribute:

Apples
Bananas
Lemons

Types of bulleted list markers:

Apples
Bananas
Lemons

Apples
Bananas
Lemons

Try »
The list-style-type CSS property, in addition to the types of bullets for bulleted lists, has many different types of bullets for numbered lists. But not always changing one standard type of marker to another is enough to beautifully design the list. To design lists, it is better to use CSS, which allows you not only to change the appearance of the marker, but also to replace the markers with images, control their location and control the indentation. You can see how to do all this.

horizontal list

If you are using an HTML list to create a horizontal menu, then you will need to arrange the list items next to each other on the same line. You can't do this with HTML, so you'll need to use CSS.

To create a horizontal list, you need to set the CSS display property of the list items to inline or inline-block , depending on what other properties you are going to use.
Page Title
numbered list

Apples
Bananas
Lemons

Bulleted List:

Apples
Bananas
Lemons

Try »
After that, all the items in the list will line up on one line. Please note that the bullets will disappear from the list items and there will not even be a space between them, but the indent on the left of the list will remain.

How to turn a horizontal list into a horizontal menu, you can see.

Example	Meaning	Description
a, b, c	lower-alpha	Lower case
A, B, C	upper-alpha	Capital letters
i, ii, iii	lower roman	Roman numerals in lower case
I, II, III	upper roman	Roman numerals in capital letters

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

-

Classification of typical human temperaments, founded on the views of Hippocrates

tags and

Numbered Lists

Example: Numbered List

Formatting numbered lists with CSS

Example: Applying a CSS property list-style-type

Bulleted Lists

Nested Lists

Example: Nested Lists

Formatting bulleted lists

Example: Bulleted List Styles

Graphic markers.

Example: Graphic markers

Lists of definitions (descriptions)

Example: List of definitions

numbered list

Numbered list:

bulleted list

Bulleted List:

Types of markers

Numbered list with type="a" attribute:

Numbered list with type="I" attribute:

Types of bulleted list markers:

horizontal list

numbered list

Bulleted List:

Recommended

Classification of typical human temperaments,
founded

on the views of Hippocrates

tags
and