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. The browser adds one-line indents at the top and bottom of HTML lists, 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 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 will simply give an example of various markers 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 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 inline tags can be inserted inside a DT element (it turns out that block elements of headings and paragraphs cannot be used inside 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 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 - Html tags for the form of drop-down lists and text fields 
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 by HTML standard 4.01
Tables in Html - Table, Tr and Td tags, as well as Colspan, Cellpadding, Cellspacing and Rowspan for creating them 
What is hypertext language HTML markup 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)
Task
Display a bulleted list horizontally without bullets.
Solution
Bullet tag
- displays elements by default
- vertically above each other. To create navigation elements, in some cases it is convenient to display the list horizontally. There are several ways to achieve this list display.
You should already know that HTML has block and inline elements. Inline elements do not create their own blocks; an example of such elements is tags or . Block elements are displayed on a new line and create a rectangular block, an example of such tags
orSo here's the tag
- is also a block element.
To tag
- did not behave like a block element, it is possible with CSS help make it lowercase.
Responsible for how the element will be displayed in the document CSS property display. Let's consider three of its meanings (although there are more):
- block - the element is displayed as a block element.
- inline - the element is displayed as inline.
- inline-block - block-line element, read more about this type of element below, we will use it.
First, let's make a horizontal list by turning its bullet points into inline elements. IN CSS style Let's write a rule in which the li selector is set to the display property with the value inline .
List horizontally
So, this style worked and we got a horizontal arrangement of list items:
Figure 1. Example #1 at work.
This method has disadvantages. The fact is that inline elements have some limitations compared to block elements. For example, they cannot be given width and height, but block ones can.
For example, we need the menu element we create to have a width of 150px and a height of 40px. Let's try to change the style to the following, that is, add two rules that set the size of the menu item:
These edits will not lead to any changes. In order for menu items to be positioned horizontally and to be able to set their width and height, they need to set the type to inline-block . Let's change our example code:
List horizontally
This code works and the changes are visible:
Figure 2. Example No. 2 in action. But there may be different options, for example we need to display nested lists in the menu:
Nested list.
Here is the result of this code:
Figure 3. Example No. 3 at work. We see that the blocks are not aligned in height as we would like. Of course, you can specify the same height for all blocks, but we don’t always know its exact value in advance, and it can change.
But actually, why does this happen?
Our blocks have a display property set to inline-block . This means that they have the qualities of both block elements (the ability to specify width and height) and inline elements. What we are seeing is the quality of the inline elements.
Let's look at a string with "A" characters of different sizes:
A A A A A A A
We see that all letters are vertically aligned along the bottom line. More precisely, along the baseline, but let’s not get into the weeds now. So, the same thing happened with our blocks.
To align text vertically, use the vertical-align property. In our example #3, we need to use the value top , which will align the top border of the element to the top of the tallest element on the line.
For now let's apply it to a string with "A" characters of different sizes:
A A A A A A A
The letters seem to "jump" a little. I set the CSS border to the tallest letter to show that there are actually no jumps, just empty space between the top border (where the alignment occurs) and the top point of the "A".
The vertical-align property must be applied to each inline element, it is not inherited. You can read more about this property: vertical-align .
After this digression, we will continue to place the list elements horizontally.
Second way
You can place list items horizontally using the float property. This property specifies which side the element is aligned on, and has two positions: left and right .
Here's an example using this code:
List horizontally
Here is the result of the code:
Figure 4. Example working. The example seems to work. But there is one caveat in using this property. Now we will look at it. For example, let's take a code in which there are two horizontal lists with different ways of arranging elements horizontally: display and float :
List horizontally
Here is the result of the code:
Figure 5. Example working. In these examples the list containers
- have a red border 1 pixel thick. But the top list, which uses the display property, includes list items. But the elements of a list created using the float property fall out of their container.
- are still located outside the container
-
.
- (list element).
Browser support
Attribute
Opera
IExplorer
Edgestart , type Yes Yes Yes Yes Yes Yes reversed Yes Yes Yes Yes No No Attributes
Attribute Meaning Description compact compact Not supported in HTML5.
Specifies that the list should be smaller than normal size (line-height: 80%).
Use CSS instead of this attribute.reversed Specifies that the order in a numbered (sorted) list should be descending. The attribute is not supported by browsers Internet Explorer and Edge. start number Defines the starting value of a numbered (ordered) list. Values must be integer, but you can use negative values. When used with letters (type = "A" and type = "a"), the number specified in the attribute value is the letter's ordinal number in the alphabet. For example, start = "4" will match the letter "D" and the list will start with her. When using the value start = "27", the counter is reset to zero, and the list becomes two-digit ("27" = "AA", "28" = "AB", "29" = "AC"...). type 1 (default)
A (large)
a (lowercase)
I (Roman large)
i (Roman small)Defines the type of bullet that is used in constructing a numbered (ordered) list. Usage example
Example of using a tag <ol> <span> - First pointSecond point
- Third point
- First point.
- Second point.
- Third point.
It will look like this on the page:
If you want the list to start at a specific number (not 1), then you need to specify the start attribute for the tag
-
.
For example:
Another interesting attribute is type , which will allow you to specify alphabetic numbering ("A" - uppercase, "a" - lowercase), or Roman numeral numbering ("I" - uppercase, "i" - lowercase).
Let's look at an example that presents all possible values for the type attribute (other than the default value):
Example of using the type attribute of an HTML tag<оl> - >
- Third point
- First pointSecond point
- Third point
- First pointSecond point
- Third point
- First pointSecond point
- Third point
- ):
Example of a numbered list nested within another numbered list <span> -
First point
- Third point Second point
-
First point
- Third point
- 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
- paragraph 1
- point 2
- point 3
- paragraph 1
- paragraph 1
- paragraph 1
- paragraph 1
- point 2
- point 3
- Heading 1
- Heading 2
- Heading 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:
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.
Lists can be numbered or unnumbered.
Numbered lists are output with the code:
- List with numbers
Unnumbered lists are displayed with the following code:
- List with check marks or other symbols
Each item in any list is enclosed in an li tag. All list items are enclosed in one common ul or ol tag. The styles of these tags are written in the style sheet.
Each tag is assigned specific design styles. They indicate indents from the text.
For a numbered list, numbering styles are specified for each item.
Standard Arabic numerals are described by the value decimal.
list-style-type: decimal; /*Arabic numerals*/
For a bulleted list, specify the character style - squares or circles.
list-style-type: circle; /*circles*/
list-style-type: square; /*squares*/Each menu item can be assigned an image.
list-style-image: url('path to image');
Typically, in templates, a numbered list is formatted with simple numbers, and a non-numbered list is formatted with black squares and circles. It's boring and expressionless. Let's fix this.
Where are the list styles written in the Twenty Eleven template?
Open the style.css file. Find the section called /* Text elements */
The standard code looks like this:
How to create a numbered list?
Numbered list using background
Look at this cute numbered list design.
Like? Let's repeat.
Find styles for the ol tag. Add new properties to it.
Ol ( padding: 0px 0 0 20px; margin: 0.5em 0 1.571em 1.9em; color: #2E2E2E; list-style-type: none; font: 15px/17px Verdana, Arial, Helvetica, sans-serif; z-index : 2; counter-reset: point; ) ol li ( margin-bottom: 4px; line-height: 1.6; color: #2E2E2E; position: relative; ) ol li:before ( margin-bottom: 4px; counter-increment: point 1; line-height: 1.6; height: 24px; margin-left: -36px; left: 0px; width: 24px; margin-top: 1px; background: #BDC3C7; content: counter(point); text-align: center; position: absolute; font-weight: bold; )
In order for you to understand where and what you need to change to suit your design, let's break this code down piece by piece.
list-style-type: none; — disables the output of standard numbers
counter-reset: point; — sets a variable for the numbering counter
position: relative; — places numbering next to the items themselvesbefore is a pseudo element for the ol li tag. Has the following styles:
content: counter(point); — displays the value of a variable
counter-increment: point 1; — increases the counter by 1
position: absolute;
background: #BDC3C7; — background for numbers (the background can be set with a color or a beautiful icon
margin – external margins
padding – internal padding
color – element text color
background – background
text-align – text alignment
font-weight – font thickness (saturation)In your styles, you can set any colors, alignments, font sizes and indents.
Numbered list with a unique image for each item
One women's site has very attractive numbered lists.
How is this implemented? Let's look at the following code:
/*first number*/ ol li:first-child ( list-style-image: url(path to image with number 1); ) /*second number*/ ol li:nth-child(2n) ( list-style- image: url(path to the image with the number 2); ) /*third number*/ ol li:nth-child(3n) ( list-style-image: url(path to the image with the number 3); ) /*fourth number */ ol li:nth-child(4n) ( list-style-image: url(path to the image with the number 4); ) /*Next we write exactly the same only for the next item numbers*/
In the code for such a numbered list, you need to list all the item numbers and assign a unique icon to each of them.
If you use up to 20 numbered items in lists in articles, then you need to write the pseudo-class nth-child(An) 20 times. So that the last in the styles is the nth-child(20n) pseudo-class.
Find the lines in the styles file that describe the design of the numbered list (ol li tags).
Add the first-child pseudo-class to it. Copy and paste it once, then change this property to nth-child(An) and copy as many numbers as you want to have their own icon. Enter the item numbers.
For each number, add the list-style-image property with its own unique icon.
If the icons on the site are located far from the items or overlap them, then you need to edit the alignment and indentation of the digital icons or the text of the items.
How to create a bulleted (unnumbered) list?
Bulleted list ul li with alternating icons
I really liked this bulleted list.
Ul ( padding: 11px 0 5px 0; ) ul li ( padding-left: 32px; margin-bottom: 10px; font: normal 15px Verdana, sans-serif; color: #2E2E2E; line-height: 1.6; border-bottom: 1px dashed #ccc; padding-bottom: 10px; ) ul li:before ( content: ""; position: absolute; width: 27px; height: 24px; margin-left: -35px; margin-top: -2px; background: url("images/sprite.jpg") 0px 2px no-repeat; list-style-type: circle; ) ul li:nth-child(2n):before ( content: ""; position: absolute; width: 27px; height: 43px; margin-left: -35px; margin-top: -2px; background: url("images/sprite.jpg") 0px -17px no-repeat; list-style-type: circle; )
Instead of the standard list-style-type, you can assign the “path to the icon” property - list-style-image:url. But then you need to specify an external left margin from the edges of the site - without it, the icons will not be displayed and will go beyond the content area.
For the experiment, you can assign indents:
Ul li( list-style-image: url(images/radio.png); margin-left: 30px; )
The alternation of icons can be set with the nth-child(An) property. The example above uses the before pseudo-element.
The code contains one pseudo-class nth-child(2n). Its value is 2. It turns out that each even-numbered point corresponds to another icon. If instead of 2n you write 2n+1, then another icon will appear on odd-numbered points.
For each list item, you can specify an underscore. In the example above, the points are underlined with dotted lines.
You can also assign frames, backgrounds, and icons to each item. Just don't overdo it. Our goal is not to blow everyone away with a fancy design, but to improve the quality of content perception.
How to display several lists with different designs on a page?
Sometimes you need to place several lists with different styles.
If you assign common styles, then the same design will be assigned to all lists. Different lists can be displayed if you assign a separate id to the ol or ul tag and enter it in the html mode of editing the article. Well, in the style file for this id you need to write separate styles.
Here, for example, is one nice content design option:
In HTML you would write the list like this:
- Content
In CSS you would write styles like this:
Ol#sod( padding: 0px 20px 10px 51px; margin: 0.5em 0 0em 1em; color: #2E2E2E; list-style-type: none; background: #f1f4f5; border-left: #BDC3C7 4px solid; display: inline- block; ) ol#sod li() ol#sod li:before( font-weight:normal !important )
The new style differs from the main one in the design of the ol tag: background, display style, line to the left of the content.
By using several lists of different design in the text, you will make the presentation of information even more interesting. When listing any items, you can set some icons, and when listing actions, you can set different ones. Here the design is limited only by your imagination.
These methods are also applicable in the design of menu items, headings and any other elements of the site.
How to create anchor links in a content list?
How to write them in HTML code? One piece of code frames the anchor of the link, and another piece of code is placed next to the place where we need to be redirected when clicking on the link.
- Content
And in the text of the article you need to write this:
Heading 1… Heading 2… Heading 3…
Maybe more experienced webmasters can correct me on something. I simply advise what I have tried in practice myself.
If you still have any questions, I will be glad to see them in the comments.
Ageeva Veronica.
You might also be interested in:
Figure 7. Example working. In addition, in work we do not always know which element will follow the element using float. The ideal option would be to close the operation of the float property in the same block in which it is open.
This is done using a pseudo element. Here's the code:
List horizontally
Now we have 100% working code.
Figure 8. Example working. This technique with float property usually used in website layout to align columns created by tags
. In this way we get a normal construction of columns with the required height alignment. When we create a menu, in most cases the height of the blocks is not important to us; it is almost always the same. Therefore, using the rule (display: inline-block) in these cases is quite justified.But for the completeness of the topic, we have familiarized ourselves with all possible options. Although there may be other ways, for example, using CSS tables, search engines strongly recommend using tables only for their intended purpose, and not for organizing navigation elements or anything else.
HTML tagsMeaning and Application
A numbered (ordered) list is for items that appear in a specific order. A numbered list starts with a tag
- (short for English ordered list- ordered list). Each list element starts with a tag
- >
- >
- >
Please note that it is allowed to create numbered (ordered) lists nested within other numbered lists (inside a list element
It will look like this on the page.
The hypertext markup language HTML has a tag
- , used to create bulleted lists. It is supported by all 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.
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 of this list as we wish. 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
- (list element).
At first glance, everything works. But let's swap our lists. Let's put the list with the class menu-1 in the code before the list with the class menu-2 (now it is lower).
This is what we get as a result:
Figure 6. Example working. The items in the bottom menu also wrap around the top menu, because the effect of the float property has not been canceled and it applies to all subsequent elements.
How to solve this problem?
To do this, you need to use the clear property, it cancels the element's wrapping around another element if it has the float property set.
Here's a modified example using the clear property:
List horizontally
It can be seen that the lower list no longer wraps around the upper one, the elements do not collide with each other. But in the first list there are tags
- is also a block element.
