Examples of stylish design of ul li lists CSS. How to place list items horizontally? Html ol ul elements are used to create
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.
- A - capital Latin letters;
- a - lowercase Latin letters;
- I - capital Roman numerals;
- i - lowercase Roman numerals;
- 1 - Arabic numerals
- 1 numbered list item
- 2 element of numbered list
- 3rd element of a numbered list
- 1 numbered list item
- 2 element of numbered list
- 3rd element of a numbered list
- 1 numbered list item
- 2 element of numbered list
- 3rd element of a numbered list
- 1 numbered list item
- 2 element of numbered list
- 3rd element of a numbered list
- 1 numbered list item
- 2 element of numbered list
- 3rd element of a numbered list
- 1 numbered list item
- 2 element of numbered list
- 3rd element of a numbered list
- 1 numbered list item
- 2 element of numbered list
- 3rd element of a numbered list
- 1 numbered list item
- 2 element of numbered list
- 3rd element of a numbered list
- 1 numbered list item
- 2 element of numbered list
- 3rd element of a numbered list
- First line
- Second
- Last element
- — filled circle (default);
- - unfilled circle;
- - square
- Marker in the form of a filled disk
- Marker in the form of an unpainted disk
- Square
- First line
- Second point
- Third line
- — 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;
- numbered with large Roman numerals
- Numbering in small Latin letters
- Numbering with small Roman numerals
- 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
- First point with number one
- This element will receive the number specified in the value="32" attribute
- Item with a large number
- First point
- Second
- Last
- First term
- Description
- Second term
- Its description
- The first paragraph of the main numbered
- Second point
- First element of nested bulleted
- Second
- Third and last bullet point
- Third element numbered
- 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.
- (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
- a lion
- Virgo
- Scales
- Scorpion
- Sagittarius
- Capricorn
- Aquarius
- Fish
Zodiac signs:
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 bullet type specification for an individual list item differently. 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 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 Zodiac signs:
Aries
Rice. 2.2. Bulleted list with graphic bullets
In the example given, the graphic file Green_ball.gif is used as a list item marker. Note that the use of graphics on HTML pages can significantly increase the amount of information transmitted. However, in this case this increase is extremely insignificant. 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 provides an ordered list of the brightest stars, in which the 58th and 75th places contain 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 numerals, 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
Let's continue our conversations 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 in this series, as well as the introductory article about starting to study html for those who are not yet familiar with them.
Now we will continue studying tags. I will assume that the reader is already familiar with the material in the above articles.
As always, work plan:
- Paragraphs
- Line breaks
- Lists and list elements
- Headings
- Horizontal rulers
Paragraphs
The text almost always consists of paragraphs. A paragraph is an element of text that conveys a complete thought.
In html, a paragraph, as can be seen from the title, is denoted by . The letter "p" is taken from the word "paragraph", which just means "paragraph".
Let's look at an example:
The text of the first paragraph. It contains a thought. But the thought is over.
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 any special comments. If we look at this code in a browser, we will see two lines with one empty 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 this is exactly the formatting that is often used on the Internet, so it is often left in Russian-language texts. However, if you don't like this behavior, you can change it using CSS.
Line breaks
Sometimes you need to translate a line without finishing a thought or closing a paragraph. That is, just go to a new line. There is a single tag for this
. Here is an example of its use:The wind is blowing merrily
And the boat speeds up
He runs in the waves
With sails raised.This fragment of a poem by A.S. Pushkin helped us illustrate the action of the tag
. I specifically placed the last two lines of this quatrain in one line of code to show that the lines are transferred to a new line not because we placed line breaks, but because we placed tags
. This tag is very simple and does not need detailed explanations, so we will stop discussing it here.Lists,
- and list elements
Sometimes you need to list something in the text. For this purpose, three tags are used: ul, ol, li. All of these tags are container tags, but the tag is always contained in one of the or containers, and has no meaning outside of them. The ul container is used when we don't care about the order of the items listed, and we don't want to focus on the order in which they appear. The ol tag, on the contrary, focuses attention on the sequence of elements, automatically numbering each line. Let's look at an example:
- Bun
- Pie
- Loaf
- Pie
On the browser screen this code will look like this:
- Bun
- Pie
- Loaf
- Pie
If we simply replace the ul tag with the ol tag, we get a numbered list:
- Bun
- Pie
- Loaf
- Pie
Now it looks like this:
- Bun
- Pie
- Loaf
- Pie
Nobody forbids nesting one list within another, forming nested lists with sublists:
- Saw
- Screwdrivers
- Straight
- Cross
- Drill
Tools:
You need to experiment a little 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 using CSS.
Headings
Of course, paragraphs help in structuring documents. But in order to break a large text into smaller logical parts, you can title each of them. Each part can contain further subparts, with their own lower-level headings, and so on. To set the title, use tags
, where “x” is a number from 1 to 6. The higher the number, the lower the heading. That is, the top-level heading will be called h1, and the bottom-level heading will be called h6. By default, the text in these headings is displayed in large font and indented. 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 are one, maximum two top-level h1 tags on a page. As the level decreases, the number of tags increases. But it’s rare that a webmaster will be able to break up the text so much that he needs level 5 or 6 headings. Even level 4 is rarely used. Talk less, work more!
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 (similar to 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 the output of a list of directories in the UNIX and MS-DOS operating systems when using the /W switch (in several 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 are usually 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 the given list should be displayed 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 the latest versions of Netscape and Internet Explorer browsers. 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
- .
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 placed sequence numbers and replace them with manually specified values, clutter 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
Hello, dear readers! Today, as a continuation of the series of articles under the “HTML Basics” section, I want to introduce you to the algorithm for creating lists html with help tags ul and li (bullet list), ol and li (numbered list), dl, dt, dd (definition list).
Now I will continue to introduce you to the most commonly used html tags, which are used to create lists on website pages. If someone does not know what this is, surely after the information received below they will immediately understand what we are talking about, since this form of presenting the material is very common.
HTML bulleted lists - ul and li tags
The bulleted list will be defined by the ul tag. Between the opening and closing ul tags there are list elements, the contents of each of which must, in turn, be located between the opening and closing li tags. Let me immediately note that the ul tag is paired (the presence of an opening and closing tag), and also block-level, that is, it forms a container that includes elements (lines) formed each time by the li tag. Accordingly, the li tag is paired and lowercase.
The default appearance of a marker is a filled circle. However, you can change its appearance by using the type attribute, which has the following values: disc, circle, square. The disc value (which determines the appearance of the marker as a filled circle) is the default. That is, if the type attribute is not specified, then the appearance of the marker will look like a filled circle. If we add these attributes to the ul tag, we get the following options:
Naturally, each marker of an individual element of a bulleted list can be given its own appearance by specifying the corresponding values of the type attribute.
Numbered HTML lists - ol and li tags
Now let's see how a numbered list is formed using ol tags (a block and pair tag similar to ul). The li tag is also used here as a tag that defines the elements of a numbered list in HTML. A numbered list is a collection of numbered elements. The type of numbering is determined by the type attribute, which can take the following values:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
You can also provide a numbered list where the elements are numbered in reverse order, for example: 3, 2, 1. This is done using the reserve attribute of the ol tag.
There is also the option to start a bulleted list from any number other than 1. To do this, you can use the start attribute, and it does not matter what value the type attribute is set to. See an example of using the name attribute in conjunction with different type attribute values (1 and I):
HTML definition lists - dl, dd, dt tags
Another type of html list is a definition list. It is formed as follows. The content of this list lies between the opening and closing dl tags, which form the container. The dt tag defines a term, and the dd tag describes that term.
As you can see, the content of the dt tag, which is a term, is shifted to the left, and the content of the dd tag, which is the definition of this term, is written in italics. All this is achieved through the use of various CSS styles, which we will certainly talk about in upcoming publications.
By the way, modern realities are such that the html language cannot be considered in isolation from, therefore, in order not to miss these important materials, subscribe to blog updates via RSS feed or by e-mail. This concludes the topic of today’s article; if you have received the necessary information, do not refuse to use the social network buttons.
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:
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 organize a bulleted (not ordered) listing, and everything you 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 specifying different values 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):
In the above examples, we specified the “Type” attribute in the UL element, using this type of marker 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 different bullet types for each item:
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:
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:
An example of a numbered list with different types of numbering for each item:
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:
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:
Designing the appearance of 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 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.
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).
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:
Good luck to you! See you soon on the pages of the blog site
You might 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 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 tags 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 (no CSS used) 
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)
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 and printed documents. 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, the 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:
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. The following tags are used to implement lists of various types:
- ,
- ,
- ,
- , with the help of which lists of this type are organized in HTML documents (UL - Unordered List, unordered list).
In a bulleted list, special characters called list markers are used to highlight its elements (they are 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 tag container, 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