If you have ever tried to change CSS styles of line numbers (digits) in ordered lists
- , then you probably encountered problems. It is impossible to reach the styles of these elements using CSS selectors. But quite often interface design involves changing its color, background, size, etc.
- To plant a tree
- Build a house
- Raise a son
- 1 To plant a tree
- 2 Build a house
- 3 Raise a son
- To plant a tree
- Build a house
- Raise a son
- li::before– creates a pseudo-element inside the list, which takes the place of the first child.
- counter-reset:myCounter;– resets the myCounter css counter inside each
- .
- counter-increment: myCounter;– increments the css counter myCounter for each pseudo-element::before .
- content:counter(myCounter);– prints the current value of the myCounter counter inside the::before pseudo-element.
- 1 - decimal numbers (1, 2, 3, 4 ...).
- A- Latin letters in alphabetical order, in uppercase(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 lower case (i, ii, iii, iv ...).
- Coffee
- Tea
- Milk
- Coffee
- Tea
- Milk
- Element #1
- Element #2
- Element #3
- ...
- A - sets markers in the form of capital 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 that are the content of the bulleted list.
Note
Inside the list you can change the account to your own. There is a special attribute value="" on the tag for this purpose.
- , which is assigned some numeric value. For example
- Element #1
- Element #2
- Element #3
Examples with numbered lists in html (
- )
Example 1. HTML numbered list in Latin letters
Example with capital letters
- Element #1
- Element #2
- Element #3
- Element #1
- Element #2
- Element #3
Example with lowercase letters
- Element #10
- Element #11
- Element #12
This is what it looks like on the page:
- Element #1
- Element #2
- Element #3
Example 2. HTML numbered list in Roman letters
Example with capital letters
- Element #1
- Element #2
- Element #3
This is what it looks like on the page:
- Element #1
- Element #2
- Element #3
Example with lowercase letters
- Element #1
- Element #2
- Element #3
This is what it looks like on the page:
- Element #1
- Element #2
- Element #3
Example 3. Numbered list html different starting position
An example that shows the capabilities of the start attribute, which allows you to set the starting value of the counter.
- Element #1
- Element #2
- Element #3
This is what it looks like on the page:
- Element #1
- Element #2
- Element #3
Example 4. Changing the count in html numbered lists
Below is an example with the ability to change counter values using the value attribute when displaying new elements in tags
- .
- Element #1
- Element #2
- Element #3
- Element #4
This is what it looks like on the page:
- Element #1
- Element #2
- Element #3
- Element #4
Example 5. Reverse numbered list in html
Below is an example of a reverse numbered list (counting in reverse order).
- Element #1
- Element #2
- Element #3
- Element #4
This is what it looks like on the page:
- Element #1
- Element #2
- Element #3
- Element #4
Hello, dear readers of the blog site. Today, as part of this section, I want to talk about various Html lists that can be created based on UL, OL, LI and DL tags specially designed for this. The UL and LI pairs create bulleted lists, the OL and LI pairs create numbered lists, and the DL, DT and DD elements create so-called definition listings. We will also briefly consider the principles of creating nested structures.
I would like 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, and learned through.
Bullet 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 pairwise and block tags, just like the LI element.
Between the opening and closing tags are individual list items, which in turn are enclosed in an opening and closing LI element. Up and down HTML lists The browser adds indentation to a single line, similar to the indentation created by a paragraph tag.
Let's look at, for example, a bulleted option that might look like this:
- First line
- Second
- Last element
Only LI elements can be inside the opening and closing UL tags, and within these elements (clauses) themselves you can insert any content (text, pictures, headings, paragraphs, links and even other lists).
Those. The UL serves only to provide a bulleted (not ordered) listing, and everything you will see on web page within it, is implemented using the contents of LI elements.
For UL, you can change the type of marker by writing in it different meanings for the "Type" attribute. If “Type” (controlling the appearance of markers) for the UL element is not specified, then the default appearance of the marker will be displayed (disc - a circle filled in the color of the text):
- — filled circle (default);
- - unfilled circle;
- - square
In the above examples, we specified the “Type” attribute in the UL element using this type markers for all items. But the “Type” attribute can also be specified for each individual LI tag, setting its own marker type for this item.
Example of a bulleted list with various types marker for each item:
- Marker in the form of a filled disk
- Marker in the form of an unpainted disk
- Square
Numbered lists in Html based on the OL tag
To create a numbered listing, OL tags are used, within which LI elements will again be located. OL and LI, as I already mentioned, are block-based (that is, they tend to take up all the space available to them in width) and nothing except LI elements can be placed inside OL.
It turns out that OL and UL are service tags that are needed only to indicate to the browser what type of list we are creating (bulleted or numbered). In the case of a numbered item, 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 configure the type of marker or specify what numbers or letters will be used to number listing items. For a numbered list, the parameters of this attribute can take the following values:
- — numbering will be performed in regular 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 with 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 with the start="23" attribute
- The next item, with a number one higher
- 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 point with number one
- This element will receive the number specified in the value="32" attribute
- Item with a large number
Designing the appearance of lists in CSS (style sheets)
But usually now appearance markers are specified not through the TYPE attribute, but , for which the corresponding properties are specified.
Here I'll just give an example of different bullets for unnumbered lists, the appearance of which is set through separate file with cascading style sheets.
- First point
- Second
- Last
But we’ll talk about that in subsequent articles. This is how the appearance of the UL markers on this blog is set. Pictures are used as markers: for regular 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. DL tells the browser that what follows is a list of definitions.
Typically this type is used (or was intended to 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
- Its description
If you look at the example above, you'll notice that the DD element (the description of the term) is offset (by 40 pixels) relative to the DT element (the term itself).
In general, DL, DT and DD are block tags, and only content with line tags can be inserted inside a DT element (it turns out that inside DT it will not be possible to use block elements headings and paragraphs). 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 tag UL or OL.
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 bulleted
- Second
- Third and last bullet point
- Third element numbered
Good luck to you! See you soon on the pages of the blog site
You might be interested
How to insert into HTML link and a picture (photo) - IMG and A tags Select, Option, Textarea, Label, Fieldset, Legend - tags HTML forms dropdown lists and text field 
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 output and other programs 
Embed and object - HTML tag and for displaying media content (video, flash, audio) on web pages 
Tags and attributes of headings H1-H6, 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 for creating 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 - legacy 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 a picture (Src), aligning and wrapping text around it (align), as well as setting the background (background)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 elements in an order that does not require numbering. For example, it very often displays menu items and everything related to lists on the page: dishes, products, equipment, tools and much more that needs to be listed without indicating the priority of a particular item.
- Element #1
- Element #2
- Element #3
- ...
- Element #1
- Element #2
- Element #3
- Element #1
-
- Item #2-1
- Element #2-2
- Element #2-3
- Element #3
- ...
- Element #1
- Element #2
- Element #1
- Element #2
- Element #1
- Element #2
- Element #1
- Element #2
- ...
- disc - marker in the form of a circle (example was above)
- circle - marker in the form of a transparent circle (example was above)
- square - marker in the form of a square (example was above)
- decimal - marker in the form of a numbered list in Arabic numerals: 1, 2, 3, ...
- decimal-leading-zero - a marker in the form of a numbered list in Arabic numerals with a leading zero: 01, 02, 03, ...
- lower-roman - a marker in the form of a numbered list in the Roman alphabet in small letters: i, ii, iii, iv, v
- upper-roman - marker in the form of a numbered list in the Roman alphabet in capital letters: I, II, III, IV, V
- lower-latin - marker in the form of a list in the Latin alphabet in small letters: a, b, c, d, ...
- upper-latin - 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 - a 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 indicated by the attribute. But we can give this or that element its own display. Example in the picture:
- Element #1
- Element #2
- Element #3
- Element #1
- Element #2
- Element #3
- Element #1
- Element #2
- Element #3
- Element #1
- Element #2
- Element #3
The code looks like this:
Changing Tag Markers
- using CSS
Bullet list items created by tag
- , can be marked with arbitrary images. CSS is used to change the marker type. For example
And this is what it looks like on the page:
C using CSS we can set other types of marker display. But you need to remember that when specifying any style for a tag
- , it applies to all elements of the list.
Tag Syntax
This code translates into a bulleted list on the site:
Tag
- requires the mandatory use of a closing tag
To form list elements, a paired tag is used. Between the opening and closing tags are individual words, phrases, paragraphs, images, pieces of code, and much more that are the content of the bulleted list.
What can be the content of a bulleted list?This can be a variety of texts, including single words, phrases and paragraphs, images, nested lists, pieces of php code and much more that need simple marking.
Each bulleted list item is indented 40 pixels to the right by default. Using CSS styles, we can change the display this list at your own discretion. 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-within-a-list attachments are allowed.
For example
Tag Attributes and Properties
Widely used tag attribute
- is a type attribute indicating what 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 a little higher.
2. type="circle" - marker in the form of a transparent circle
For example:
3. type="square" - marker in the form of a square
For example:
And here's what it looks like on the page:
In CSS, the bullet type is specified using the list-style-type attribute:
Let's look at what values list-style-type can take:
Note 2
The attribute can be assigned to the tag itself
- , and tags
Here is the simplest example of an unstyled list:
html
Let's look at several ways to solve the above problem.
Traditionally a clumsy way.
The traditional way to solve this problem is to hide the line numbers that are automatically assigned by the browser. In this case, the list-style: none; property is used. .
css
li( list-style: none; ) .num( color: white; background: #2980B9; display: inline-block; text-align: center; margin: 5px 10px; line-height: 40px; width: 40px; height: 40px; )html
Agree, it looks redundant and inflexible. We hide automatically assigned sequence numbers and replace them manually given values, we clog up the layout, etc.
Let's see how we can achieve the same result without clogging up the layout and using the pseudo-element::before and the CSS properties content , counter-increment , counter-reset .
A beautiful and correct way.
First we will provide the code and demo, and then we will figure out what's what.
css
ol( counter-reset: myCounter; ) li( list-style: none; ) li:before ( counter-increment: myCounter; content:counter(myCounter); color: white; background: #2980B9; display: inline-block; text-align: center; margin: 5px 10px; line-height: 40px; width: 40px; height: 40px; )html
As you can see, the html code remains clean and beautiful. In this case, all styling of the list elements is transferred to css.
Let's look point by point:
More details about css counters can be found in
Description
Attributes
reversed: Specifies that the elements of the list will be in descending order (instead of ascending order). Possible values for the Boolean attribute:Note: the reversed attribute is only supported Chrome browsers and Safari.
Start: Sets the starting integer value from which the numbering of elements in the list will begin. Example » type: Defines 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 the initial value (start value) of the report.
The reversed attribute specifies reverse counting (if necessary).
Tag
- requires the mandatory use of a closing tag
To form list elements, a paired tag is used
Loading...
