Is an element of the definition list. HTML: Numbered and Bulleted List
Lists are an important part of content because they help organize information. Text in lists is better perceived and easier to remember.
The simplest one is that in front of each of its elements there is a marker - a circle, square or circle. The order of items in a bulleted list is not important.
To create it, you need to use only two tags:
And
is a container containing a list whose elements are specified by the tag
- Stone
- Scissors
- Paper
By default, the list marker is a black circle ( disk). By adding to the tag
attribute type and by assigning the appropriate value to it, the marker can be changed to a circle ( circle) or black square ( square).
It differs from marked in that the order of the elements in it is important, and therefore instead of a marker, sequential numbers or letters are used here. There is no need to worry about the order in the list: the browser takes care of this task. If you change the list (remove or add an item out of order), the browser will recalculate it and display it correctly.
Tags are used to create numbered lists
And
defines the beginning and end of the list, tag
replaced by
.
- Stone
- Scissors
- Paper
Since things are not always so simple with numbered lists, for the tag
created the following attributes (note: below is just a numbered list):
1. type. This attribute allows you to number the list not only with Arabic, but also with Roman numerals or Latin letters of different case. type supports values 1 (default), a, A, i, I (try experimenting with them yourself).
2. start. Numbering does not always have to start with one. This attribute allows you to set the initial value - the number of the first element of the list. In it you can specify that the report begins, for example, with the number 100 or the letter K.
3. reversed. If the list should go not from 1 to 10, but from 10 to 1, then this attribute must be used. If it is specified, the numbering will be in reverse order.
In order to assign an arbitrary number to an element in the middle of the list, you need to use in the tag
By changing the number of one element in the middle of the list, you will change the numbering of all elements following it - the report will start with the value in the value attribute. For example, if you assigned element 18 the number 35, then the elements following it will have numbers not 19, 20, 21, but 36, 37, 38.
List of definitions
Not such a well-known type of list as those discussed above. Consists of terms and their definitions. Created using tags:
- a container containing a list.
The scope of application of lists of definitions is glossaries, reference books, tests, dictionaries and other capacious listings of the “Term - explanation” type.
Here is an example list of definitions:
- Descriptor
- The basic unit of markup language, known to everyone as "Tag".
- Attribute
- A property of a tag that gives it additional features text design.
- Label
- A single tag that does not need to be closed.
A list consisting of lists nested within each other. May include lists of different types. The difficulty of creation lies in maintaining the correct nesting of tags, since it is easy to get confused in a multi-level structure.
Here's an example multi-level list:
- Structural
- Pascal
- Oberon
- Limbo
- Object-oriented
- Java
- Functional
- Lisp
- Python
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 come across lists almost every day - it could be a list of necessary purchases in a store, students in class, or simply 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 tools for formatting lists of various types (the possibilities of 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:
- Combining pieces of information into a single structure to create a readable appearance.
- Description of complex step-by-step processes.
- An arrangement of information in a table of contents style, with paragraphs pointing to relevant sections of the document.
Note that the above points are precisely organized in the form of a list structure.
HTML provides the following main types of lists: bulleted, numbered, and definition list. To implement lists various types The following tags are used:
- ,
- (LI - List Item, list element). Tag
- does not require a corresponding closing tag, although its presence is not prohibited in principle. Browsers usually start each new list item on a new line when displaying a document.
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 - Aries
- Taurus
- Twins
- Cancer
- Lion
- Virgo
- Scales
- Scorpion
- Sagittarius
- Capricorn
- Aquarius
- Fish
Signs of the zodiac:
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 title of the list.
(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 token type differently 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 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, this possibility is not provided directly by the 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:Bulleted list Signs of the zodiac:
Aries
Rice. 2.2. Bulleted list with graphic bullets
In the example above, 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 transmitted. However, in in this case this increase is extremely small. Here the same file is used for all markers,
which will be transmitted only once. The file sizes of a small image are also extremely small.
Note
Techniques for creating lists with graphical bullets 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 name of the corresponding tag
- , with the help of which lists of this type are organized in HTML documents (OL - Ordered List, ordered list).
- .
Here's an example of an HTML document using a numbered list: display of which browser is shown in Fig. 2.3.
Example of a numbered list - Sirius
- K anopus
- Arcturus
- Alpha Centauri
- Vega
- K appella
- Rigel
- Procyon
- Achernar
- Beta Centauri
- Wetelgeuse
- Aldebaran
. . .- Mizar
. . .- Polar
The brightest stars visible from Earth:
Rice. 2.Z. Numbered list
In the tag
- The following parameters can be specified: COMPACT, TYPE and START.
- .
Example entry:
- .
START tag parameter
- allows you to start numbering the list from something other than one. The value of the START parameter must always be a natural number, regardless of the type of list numbering. Here's an example:
- for numbered lists, allows the use of the TYPE and VALUE parameters. The TYPE parameter can take the same values as for the tag
- .
- .
Note
Browsers interpret the numbering type for an individual list item differently. The Netscape browser changes the type of numbering for this element and all subsequent ones until the next override is encountered. Internet Explorer changes the appearance of the number only for this element.
Zvalue of the VALUE tag parameter
- - allows you to change the number of a given list element. This changes the numbering of all subsequent elements. A typical application is lists with some elements missing. An example of such a list was given above (Fig. 2.3). It gives an ordered list of the brightest stars, in which the 58th and 75th places are stars that are clearly visible at our latitudes (Mizar is the brightest star in the constellation Ursa Major, and Polaris is the brightest star in the Ursa Minor constellation).
Let's give 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 table cell. All three lists are identical and differ only in the type of numbering: in the first column of the table there are Arabic numerals, in the second - Roman, and in the third the numbering is in Latin letters. Please note that the list elements are empty, i.e. after any tag
- there is no data. An example of this kind can be used as a table of correspondence between writing numbers in Arabic and Roman numerals. It turns out that any browser that supports lists can be used as a generator of such a table (Fig. 2.4), you just need to type the given HTML code. Numbering in Roman numerals works correctly up to the value 3999. By studying the right column, you can understand how numbering in Roman letters is done. Once 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
List of definitions
Definition lists, also called definition dictionaries, are a special type 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 term being defined, 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 a container tag
- (Definition List). Inside the container with a tag
- (Definition Term) the term being defined is marked, and the tag
- (Definition Description) - a paragraph with its definition. For tags
- And
- You can omit the corresponding closing 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 headers
-
. As a rule, the text of the defined term should be located on one line. The text containing the definition of the term is displayed starting on the next line (or every 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. It follows, in particular, that lists of definitions can be nested.
In the tag
- a COMPACT parameter may be specified, the purpose of which is similar to the other lists described above.
- Phlegmatic person
- Passive, very hard-working, slow to adapt;
stable mood, 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;
impetuosity and strength of emotional reactions, violent manifestations of will
- Melancholic
- Passive, easily tired, difficult to adapt, -
weakness of volitional manifestations and the predominance of depressed mood, self-doubt - Zempya
- Moon
- Mapc
- Phobos
- Deimos
- Uranus
- Ariel
- Umbriel
- Titania
- Oberon
- Miranda
- Neptune
- Triton
- Nereid
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 - used 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.
Bulleted lists allow you to break large text into separate blocks, each of which begins with a bullet - usually a small dot. This draws the reader's attention to the text and increases its readability.
With element
- The following features are associated:
- in the place where it occurs
- , the browser automatically adds a line break;
- the list has indents at the top and bottom;
- By default, markers are displayed as a filled circle;
- Each list element is shifted to the right relative to the main text.
- disc - markers in the form of a filled circle;
- circle - markers in the form of an open circle;
- square - square markers.
- Sepulki
- Sepulcaria
- Sepulenation
- It won’t work, so you’ll have to work around it. To do this, hide the list markers using the list-style property with the value none and in the text before the content
- We add our own character using the ::before pseudo-element. In example 2, a triangle acts as such a marker.
Example 2: Using::before
Lists - Sepulki
- Sepulcaria
- Sepulenation
The result of this example is shown in Fig. 2. Since using the list-style property with the value none does not remove markers at all, but only hides them from view, the list appears shifted to the right. To get rid of this feature, the example adds the text-indent property with a negative value. Its task is to move the text to the left one character.
Rice. 2. Arbitrary markers in the list
The character does not have to be in hexadecimal format; it can be inserted directly into the text. The main thing is to save the document in UTF-8 encoding and that the editor supports it. The characters themselves and their codes can be taken, for example, from LibreOffice Writer (Fig. 3).
Rice. 3. Selecting a symbol in LibreOffice
List with hand drawn markers
Styles allow you to set any suitable image as a marker via the list-style-image property. The value is a relative or absolute path to the graphic file, as shown in example 3.
Example 3: Using an Image as a Marker
Lists - Sepulki
- Sepulcaria
- Sepulenation
It is best to choose a small drawing so as not to turn the list elements into captions. In Fig. Figure 4 shows the result of an example of using small pictures as markers.
Rice. 4. Drawing as a marker
Using list-style-image has some disadvantages:
- the pattern cannot be moved up or down;
- The position of the picture relative to the text may differ in different browsers.
These shortcomings can be avoided using the background property, it sets the background image. For each list element
- we remove the original markers and set the background image without repeating. And so that the text does not appear on top of the picture, we shift it to the right using padding-left (example 4).
Example 4: Using background
Ul ( margin-left: -1em; ) li ( list-style: none; background: url(images/bullet.png) no-repeat 0 2px; padding-left: 20px; )
Position of text and bullet
There are two ways to place a marker relative to the text: the marker is moved outside the border of the list elements or wrapped around the text (Fig. 5).
inside outside Rice. 5. Placement of markers relative to text
To control the position of markers, use the list-style-position property. It has two meanings: outside - bullets are placed outside the text block (this is the default value) and inside - bullets are part of the text block and are displayed in the list item (example 5).
Example 5: Changing the position of markers
Lists - Before you begin, check that the equipment included with the 3BM kit is included.
- If one or more peripheral devices are missing, you should immediately contact the technical staff of the CC.
- After visually inspecting your work area, you can carefully turn on the power to the 3BM.
The result of this example is shown in Fig. 6.
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 HTML bulleted 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 "- " V type=" "
- Four
- Four
- Mercury
- Venus
- Earth
- Jupiter
- Saturn
- Neptune
- Pluto
- title "insert another list and then close it with a second tag"
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 > HTML bulleted listtitle > head > <body > <ul type= "circle"> <li > Oneli > <li > Twoli > <li > Threeli > <li > Fourli > ul > body > html >Now, instead of the "circle" type, let's set the "type" square" (squares)
<html > <head > <title > HTML bulleted listtitle > head > <body > <ul type= "square"> <li > einli > <li > zweili > <li > dreili > <li > vierli > ul > body > html >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 character).Numbered lists html Lists can not only be marked, but also numbered, as sometimes this is necessary. These can be numbers (1, 2, 3...) And letters of the English alphabet in lower and upper case. 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 > Numbered list htmltitle > head > <body > <ol > <li > Onceli > <li > Twoli > <li > Threeli > <li > Fourli > ol > body > html >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 > Numbered list htmltitle > head > <body > <ol start= "0" > <li > zeroli > <li > oneli > <li > twoli > <li > threeli > ol > body > html >Now let's look at how to set "letter numbering".
In lower case:
<html > <head > <title > Numbered lists htmltitle > head > <body > <ol type= "a"> <li > Mercuryli > <li > Venusli > <li > Earthli > <li > Marsli > ol > body > html >In uppercase:
<html > <head > <title > Numbered HTML liststitle > head > <body > <ol type= "A"> <li > Jupiterli > <li > Saturnli > <li > Uranusli > <li > Neptuneli > <li ><b> Plutob>li > ol > body > html >In addition to regular lists in html, you can create multi-level lists, that is, subsections for certain items. To do this, after the tag and title "
"
<html >
<head >
<title > Multilevel list htmltitle >
head >
<body >
<ul type= "square" >
<li > Violinli >
<li > Guitar<ul >
<li > classicalli >
<li > rhythm guitarli >
<li > electric guitarli >
ul >
li >
<li > Drumsli >
<li > Dudochkali >
ul >
body >
html >
- Violin
- Guitar
- classical
- rhythm guitar
- electric guitar
- Drums
- Dudochka
Figure 1 shows the result of the example, illustrating the above features of the bulleted list.
Rice. 1. Bullet list view
Marker type
Markers can take one of three forms: filled circle (default), open circle, and square. To select the marker type, use the list-style-type property or the universal list-style property (example 1). The following values apply:
Example 1: Changing the appearance of a marker
Lists The example shows how to create a bulleted list using a small, solid-colored square as the bullet icon. Although the number of values is limited to three, this does not mean that we have only three types of marker at our disposal. There are many special characters that can successfully act as a marker icon. Screw them directly to
The next lesson will look at creating a simple menu based on the knowledge gained from this lesson.
Tag
- The beginning/end of the entire list is marked.
Tag
- indicate the beginning/end of an individual list element.
Tag
-
Here is an example of an HTML document that uses a list of definitions:
Definition list example Classification of typical human temperaments,
basedon 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)
Lists type
And - .
These types of lists were originally designed to be more compact than regular bulleted lists. According to the rules for writing elements of these lists, it was not allowed to use block elements in them, which means it was impossible to implement nesting of lists of this type. Each list element was one line of text.
For lists like
it was planned to introduce a limit on the “length of the text of a list element (24 characters). Such a limitation would allow us to derive lists like
in a form similar to listing 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. Currently, all these plans have not been implemented, since 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 like
- .
Nested Lists
There are times when you need to include an entire list of the same type or another in a list element of one type. This will create multi-level or nested lists. HTML allows arbitrary nesting of various types of lists, but care must be taken when organizing them.
Below is the HTML code for a document with nested lists, the display of which is shown in Fig. 2.6. In this example, each item in the bulleted list contains its own numbered list.
Nested list example Satellites of some planets
- , block-level elements can be located. It follows, in particular, that lists of definitions can be nested.
-
P example entry:
- .
- .
This entry determines the numbering of the list starting with 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 list numbering and number values can 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
The COMPACT parameter has the same meaning as bulleted lists. The TYPE parameter is used to specify the type of list numbering. Can take the following values:
TYPE = A - sets markers in the form of capital 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.
The default value is always TYPE = 1, i.e. numbering using Arabic numerals. This also applies to nested numbered lists. Here, unlike bulleted lists, browsers by default do not make the numbering different at different levels of nesting of lists. Note that after the number of the list element there is always an additional “dot” sign.
The TYPE parameter with the same values can be used to specify the numbering style for individual list elements. To do this, the TYPE parameter with the corresponding value is allowed to be specified in the list element tag
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 very similar to 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 opening and closing list tags provide a line break before and after the list, thereby 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
- , 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, using this parameter is pointless, 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 the HTML 4.0 specification, the type of marker 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 elements. To do this, the TYPE parameter with the corresponding value is allowed to be specified in the list element tag
- .
- ,
- ,
- , with the help of which lists of this type are organized in HTML documents (UL - Unordered List, unordered list).
A bulleted list uses special characters, called list markers (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<LI >
To create a bulleted list, you must 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
