The hypertext markup language HTML has a tag
- used to create bulleted lists. It is supported by everyone modern browsers and allows you to display items in an order that does not need numbering. For example, it very often displays menu items and everything related to the lists on the page: dishes, products, equipment, tools and much more that needs to be listed without indicating the priority of this or that item.
- Item # 1
- Item # 2
- Item # 3
- ...
- Item # 1
- Item # 2
- Item # 3
- Item # 1
-
- Item # 2-1
- Item # 2-2
- Item # 2-3
- Item # 3
- ...
- Item # 1
- Item # 2
- Item # 1
- Item # 2
- Item # 1
- Item # 2
- Item # 1
- Item # 2
- ...
- disc - a marker in the form of a circle (the example was above)
- circle - a marker in the form of a transparent circle (the example was above)
- square - a marker in the form of a square (the example was above)
- decimal - marker in the form of a numbered list in Arabic numerals: 1, 2, 3, ...
- decimal-leading-zero - marker in the form of a numbered list in Arabic numerals with leading zero: 01, 02, 03, ...
- lower-roman - marker in the form of a numbered list in the Roman alphabet in small letters: i, ii, iii, iv, v
- upper-roman - bullet in the form of a numbered list in the Roman alphabet in big letters: I, II, III, IV, V
- lower-latin - a marker in the form of a list in the Latin alphabet in small letters: a, b, c, d, ...
- upper-latin - a 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 - marker in the form of a list in the Greek alphabet in capital letters
- ... When setting an attribute to a tag
- all list items will be displayed as the attribute indicates. But we can set our own display to this or that element. Example in the picture:
- Item # 1
- Item # 2
- Item # 3
- Item # 1
- Item # 2
- Item # 3
- Item # 1
- Item # 2
- Item # 3
- Item # 1
- Item # 2
- Item # 3
- Combining pieces of information into a single structure to give a readable look.
- Description of complex step-by-step processes.
- The location of information in the style of a table of contents, the paragraphs of which indicate the corresponding sections of the document.
- (LI - List Item). Tag
- does not need an appropriate end 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 information provided is enough to build an elementary bulleted list. Here's an example of an HTML document that uses a bulleted list, the display of which is shown by the browser in Fig. 2.1.
Bullet list example - Aries
- Taurus
- Twins
- Cancer
- a lion
- Virgo
- scales
- Scorpion
- Sagittarius
- Capricorn
- Aquarius
- Fishes
Zodiac signs:
Rice. 2.1. Browser Display Bulleted List
Note that in addition to the list items marked with the tag
- , there may be other HTML elements present. In the above example, one of these elements is plain text, which is not a list item, but plays the role of its heading.
Note
Some HTML textbooks instruct you to use a tag container to set the title of the list.
(LH - List Header, list header). This tag is currently not recognized by any of the mainstream browsers and is not part of the HTML specification. Thus, its application becomes meaningless, although it will not lead to any errors. In tag
- two parameters can be specified: COMPACT and TYPE.
- .
Recording example:
-
.
Note
Browsers interpret specifying a marker type differently for individual element list. Netscape Browser changes the type of marker for this and all subsequent ones until the next redefinition of the marker type is encountered. Internet browser Explorer changes the appearance of the marker for this element only.
Graphical list markers
Graphics can be used as list markers, which is widely used to create attractive, beautifully designed HTML documents. In fact, such a 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 this, but only means 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
- (as well as tags of other types of lists, considered below) performs the only task - it tells the browser that all information located after this tag should be displayed with a shift to the right (indented) by a certain amount. Tags:
- that 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 what you want before each element of the list graphic image... The only task that needs to be solved in this case will be 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
Pak
Lev
Virgo
scales
Scorpion
Sagittarius
Capricorn
Aquarius
Fishes
Rice. 2.2. Bullet list with graphic markers
In the above example, the list item marker is graphic file Green_ball.gif. Note that the use of graphics on HTML pages can significantly increase the amount of information transferred. However, in this case, this increase is extremely insignificant. 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
Methods for creating lists with graphic markers are discussed in turn in Chapter 8.
Numbered list
Another type of lists implemented in HTML is a numbered list. Otherwise, lists of this type are called ordered. The latter 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 (OL - Ordered List).
- .
Here's an example of an HTML document using a numbered list, whose display the browser is shown in Fig. 2.3.
Example of a numbered list - Sirius
- To anopus
- Arcturus
- Alpha Centauri
- Vega
- K apella
- Rigel
- Procyon
- Achernar
- Beta Centauri
- Vetelgeuse
- Aldebaran
. . .- Mizar
. . .- Polar
The brightest stars visible from Earth:
Rice. 2.Z. Numbered list
In tag
- the following parameters can be specified: COMPACT, TYPE and START.
- .
Recording example:
- .
Tag START parameter
- allows you to start numbering the list with a non-one. A natural number must always be specified as the value of the START parameter, regardless of the type of list numbering. Let's give an example:
- for numbered lists, allows the TYPE and VALUE parameters to be used. The TYPE parameter can take the same values as for the tag.
- .
- .
Note
Browsers interpret specifying the type of numbering for an individual list item differently. The Netscape browser changes the numbering for this element and all subsequent ones until it encounters another override. Internet Explorer changes the appearance of the number for this item only.
Zthe value of the tag's VALUE parameter
- - allows you to change the number of this list item. This also changes the numbering of all subsequent elements. Typical applications are lists with the omission of certain elements. 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 are stars that are clearly visible in our latitudes (Mizar is the brightest star in the constellation Ursa Major, and the Polar Star is Ursa Minor).
Here is another original example of using different types of numbering. The HTML code below contains 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 list items are empty, i.e. after any tag
- no data available. An example of this kind can be used as a table of correspondence between the recording of numbers in Arabic and Roman numerals. It turns out that any browser that supports lists can be used as a generator for such a table (Figure 2.4), as long as you type in the provided HTML code. Roman numerals work correctly up to 3999. By examining the right column, you can understand how the Roman numerals are numbered. When the one-letter numbering (from A to Z) is exhausted, the first two-letter number is taken as the next number - AA, etc.
Using different types of numbering in lists -
. . .
-
. . .
-
. . .
Rice. 2.4. Different types of HTML list numbering
Definition list
Lists of definitions, also called vocabularies of definitions of special terms, are a special kind of lists. Unlike other types of lists, each item in a definition list always has two parts. In the first part of the list item, the term being defined is written, and in the second part, the text in the form of a dictionary entry, revealing the meaning of the term.
Definition lists are specified using a container tag
- (Definition List). Inside the container with the tag
- (Definition Term) marks the term being defined, and the tag
- (Definition Description) - a paragraph with its definition. For tags
- and
- you do not have to write the corresponding end tags.
In general, the definition list 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 headers
-
... Typically, 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 across a line for some browsers) after the definition of the term, indented to the right. In the information placed after the tag
- , block-level elements can be located. This implies, in particular, that definition lists can be nested.
In tag
- the COMPACT parameter can be specified, the purpose of which is similar to the other lists described above.
- Phlegmatic person
- Passive, very able-bodied, slowly adapting;
stable mood, little amenable 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;
impetuosity and strength of emotional reactions, violent volitional manifestations
- Melancholic
- Passive, easily tired, hard to adapt, -
weakness of volition and the predominance of a depressed mood, self-doubt - Zempia
- moon
- Mapc
- Phobos
- Deimos
- Uranus
- Ariel
- Umbriel
- Titania
- Oberon
- Miranda
- Neptune
- Triton
- Nereid
The only difference is that this tag is strictly made for numbering lists. The name of the tag comes from the English abbreviation "Ordered List" - numbered list.
Tag syntax
- Item # 1
- Item # 2
- Item # 3
- ...
- A - sets markers in the form of uppercase Latin letters (A, B, C ..);
- a - sets markers in the form of lowercase Latin letters (a, b, c ..);
- I - sets markers in the form of large Roman numerals (I, II, III, IV ..);
- i - specifies markers in the form of small Roman numerals (i, ii, iii, iv ..);
- 1 (default) - specifies markers in the form of Arabic numerals (1, 2, 3 ..);
- ... Between the opening and closing tags are individual words, phrases, paragraphs, images, chunks of code and much more, which are the contents of a bulleted list.
Note
Inside the list, you can change the account to your own. For this, there is a special attribute value = "" for the tag
- to which some numeric value is assigned. For example
- Item # 1
- Item # 2
- Item # 3
- Item # 1
- Item # 2
- Item # 3
- Item # 1
- Item # 2
- Item # 3
- Item # 10
- Item # 11
- Item # 12
- Item # 1
- Item # 2
- Item # 3
- Item # 1
- Item # 2
- Item # 3
- Item # 1
- Item # 2
- Item # 3
- Item # 1
- Item # 2
- Item # 3
- Item # 1
- Item # 2
- Item # 3
- Item # 1
- Item # 2
- Item # 3
- Item # 1
- Item # 2
- Item # 3
- .
- Item # 1
- Item # 2
- Item # 3
- Item # 4
This is how it looks on the page:
- Item # 1
- Item # 2
- Item # 3
- Item # 4
Example 5. Reversible numbered list in html
Below is an example of a reverse numbered list (counting in reverse order).
- Item # 1
- Item # 2
- Item # 3
- Item # 4
This is how it looks on the page:
- Item # 1
- Item # 2
- Item # 3
- Item # 4
Element
- (from the English "unordered list" - "unordered list") creates an unordered list. Typically the element
- , which, in addition to text, can include other HTML elements (lists, images, headings, paragraphs, etc.). By default, bulleted lists are displayed on a web page as a list that starts with a small black circle. Browsers add a small margin to the left when displaying list items.
Note: If to
- applied CSS property, then the elements
- inherit these properties.
Advice: To change the marker type, use the list-style-type CSS property or the list-style-image property to replace markers with images. To create numbered lists use the tag
- .
- ... ...
Syntax
End tag
Required.
Attributes
compact Deprecated in HTML5 Reduces indentation and line spacing. type HTML5 Sets the look of the list marker.Available for this item global attributes and developments.
Default styling
Most browsers will render the element
- with the following CSS values default:
- Coffee
- Tea
- Cocoa
- A - capital Latin letters;
- a - lowercase Latin letters;
- I - capital Roman numerals;
- i - lowercase Roman numerals;
- 1 - Arabic numerals
- 1 item in a numbered list
- 2 item in a numbered list
- 3 item in a numbered list
- 1 item in a numbered list
- 2 item in a numbered list
- 3 item in a numbered list
- 1 item in a numbered list
- 2 item in a numbered list
- 3 item in a numbered list
- 1 item in a numbered list
- 2 item in a numbered list
- 3 item in a numbered list
- 1 item in a numbered list
- 2 item in a numbered list
- 3 item in a numbered list
- 1 item in a numbered list
- 2 item in a numbered list
- 3 item in a numbered list
- 1 item in a numbered list
- 2 item in a numbered list
- 3 item in a numbered list
- 1 item in a numbered list
- 2 item in a numbered list
- 3 item in a numbered list
- 1 item in a numbered list
- 2 item in a numbered list
- 3 item in a numbered list
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:
Try it yourselfSpecifications (edit)
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 to make the list start with a number other than 1.
Hello dear readers! Today, as a continuation of the series of articles under the heading "Basics of html", I want to acquaint you with the algorithm for creating html lists with help tags ul and li (unordered list), ol and li (numbered list), dl, dt, dd (definition list).
Now I will continue to acquaint you with the most frequently used html tags, which are used to create lists on site pages. If someone does not know what it is, for sure, after the information received below, he will immediately understand what it is about, since this form of presentation of the material is very common.
HTML bulleted lists - ul and li tags
The bulleted list is defined by the ul tag. List items are located between the opening and closing ul tags, the content of each of which must, in turn, be located between the opening and closing li tags. Immediately, I note that the ul tag is paired (the presence of an opening and closing tags), as well as block, that is, it forms a container that contains elements (strings) that are formed each time by the li tag. Accordingly, the li tag is paired and lowercase.
Default appearance marker is represented by a filled circle. However, you can change its appearance by applying the type attribute, which has the following values: disc, circle, square. The disc value (which determines the appearance of the filled circle marker) is the default. That is, if the type attribute is not specified, then the appearance of the marker will look like a filled circle. If we add these attributes to the ul tag, we get the following options:
Naturally, each marker of an individual item in the bulleted list can be given its own appearance by prescribing the appropriate values for the type attribute.
Numbered HTML Lists - ol and li tags
Now let's see how a numbered list is formed using ol tags (block and paired tags, similar to ul). The li tag also acts as a tag that defines the elements of the numbered html list. A numbered list is a collection of numbered items. The type of numbering is determined by the type attribute, which can take the following values:
You can also provide a numbered list where the items are numbered in reverse order, for example: 3, 2, 1. This is done using the reserve attribute of the ol tag.
It is also possible to start a bulleted list with any other number instead of 1. To do this, you can use the start attribute, and it does not matter at all what value of the type attribute is set. See an example of using the name attribute in conjunction with the different values for the type attribute (1 and I):
HTML definition lists - dl, dd, dt tags
Another kind of html lists is a definition list. It is formed as follows. The content of this list is enclosed between the opening and closing dl tags that form the container. The dt tag defines a term, and dd is the description of that term.
As you can see, the content of the dt tag, which is a term, is shifted to the left, and the content of the dd tag, which is the definition of this term, is written in italics. All this is achieved through the use of various css styles, which we will certainly talk about in upcoming publications.
By the way, modern realities are such that html language cannot be viewed in isolation, so in order not to miss these essential materials, subscribe to the blog update via RSS feed or by e-mail. This concludes the topic of today's article, if you received necessary information, don’t refuse to use the social media buttons.
- inherit these properties.
- it is used to create such lists, where changing the order of the items in this list does not significantly change the meaning of the list.
Tag
- refers to block elements, so it will take up the entire width available to it, and the size of the height will depend on the amount of content.
Items for numbered lists are defined using the tag
Here's an example HTML document that uses a definition list:
An example of a definition list Classification of typical human temperaments,
foundedon the views of Hippocrates
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 - .
Initially, these types of lists were conceived to be more compact than regular bulleted lists. According to the rules for writing the elements of these lists, it was not allowed to use block elements in them, which means that it is impossible to implement nesting of lists of this type. Each item in the list was one line of text.
For lists like
it was planned to introduce a restriction on the “length of the text of a list item (24 characters). Such a limitation would make it possible to derive lists like
in a form similar to the listing of directories in operating systems UNIX and MS-DOS when using the / W switch (multiple columns). In addition, markers were not displayed for list items of this type. At present, all these ideas have not been implemented, since the further use of lists of these types is not recommended. Modern versions of browsers display lists of these types in exactly the same way as lists of the type
- .
Nested lists
There are times when a list item of one type needs to include an entire list of the same type or another. This will organize multilevel or nested lists. HTML allows arbitrary nesting of various types of lists, but care should 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 item in the bulleted list has its own numbered list.
Example of a nested list Satellites of some planets
Where the type = "value" attribute can take the following values
The start = "value" attribute specifies initial value(start value) of the report.
The reversed attribute specifies a reverse count (if necessary).
Tag
- requires the mandatory use of an end tag
A pair tag is used to form list items.
Examples with numbered lists in html (
- )
Example 1. Numbered html list in the form of Latin letters
Example with in capital letters
Example with lowercase letters
This is how it looks on the page:
Example 2. Numbered html list in roman letters
Example with uppercase letters
This is how it looks on the page:
Example with lowercase letters
This is how it looks on the page:
Example 3. Numbered html list with different start positions
An example that shows the capabilities of the start attribute, which allows you to set the start value of the counter.
This is how it looks on the page:
Example 4. Changing account in numbered html lists
Below is an example with the ability to change the counter values using the value attribute when displaying new elements in tags
- , block-level elements can be located. This implies, in particular, that definition lists can be nested.
-
NS Example of recording:
- .
- .
Such an entry 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 numbers can be performed for any element of the list. Tag
- for numbered lists, allows the TYPE and VALUE parameters to be used. The TYPE parameter can take the same values as for the tag.
The COMPACT parameter has the same meaning as bulleted lists. The TYPE parameter is used to set the type of list numbering. It can take the following values:
TYPE = A - sets markers in the form of uppercase Latin letters;
TYPE = a - specifies markers in the form of lowercase Latin letters;
TYPE = I - specifies markers in the form of large Roman numerals;
TYPE = i - specifies markers in the form of small Roman numerals;
TYPE = 1 - specifies 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 numbered lists. Here, unlike bulleted lists, browsers by default do not make different numbering at different levels of nesting of the 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 the style of numbering of individual list items. For this, the TYPE parameter with the corresponding value can be specified in the tag of the list item
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 sequential 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 very similar to the implementation of bulleted lists.
Tags
- and
To create a numbered list, use a tag-container, inside which all the elements of the list are located. The start and end tags of a list provide line feeds 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 numbered list must begin with the tag
- that point to individual list items provide standard list item markers.
The COMPACT parameter is written with no values and is used to tell the browser that this list should be output in a compact form. For example, the font can be reduced or the distance between the lines of the list, etc.
Note
Currently, the presence of the COMPACT parameter in the tag
- does not in any way 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 the list markers. The exact type of marker will depend on the browser used. Typical options the mappings are as follows:
TYPE = disc - markers are displayed with filled circles; TYPE = circle - markers are displayed with open circles; TYPE = square - markers are displayed with filled squares. Recording example:
-
.
The default is TYPE = disc. For nested bulleted lists, the default is disc at the first level, circle at the second, and square at the third and beyond. This is exactly what is done in latest versions Netscape and Internet Explorer browsers. Note that other browsers may display markers differently. For example, the HTML 4.0 specification specifies a square outline for the marker appearance displayed with TYPE = square.
The TYPE parameter with the same values can be used to specify the type of markers for individual list items. For this, the TYPE parameter with the corresponding value can be specified in the tag of the list item
- .
The code looks like this:
Changing tag markers
- using CSS
Bulleted List Items Created by Tag
- , can be marked with arbitrary images. CSS is used to change the marker type. For example
And this is how it looks on the page:
We can use CSS to define other types of marker display as well. But you need to remember that when setting any style for the tag
- , it applies to all elements of the list.
HTML provides a special set of tags for presenting information in the form of lists. Lists are one of the most commonly used forms of data presentation, both in electronic documents and in print. We meet with lists almost daily - it can be a list of necessary purchases in the store, students in the classroom, or just things that need to be done. The ability to organize list structures is available in many text editors in particular a powerful word processor Microsoft Word has convenient list formatting tools of various kinds(The possibilities for creating HTML lists using Microsoft Word are discussed in Chapter 8). Here are a number of cases for which the use of lists is quite convenient:
Note that the above items are just organized in the form of a list structure.
HTML provides the following basic types of lists: bulleted, numbered, and list of definitions. To implement lists different types the following tags are used:
- ,
- ,
- ,
, - , with the help of which lists of this type are organized in HTML documents (UL - Unordered List, unordered list).
A bulleted list uses Special symbols, called list bullets (often called bullets, which is the formal pronunciation of the English term bullet). The type of list markers is determined by the browser, and when creating nested lists, browsers automatically diversify the look of markers at various levels of nesting.
Tags
- and<LI>
To create a bulleted list, you need to use a tag-container, inside which all the elements of the list are located. The opening and closing list tags provide line feeds 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 element of the list must begin with a tag
Tag syntax
This code is converted to a bulleted list on the site:
Tag
- requires the mandatory use of an end tag
A paired tag is used to form list items. Between the opening and closing tags are individual words, phrases, paragraphs, images, chunks of code and much more, which are the contents of a bulleted list.
What can be the contents of a bulleted list?It can be a variety of texts, including single words, phrases and paragraphs, images, nested lists, chunks of php code, and much more that needs simple labeling.
Each bulleted list item is indented 40 pixels to the right by default. Using CSS styles, we can change the display of this list to our liking. Tag
- is block-based, so it occupies the entire area available to it, limited by the edge of the screen, table frame, or other page elements.
List-in-list attachments are allowed
For example
Tag attributes and properties
Widely used tag attribute
- is a type attribute that indicates how the list marker will look like. Can take the following values
1. type = "disc" - marker in the form of a filled circle (this value is the default). The disk example was just above.
2. type = "circle" - a marker in the form of a transparent circle
For example:
3.type = "square" - a marker in the form of a square
For example:
And this is how it looks on the page:
In CSS, the marker type is specified using the list-style-type attribute:
Let's consider what values the list-style-type can take:
Note 2
The attribute can be assigned as the tag itself
- and tags