Hello dear readers of the blog site. Today, within this heading, I want to talk about a variety of Html lists that can be created based on specially designed tags UL, OL, LI and DL. With the help of the pair UL and LI, bulleted lists are created, with the help of OL and LI - numbered, and with the help of the elements DL, DT and DD, so-called listings of definitions are created. We will also look briefly at the principles of creating nested structures.
I want to remind you that we have already managed, managed to talk about the basics of modern, as well as table layout (). In addition, we touched on the basics, well, we learned through.
Bulleted lists based on UL and LI tags
The UL tag is used to create bulleted lists, and OL is used to create numbered lists. These tags are paired and block, just like the LI element.
Separate list items are located between the opening and closing tags, which in turn are enclosed in an opening and closing LI element. At the top and bottom of Html lists, the browser adds one-line indentation, similar to the indentation created by a paragraph tag.
Let's see, for example, a bulleted variant that might look like this:
- First line
- The second
- The last element
Only LI elements can be inside the opening and closing UL tags, and already inside these elements (items) themselves, you can insert any content (text, pictures, headings, paragraphs, links, and even other lists).
Those. UL serves only to organize a bulleted (unordered) listing, and everything that you will see on a web page inside it is implemented using the content of the LI elements.
For UL, you can change the type of marker by writing different values for the "Type" attribute in it. If "Type" (control of the appearance of markers) is not specified for the UL element, then the default marker type will be displayed (disc - a circle filled in the color of the text):
- - filled circle (default);
- - open circle;
- - square
In the above examples, we wrote the "Type" attribute in the UL element, applying this type of markers to all items. But the "Type" attribute can be assigned for each individual LI tag by setting its own marker type for this item.
An example of a bulleted list with different bullet types for each item:
- A marker in the form of a filled disk
- Marker in the form of an unpainted disk
- Square
Numbered Lists in Html Based on OL Tag
To create a numbered listing, OL tags are used, inside which, again, LI elements will be located. OL and LI, as I already mentioned, are block (that is, they tend to occupy all the space available to them in width) and inside OL it will not be possible to place anything other than LI elements.
It turns out that OL and UL are service tags that are needed only to tell the browser what kind of list we are generating (bulleted or numbered). In the case of a numbered one, to the left of each item we will see not a marker, but a number and a dot behind it:
- First line
- Second point
- Third line
As I mentioned just above, the UL, OL and LI elements have the ability to use the TYPE attribute. It allows you to customize the type of bullet or to specify which numbers or letters will be numbered items in the listing. For a numbered list, the parameters of this attribute can take the following values:
- - numbering will be carried out in ordinary Arabic numerals (the same option will be used by default, in the absence of the “Type” attribute);
- - capital letters as numbering;
- - lower case;
- - capital Roman numerals;
- - lowercase Roman numerals;
An example of a numbered list with different types of numbering for each item:
- with numbering in large roman numerals
- Numbering in small latin letters
- Small Roman numerals
When creating numbered lists, it is also possible to start numbering not from one, but from the number specified in the START attribute. For instance:
- The first element whose number is specified in the OL tag by the start = "23" attribute
- The next item, with a number one higher
- One more one more
For OL, you can also start a new numbering from any value, starting from any item, by writing the VALUE attribute with the required number in the opening LI of this item. For instance:
- First item with number one
- This element will receive the number specified in the value = "32" attribute
- Item with a large number
Styling Lists in CSS (Style Sheets)
But, as a rule, now the appearance of markers is set not through the TYPE attribute, but for which the corresponding properties are written.
Here I will just give an example of different bullets for unnumbered lists, the appearance of which is set through a separate file with cascading style sheets.
- First point
- Second
- Last
But we'll talk about in subsequent articles. This is how the appearance of the UL markers on this blog is set. Pictures are used as markers: for ordinary items of an unnumbered list -, for nested items of an unnumbered list -.
Special and nested lists in Html code
The third and final type is called "definition lists" and they are specified using three tags - DL, DT and DD. The DL tells the browser that a list of definitions will follow.
Usually this kind is used (well, or it was assumed that it will be used) for writing dictionary entries, consisting of terms (enclosed in DT tags) and their descriptions (enclosed in DD tags).
- First term
- Description
- Second term
- His description
If you look at the example above, you will notice that the DD (term description) element is offset (by 40 pixels) relative to the DT element (term itself).
In general, DL, DT and DD are block tags, and only content with inline tags can be inserted inside a DT element (it turns out that heading and paragraph block elements cannot be used inside a DT). And inside DD tags, you can insert any elements, both inline and block.
Nested list in Html it is created by analogy with a simple one, but inside the main list, some of the items are once again enclosed in the opening and closing UL or OL tags.
Please note that the closing LI of the item in which the nested item will be created is placed only after the entire code of the nested list (this is very important for its correct display on the web page). The nested list might look something like this:
- The first paragraph of the main numbered
- Second point
- The first element of the nested bulleted
- Second
- The third and last paragraph labeled
- Third item numbered
Good luck to you! See you soon on the pages of the blog site
You may be interested
How to insert a link and a picture (photo) into HTML - IMG and A tags Select, Option, Textarea, Label, Fieldset, Legend - Html tags of the dropdown and textbox form 
Html forms for the site - tags Form, Input and Select, Option, Textarea, Label and others for creating elements of web forms 
How colors are set in Html and CSS code, selection of RGB shades in tables, Yandex and other programs 
Embed and object - Html tags for displaying media content (video, flash, audio) on web pages 
Tags and attributes of H1-H6 headings, horizontal line Hr, line break Br and paragraph P according to the Html 4.01 standard 
Tables in Html - Table, Tr and Td tags, as well as Colspan, Cellpadding, Cellspacing and Rowspan to create them 
What is hypertext markup language Html and how to view a list of all tags in the W3C validator 
Font (Face, Size, and Color), Blockquote, and Pre tags are legacy text formatting in pure HTML (no CSS) 
Iframe and Frame - what are they and how best to use frames in Html 
Img - Html tag for inserting an image (Src), aligning and wrapping it with text (align), as well as setting a background (background)
In HTML, a whole set of tags is responsible for organizing lists, the organization of which must follow certain rules for structuring data.
The standard of the fifth version of html supports 3 types of lists: 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 specific sequence. Each item in a numbered list has a unique marker indicating the order in which this item should be placed relative to other items in the list. By default, bullets for numbered list items 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 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 item in the list is indicated with a tag
- :
Numbered list:
- Coffee
- Tea
- Milk
Note: tag
- can only contain tags as children
- , that is, all the contents of the numbered list must be placed inside the elements
- ... Tag
- , in turn, has no restrictions on the 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 bullet points have the same bullet points, by default they are displayed as small black circles.
To create bulleted lists in HTML, use the tag
- , inside which the elements of the list itself are located (as in the case of numbered lists, the tag
- which contains all the displayed contents of the list):
Bulleted List:
- Coffee
- Tea
- Milk
Marker types
The bullet appearance of a numbered list can be changed using the type attribute. This attribute supports five types of markers:
Bulleted lists do not have a type attribute, so you cannot use HTML to change the look of the bullet for a bulleted list. To change the type of marker, in this case, you can use the list-style-type CSS property, with which, in addition to the default value, you can select two more types of marker: circle or square.
Changing bullets for lists:
Page title A numbered list with the type = "a" attribute:
- Apples
- Bananas
- Lemons
A numbered list with the type = "I" attribute:
- Apples
- Bananas
- Lemons
Types of bulleted list markers:
- Apples
- Bananas
- Lemons
- Apples
- Bananas
- Lemons
The list-style-type CSS property, in addition to bullet types for bulleted lists, has many different bullet types and for numbered lists. But not always changing one standard type of marker to another is enough to make the list look beautiful. 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 markers with pictures, control their position and control the indentation. You can see how to do all this.
Horizontal list
If you are using an HTML list box to create a horizontal menu, then you will need to arrange the list items one after the other on the same line. You won't be able to do this using HTML, so you'll need to use CSS.
To create a horizontal list, you need to write a CSS display property for the list items with the value 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
After that, all the items in the list will be lined up in one line. Please note that 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.
You can see how a horizontal list can be turned into a horizontal menu.
One of the types of lists implemented in HTML is a bulleted list. Otherwise, lists of this type are called unordered or unordered. 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 (UL - Unordered List, unordered list).
- (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, which is displayed in a browser as shown in Fig. 2.1.
Bullet list example Zodiac signs:
- Aries
- Taurus
- Twins
- Virgo
- scales
- Scorpion
- Sagittarius
- Capricorn
- Aquarius
- Fishes
Rice. 2.1. Browser Display Bulleted List
Note that in addition to the list items marked with the tag
- , other HTML elements may be 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 the container tag 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 the tag
- two parameters can be specified: COMPACT and TYPE.
- .
Recording example:
- .
Note
Browsers have different interpretations for specifying a bullet type for an individual list item. The Netscape browser changes the type of marker for this and all subsequent ones until it encounters another override of the marker type. Internet Explorer changes 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 the desired graphic image in front of each element of the list. The only problem 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: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.
With the help of html lists, you can create a menu for your site with different items and sub-items. With the help of 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, items in a bulleted list.First, let's create a simple list with a few 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
- Land
- Jupiter
- Saturn
- Neptune
- Pluto
- name "insert another list and then close it with the second tag"
Let's create a list in which instead of points there will be small circles (puncture points). 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 type "circle", 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>In the CSS lessons, working with lists is discussed in detail, from which you can learn how to set colors for paragraphs and text in them, as well as how to set the type of marker itself (it can be not only a square
or a period - it can be almost any character).Numbered html lists Lists can not only be labeled, but also numbered, as sometimes it is necessary. These can be numbers (1, 2, 3 ...) AND letters of the English alphabet in lower and upper case. Consider all of the above.
In order to set the numbering, the tags "" are used.
The type is specified within the first tag.Numbering by numbers (from one)
<html> <head> <title> Numbered html listtitle> 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 a triplet, for example, then you need to write in the first tag start = "" and the desired number.
<html> <head> <title> Numbered html listtitle> 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".
Lowercase:
<html> <head> <title> Numbered html liststitle> head> <body> <ol type = "a"> <li> Mercuryli> <li> Venusli> <li> Landli> <li> Marsli> ol> body> html>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 the usual lists in html, you can create multilevel lists, that is, subsections for certain items. To do this, after the tag and name "
"
<html>
<head>
<title> Multilevel html listtitle>
head>
<body>
<ul type = "square" >
<li> Violinli>
<li> Guitar<ul>
<li> classicli>
<li> rhythm guitarli>
<li> electric guitarli>
ul>
li>
<li> Drumsli>
<li> Pipeli>
ul>
body>
html>
- Violin
- Guitar
- classic
- rhythm guitar
- electric guitar
- Drums
- Pipe
- ... In this case, a marker is added opposite each item in the list, by default it is a marker in the form of a circle. Using tags, a container is created, inside which the list items are located:.
The bulleted list code will look like this:
- The option is
- Option syakoy
- A kind of option
You can try to create an HTML page using this code and for you, as a result you get the following list:
As you can see, each list item is placed on a new line, with some indentation on the left, top and bottom. Each item in the list begins with a marker; a filled circle (default), circle or square can be used as a marker. Tag
- there is a type attribute, with the help of which, and the style of the marker is set. This attribute has the following meanings:
- disc - circle;
- circle - circle;
- square - a square.
- The option is
- Option syakoy
- A kind of option
- The option is
- Option syakoy
- A kind of option
- ... In this way, you can create a list with a variety of markers.
- The option is
- Option syakoy
- A kind of option
This will result in the following:
Numbered lists.
Numbered lists in HTML are lists in which each item has a sequential number, numbered lists are created using the tag
- and nested in its tags
-
- First line
- Second line
- Third line
The list looks like this:
By default, the numbering is made in Arabic numerals. But the tag
- there is a type attribute, with the help of whose values the numbering can be made in uppercase (type = "A") or lowercase (type = "a") in Latin letters, in Roman numerals in upper (type = "I") and lower (type = "i" ) register.
- ... Tag
- creates a container for the list, tag
- sets the term, and the tag
- description or definition of the term.
This list is written as follows:
- Term 1
- Definition of term 1
- Term 2
- Definition of term 2
- Term 3
- Definition of term 3
This will result in the following list:
As you can see, this creates appropriate indentation for the term and definition text.
Nested or layered lists in HTML.
Sometimes it is necessary to nest another list in one element of a certain type of list. In HTML, it is possible to wrap some lists in the elements of other lists indefinitely.
For example, here's the code that nests numbered lists in bulleted list items.
- The option is
- First line
- Second line
- Third line
- Option syakoy
- First line
- Second line
- Third line
- A kind of option
- First line
- Second line
- Third line
Below are abbreviated versions of the code, and the type of numbering that may be in one case or another.
List view:
List view:
Numbering by lowercase letters of the Latin alphabet:
List view:
List view:
List view:
List of definitions in HTML.
Definition lists are a special kind of list. They differ in that each element of the list consists of two elements, a term and a text that reveals its meaning. These lists are created using tags
Disc is the default.
An example of creating a bulleted list with bullets in the form of a circle:
As a result, the list will look like this:
Create a bulleted list with square markers:
The list will look like:
The type attribute can be applied to more than just a tag
- but also to the tag
The next lesson will look at creating a simple menu based on the knowledge gained from this lesson.
- 4.5 out of 5 based on 2 votes
Very often, certain information on the site must be presented in the form of lists.
Lists allow you to organize and organize various information and present it to the visitor in a convenient form.
HTML lists come in three flavors: bulleted lists, numbered lists, and definition lists. Let's see how to create them in order.
Bulleted list.
This type of list is used most often. A bulleted list in HTML is created using tags
- that point to individual list items provide standard list item markers.
The COMPACT parameter is written without values and is used to instruct the browser to display this list in a compact format. 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 display options 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 the latest versions of the 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 when 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 is allowed to be specified in the tag of the list item
- .
A bulleted list uses special characters called list bullets (often called bullets, which is the formal pronunciation of the English term bullet) to highlight its items. The type of list markers is determined by the browser, and when creating nested lists, browsers will automatically diversify the look of markers at various levels of nesting.
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 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 list item must begin with a tag
- which contains all the displayed contents of the list):
