HTML tagged. Lists in HTML - bulleted list - numbered list - list of definitions - nested lists in HTML. Example: Graphic Markers
One of the types of lists implemented in HTML is the bulleted list. Otherwise, lists of this type are called unnumbered or unordered. The last name is often used as a formal translation of the name of the corresponding tag
- , with the help of which lists of this type are organized in HTML documents (UL - Unordered List, unordered list).
- (LI - List Item, list element). Tag
- does not require a corresponding closing tag, although its presence is not prohibited in principle. Browsers usually start every time they display a document. new element list from a new line.
The information provided is sufficient to construct a basic bulleted list. Let's give an example of an HTML document using a bulleted list, the display of which by the browser is shown in Fig. 2.1.
Bulleted list example Zodiac signs:
- Aries
- Taurus
- Twins
- Virgo
- Scales
- Scorpion
- Sagittarius
- Capricorn
- Aquarius
- Fish
Rice. 2.1. Browser display of bulleted list
Note that in addition to the list elements 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 acts as its title.
Note
Some textbooks on the HTML language indicate that a container tag should be used to set the list title
(LH - List Header, list header). This tag is currently not recognized by any common browsers and is not part of the HTML specification. Thus, its use becomes pointless, although it will not lead to any errors. In the tag
- two parameters can be specified: COMPACT and TYPE.
- .
Example entry:
- .
Note
Browsers interpret the bullet type specification for an individual list item differently. 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 this element.
Graphic list markers
You can use graphic images as list bullets, which is widely used to create attractive, well-designed HTML documents. In fact, such an opportunity is not provided directly HTML language, but is implemented somewhat artificially. This does not mean that doing so is not recommended or reprehensible, but only that no special HTML language constructs will be used here.
To understand the idea, you need to understand the mechanism for implementing lists on HTML pages. It turns out that the list tag
- (as, indeed, list tags of other types, discussed below) performs a single task - it tells the browser that all information located after this tag should be displayed shifted to the right (indented) by a certain amount. Tags
- , which point 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 altogether
- . It will be enough to insert the desired graphic image before each element of the list. The only problem that needs to be solved is separating the list elements from each other. You can use paragraph tags for this
Or force a line feed
. An example of implementing a list with graphic markers, the display of which is shown in Fig. 2.2 is shown below:which will be transmitted only once. The file sizes of a small image are also extremely small.
Note
Methods for creating lists with graphic bullets are discussed in turn in Chapter 8.
Main uses of lists:
Numbered - to list elements that follow in a strictly defined order.
Bulleted - to list elements in random order.
Multi-level - to specify the information of certain elements.
List of definitions - used to format dictionaries.
Numbered list html page
Tags are used to create numbered lists
-
Tag
-
By default, list items are numbered in order 1, 2, 3... Using the TYPE attribute, you can change the numbering style.
Value Numbering TYPE A A, B, C.. a a, b, c.. I I, II, III.. i i, ii, iii.. 1 1. 2. 3..
If you add already existing list new values, the browser will automatically recalculate it.
Using the START VALUE attributes, you can change the numbering order of the list.
START - serves to specify the starting number of the list, different from 1.
VALUE - makes it possible to assign an arbitrary number to any element of the list.
Example:
Bulleted list html page
Tags are used to create bulleted lists
- indicate the beginning/end of an individual list element.
By default, list items are marked with a black circle. The TYPE attribute can be used to change the marking style.
Within one list, you can use different markings for list elements.
Example:
Multilevel list html page
To create multi-level lists, you can use either bulleted or numbered lists, or a combination of both. A multi-level list is created by nesting one list within the body of another. The main task is not to get confused. To do this, I advise you to make different indents for individual lists.
Lists of html page definitions
Three tags are used to create lists of definitions:
- - start/end of the list.
- - beginning/end of a specific term.
- - beginning/end of the explanatory article of the term.
Tags
- And
- it is not necessary to alternate. Those. You can “link” several terms to one definition, and vice versa.
Example:
HTML code:
- Term 1
- Abstract1 to term 1
- Abstract2 to term 1
Browser display:
Term 1 Abstract1 to term 1 Abstract2 to term 1Since on this site certain styles are applied to some elements, their display in the table is somewhat different from what you will get.
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, 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 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
- Apple
2. Numbered list
Numbered list is created using a paired tag. Each list item is also created using the element
- marked with a number
- . 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:
- Microsoft
- Apple
- And
- available .
- Director:
- Peter Tochilin
- Cast:
- Andrey Gaidulyan
- Alexey Gavrilov
- Vitaly Gogunsky
- Mariya Kozhevnikova
Rice. 3. List of definitions4. 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 list5. 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 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
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).3. List of definitions
Lists of definitions are created using a tag
The definition list block has the following default browser styles:
For tags
- ,
HTML supports lists of three different types, each of which has its own parameters:
Numbered lists
In a numbered list, the browser automatically inserts element numbers in order, starting with a certain value (usually 1). This allows you to insert and delete list items without disturbing the numbering, since the remaining numbers will be automatically recalculated.
Numbered lists are created using a block element
Tag- 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 "
- Get the key
- Insert the key into the lock
- Turn the key two turns
- Get the key out of 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 out of the lock
- Open the door
Sometimes when looking at existing HTML codes you will come across the argument type in element
- A - capital 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).
- in the following way:
-
In this case, the sequential numbering of the list will be interrupted and from this point the numbering will begin again, in this case from seven.
Attribute usage example value tag
In this example, the "First List Item" would be number 1, the "Second List Item" would be number 7, and the "Third List Item" would be number 8.
Formatting Numbered Lists with CSS
To change list numbers you should use the property list-style-type CSS style sheets:
- . The browser indents each list item and automatically displays bullets.
- First point
- Second point
- Third point
- It is not necessary to place only text; it is acceptable to place any element of streaming content (links, paragraphs, images, etc.)
- It is permissible to create a nested list or a second-level list. To nest a list, describe the new list inside the element
- already existing list. When you nest 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 within the second item of a numbered list.
- Try it yourself "
- Monday
- Send mail
- Visit to the editor
- Choosing a theme
- Decorative design
- Final report
- Evening viewing of messages
- Tuesday
- Revise schedule
- Send images
- Wednesday...
- Monday
- Send mail
- Visit to the editor
- Choosing a theme
- Decorative design
- Final report
- Evening viewing of messages
- Tuesday
- Revise schedule
- Send images
- Wednesday...
- Try it yourself "
- Coffee
- Coffee
- Coffee
- Coffee
- Coffee
- Milk
- Coffee
- Milk
- Coffee
- Milk
- Coffee
- Milk
- Try it yourself "
- Taurus
- Gemini
- Aries
- Taurus
- Gemini
- (from the English Definition Term - a defined word, term) and
- (from the English Definition Description - description of the term being defined).
- First term
- Description of the first term
- Second term
- Description of the second term
- Try it yourself "
- The World Wide Web
- - from English The World Wide Web (WWW) is a distributed system that provides access to related documents located on different computers connected to the Internet.
- Internet
- — a set of networks that use a single exchange protocol to transmit information.
- Website
- - a set of individual web pages that are interconnected by links and a uniform design.
- 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.
- . 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 - You should take good care of your workplace.
- Adjust the lighting in the room so that the light source is located to the side or behind the operator.
- 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 a certain appearance: first there is a number, then a dot, and after that 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. 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 property list-style-type 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 - First
- Second
- Third
- 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
- One
- Two
- 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 define your own type of 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 - Borsch
- Pike cutlets
- Kulebyaka
- Mushrooms in sour cream
- Pancakes with caviar
- Kvass
Result this example shown in Fig. 3.
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 lowercase letters I, II, III upper-novel Roman numerals in capital letters Example: Applying a CSS Property list-style-type
Bulleted lists
Bulleted lists are essentially similar to numbered lists, only they do not contain sequential numbering of items. Bulleted lists are created using a block element
TagIn the following example, you can see that, by default, a small marker in the form of a filled circle is added before each list item:
Inside a tag
Nested Lists
Any list can be nested within another. Inside an elementExample: Nested Lists
Formatting Bulleted Lists
For change appearance list marker property should be used list-style-type CSS style sheets:
The following example shows different styles of bulleted lists:
Example: Bullet List Styles
Disc:
Circle:
Square:
None:
Graphic markers.
In HTML it is possible to create a list with graphic markers. It’s one thing when the list markers are standard circles or squares, and quite another when the developer himself selects the marker in accordance with the page design. In order to make list items beautiful, 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 indicate the URL of the image:Example: Graphic Markers
Zodiac signs
Zodiac signs
Lists of definitions (descriptions)
Definition lists are very useful for creating, for example, your personal dictionary of terms. Each definition list item has two parts: the term and its definition.
You put the entire list into an element
Lists of definitions are often used in scientific, technical and educational publications, using them to compile glossaries, dictionaries, reference books, etc.The general structure of the list of descriptions is as follows:
The following example shows one of the possible uses list of definitions:
Example: Definition List
World Wide Web - from English. The World Wide Web (WWW) is a distributed system that provides access to related documents located on different computers connected to the Internet. The Internet is a set of networks that use a single exchange protocol to transmit information. A website is a set of individual web pages that are interconnected by links and a uniform design.
By default, the text of the term is pressed 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 collection of elements with their serial numbers. The type and type of numbering depends on the element parameters
- , which is used to create the list. The following values can serve as numbering elements:
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
- or value of the element
Here: type – list symbols:
If you want the list to start with a number other than 1, you should specify this using the attribute start tag
The following example shows a numbered list with large Roman numerals and a starting value of XLIX:Numbering can also be started using the attribute value, which is added to the element
Tag
- The beginning/end of the entire list is marked.
Tag
- indicate the beginning/end of an individual list element.
Tag
-
-
- , which point to individual list items, provide standard list item markers.
The COMPACT parameter is written without a value and is used to indicate to the browser that this list should be presented in a compact form. For example, the font or the distance between list lines, etc. may be reduced.
Note
Currently, the presence of the COMPACT parameter in the tag
- does not in any way affect the display of lists in leading browsers. Therefore the application 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 bullets. The exact type of marker will depend on the browser you are using. Typical display options are as follows:
TYPE = disc - markers are displayed as filled circles; TYPE = circle - markers are displayed as open circles; TYPE = square - markers are displayed as filled squares. Example entry:
- .
The default value is TYPE = disc. For nested bulleted lists, the default value is disc at the first level, circle at the second level, square at the third level and beyond. This is exactly what is done in latest versions Netscape browsers and Internet Explorer. Please note that other browsers may display markers differently. For example, in HTML specifications 4.0 for the type of marker displayed when the value TYPE = square, an unfilled square (square outline) is indicated.
The TYPE parameter with the same values can be used to specify the type of markers for individual list elements. To do this, the TYPE parameter with the corresponding value is allowed to be specified in the list element tag
- .
In a bulleted list, special characters called list markers are used to highlight its elements (they are often called bullets, which is the formal pronunciation 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 at different nesting levels.
Tags And
To create a bulleted list, you need to use a container tag, 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 element must begin with a tag
