Html ol ul elements are used to create. How to arrange list items horizontally? Multilevel numbered list
Hello, dear readers of the blog site. Today, under this heading, I want to talk about the various Html lists that can be created based on the UL, OL, LI and DL tags specially designed for this. With the help of a pair of UL and LI, bulleted lists, 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 briefly consider the principles of creating nested structures.
I want to remind you that we have already managed to talk about the basics of modern, as well as tabular 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 the OL tag is used to create numbered lists. These tags are paired and block tags, just like the LI element.
Separate list items are located between the opening and closing tags, which in turn are enclosed in the 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 the paragraph tag.
Let's see, for example, a labeled version that might look like this:
- First line
- Second
- Last element
Inside the opening and closing UL tags, only LI elements can be placed, and already inside these elements (paragraphs) you can insert any content (text, pictures, headings, paragraphs, links, and even other lists).
Those. UL only serves to organize a labeled (not ordered) listing, and everything that you will see on web page inside it is implemented using the content of the LI elements.
For UL, you can change the type of marker by writing in it different meanings for the "Type" attribute. If "Type" (managing the appearance of markers) for the UL element is not specified, then the default marker type will be displayed (disc is a circle filled in the color of the text):
- — filled circle (default);
- - unfilled circle;
- - square
In the examples above, we have written the "Type" attribute on the UL element using given type markers for all items. But the "Type" attribute can also be set for each single tag LI by giving this item its own marker type.
An example of a bulleted list with various types marker for each item:
- Filled disk marker
- Marker in the form of an unshaded disc
- 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-level (i.e., they tend to take up all the space available to them in width) and nothing can be placed inside OL except for 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 forming (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, UL, OL, and LI elements have the ability to use the TYPE attribute. It allows you to set the marker type or specify what numbers or letters the listing items will be numbered with. For an ordered list, the parameters of this attribute can take the following values:
- — numbering will be performed by 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:
- numbered in large Roman numerals
- Numbering in small Latin letters
- Numbering with 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 example:
- The first element whose number is specified in the OL tag by the attribute start="23"
- The next item, with a number one more
- Another 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 example:
- First item number one
- This element will receive the number specified in the attribute value="32"
- Item with a large number
Styling the appearance of lists in CSS (style sheets)
But usually now appearance markers are set not through the TYPE attribute, but , for which the corresponding properties are written.
Here I will just give an example of various markers for unordered lists, the appearance of which is specified through separate file with cascading style sheets.
- First point
- Second
- Last
But we will talk about it in future articles. This is how the appearance of markers for UL 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 last type is called "definition lists" and they are set using three tags - DL, DT and DD. The DL tells the browser that a list of definitions will follow.
Typically, this kind is used (or was supposed to be used) to write dictionary entries consisting of terms (included in DT tags) and their descriptions (included in DD tags).
- First term
- Description
- Second term
- His description
If you look at the example above, you will notice that the DD element (term description) is shifted (by 40px) relative to the DT element (the term itself).
In general, DL, DT and DD are block tags, and only content with inline tags can be inserted inside the DT element (it turns out that block elements of headings and paragraphs cannot be used inside DT). And inside the 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 again enclosed in the opening and closing UL or OL tag.
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
- First element of nested labeled
- Second
- The third and last point of the marked
- The third element of the numbered
Good luck to you! See you soon on the blog pages site
You may be interested
How to paste in HTML link and a picture (photo) - IMG and A tags Select, Option, Textarea, Label, Fieldset, Legend - tags Html forms dropdown lists and textboxes 
Html forms for the site - tags Form, Input and Select, Option, Textarea, Label and others for creating web form elements 
How colors are set in Html and CSS code, selection of RGB shades in tables, Yandex results and other programs 
Embed and object html tag and to display media content (video, flash, audio) on web pages 
H1-H6 heading tags and attributes, horizontal line Hr, line break Br and paragraph P according to 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 a hypertext language Html markup and how to list all tags in the W3C validator 
Font (Face, Size and Color), Blockquote and Pre tags - deprecated text formatting in pure HTML (without using 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)
Description
Attributes
reversed: Specifies that the elements of the list will be in descending order (instead of ascending order). Possible boolean attribute values:- 1 - decimal numbers (1, 2, 3, 4...).
- A- latin letters in alphabetical order, in upper case(A, B, C, D...).
- a- latin letters in alphabetical order, in lower case(a, b, c, d...).
- I- Roman numerals in uppercase (I, II, III, IV ...).
- i- Roman numerals in lowercase (i, ii, iii, iv ...).
- Coffee
- Tea
- Milk
- Coffee
- Tea
- Milk
- 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 - sets markers in the form of small Roman numerals (i, ii, iii, iv..);
- 1 (default) - sets markers in the form of Arabic numerals (1, 2, 3..);
- . Between the opening and closing tags are individual words, phrases, paragraphs, images, pieces of code, and much more, which are the contents of the bulleted list.
Note
Inside the list it is possible to change the account to your own. There is a special attribute value="" for this tag.
- , which is assigned some numeric value. For example
- Item #1
- Item #2
- Item #3
Examples with numbered lists in html (
- )
Example 1. Numbered list of html in the form of Latin letters
Example with capital letters
- Item #1
- Item #2
- Item #3
- Item #1
- Item #2
- Item #3
Lower case example
- Item #10
- Item #11
- Item #12
Here's what it looks like on the page:
- Item #1
- Item #2
- Item #3
Example 2. Numbered html list in roman letters
Example with capital letters
- Item #1
- Item #2
- Item #3
Here's what it looks like on the page:
- Item #1
- Item #2
- Item #3
Lower case example
- Item #1
- Item #2
- Item #3
Here's what it looks like on the page:
- Item #1
- Item #2
- Item #3
Example 3. Numbered html list with different start position
An example that shows the capabilities of the start attribute, which allows you to set the start value of the counter.
- Item #1
- Item #2
- Item #3
Here's what it looks like on the page:
- Item #1
- Item #2
- Item #3
Example 4. Changing the count in html numbered lists
Below is an example with the ability to change the counter values using the value attribute when displaying new elements in tags
- .
- Item #1
- Item #2
- Item #3
- Item #4
Here's what it looks like 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 (count in reverse order).
- Item #1
- Item #2
- Item #3
- Item #4
Here's what it looks like on the page:
- Item #1
- Item #2
- Item #3
- Item #4
Element
- (from the English "unordered list" - "unordered list") creates a bulleted (unordered) list. Typically, the element
- , which, in addition to text, can include other HTML elements (lists, images, headings, paragraphs, etc.). By default, bulleted lists appear on a web page as a list starting with a small black circle. Browsers, when displaying list items, add a slight indent from the left edge.
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 list-style-image property, which allows you to replace markers with images. To create numbered lists, use the tag
- .
- ... ...
Syntax
Closing tag
Required.
Attributes
compactDeprecated in HTML5 Reduces indentation and spacing between lines. type HTML5 Sets the type of 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
- paragraphs
- Line breaks
- Lists, and elements of lists
- Titles
- Horizontal rulers
- Bulka
- Pie
- Loaf
- Pie
- Bulka
- Pie
- Loaf
- Pie
- Bulka
- Pie
- Loaf
- Pie
- Bulka
- Pie
- Loaf
- Pie
- Saw
- Screwdrivers
- Straight
- cross
- Drill
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:
HTML example:
Try it yourselfSpecifications
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 can I make the list start with a number other than 1.
Let's continue our talk about the beginnings of html. In this article, I want to talk about how to create paragraphs, lists, and headings in text. And also, about single tags
and
.I strongly advise you to read the first lesson of this series, as well as an introductory article about the beginning of learning html for those who are not yet familiar with them.
Now we will continue to study tags. I will assume that the reader is already familiar with the material of the above articles.
As always, the work plan:
paragraphs
The text almost always consists of paragraphs. A paragraph is an element of text that carries a complete thought.
AT html paragraph, as can be seen from the title, is denoted by . The letter "p" is taken from the word "paragraph", which once again means "paragraph".
Consider an example:
The text of the first paragraph. It contains thought. But that's where the thought ends.
Another thought has already begun and we write it in another paragraph.
As you can see, the use of paragraphs is very simple and does not require much comment. If we look at this code in a browser, we will see two lines with one blank line between them. In Russian texts, it is customary to separate a paragraph not by an empty line, but by shifting the first line to the right. But such formatting is often used on the Internet, so it is often left in Russian-language texts. However, if this behavior does not suit you, you can change it using CSS.
Line breaks
Sometimes you need to translate a line without finishing a thought, without closing a paragraph. That is, just move to a new line. There is a single tag for this
. Here is an example of its application:The wind blows merrily
And the boat is pushing
He runs in waves
On raised sails.This fragment of a poem by A.S. Pushkin helped us illustrate the effect of the tag
. I deliberately placed the last two lines of this quatrain in one line of code to show that the lines are wrapped to a new line not because we placed line breaks, but because we placed tags
. This tag is quite simple and does not need detailed explanations, so we will end our discussion of it here.Lists,
- and list items
Sometimes you need to list something in the text. Three tags are used for this purpose: ul, ol, li. All of these tags are container tags, but the tag is always contained in one of the containers or , and has no meaning outside of them. The ul container is used when we don't care about the order in which the items are listed, and we don't want to focus on the order in which they appear. And the ol tag, on the contrary, focuses on the sequence of elements, automatically numbering each line. Consider an example:
On the browser screen, this code will look like this:
If we simply replace the ul tag with an ol tag, we get a numbered list:
Now it looks like this:
Nobody forbids nesting one list into another, forming nested lists with sublists:
Tools:
It takes a bit of experimentation with these lists to get used to using them. There is another type of list, but it is rarely used, so I will not talk about it now. Maybe in another article.
Of course, like everything else, the appearance of these elements can be changed beyond recognition with CSS.
Titles
Of course, paragraphs help in structuring documents. But in order to break big text into smaller logical parts, you can name each of them. Each part can contain more subparts, with their own lower-level headings, and so on. Tags are used to set the title.
, where "x" is a number from 1 to 6. The heading is the lower level, the higher this number. That is, the title of the top level will be called h1, and the lowest - h6. By default, the text found in these headings is displayed in a large, indented font. This text is displayed on the entire line, that is, hx tags are block tags. The h1 tag has the largest font, and the h6 tag has the smallest font. As a rule, there is one, maximum - two top-level h1 tags on the page. As the level decreases, the number of tags increases. But rarely is a webmaster able to break up text in such a way that he needs level 5 or 6 headings. Even level 4 is rarely used. Talk less, work more!
16.03.2021A computer - inherit these properties.
- 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 all the width available to it, and the height size will depend on the amount of content.
Items for numbered lists are defined using the tag
Note: the reversed attribute is only supported Chrome browsers and Safari.
Start: Sets the starting integer value from which the items in the list will be numbered. Example » type: Specifies the type of marker to be used for list items:
Tag
- also supports Global Attributes and Events
Default style
ol ( display: block; list-style-type: decimal; margin-top: 1em; margin-bottom: 1em; margin-left: 0; margin-right: 0; padding-left: 40px; )Example
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" - a numbered list.
Tag syntax
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 needed).
Tag
- requires the use of a closing tag
To form the elements of the list, use pair tag
