HTML supports lists of three different types, each of which has its own parameters:

• – a numbered (using numbers or letters) list, each element of which has a serial number (letter);
  1. – a bulleted (not numbered) list, next to each element of which a marker is placed (rather than numeric or alphabetic characters indicating a serial number);

     • – a definition list consists of name/value pairs, including terms and definitions.

     Numbered lists

     In a numbered list, the browser automatically inserts element numbers in order, starting with a certain value (usually 1). This allows you to insert and delete list items without disturbing the numbering, since the remaining numbers will be automatically recalculated.
     Numbered lists are created using a block element

     (from the English Ordered List - numbered list). Next to the container
     for each list item an element is placed
     1. (from the English List Item - list item). The default is a numbered list with Arabic numbers.
        Tag
        has the following syntax:
        1. element 1
        2. element 2
        3. element 3

        Numbered list items must contain multiple list items, as shown in the following example:

        Example: Numbered List

        • Try it yourself "

        Step-by-step instruction

        1. Get the key
        2. Insert the key into the lock
        3. Turn the key two turns
        4. Get the key out of the lock
        5. Open the door

        Step-by-step instruction

        1. Get the key
        2. Insert the key into the lock
        3. Turn the key two turns
        4. Get the key out of the lock
        5. Open the door

        Sometimes when looking at existing HTML codes you will come across the argument type in element

        , which is used to indicate the type of numbering (letters, Roman and Arabic numerals and so on.). Syntax:

        Here: type – list symbols:

        • A - capital Latin letters (A, B, C...);
        • a - lowercase Latin letters (a, b, c...);
        • I - large Roman numerals (I, II, III...);
        • i - small Roman numerals (i, ii, iii...);
        • 1 - Arabic numerals (1, 2, 3 . . .) (used by default).

        If you want the list to start with a number other than 1, you should specify this using the attribute start tag

        .
        The following example shows a numbered list with large Roman numerals and a starting value of XLIX:

        Numbering can also be started using the attribute value, which is added to the element

        1. in the following way:

        7. In this case, the sequential numbering of the list will be interrupted and from this point the numbering will begin again, in this case from seven.

           Attribute usage example value tag

        8. , which allows you to change the number of a given list element:

           In this example, the "First List Item" would be number 1, the "Second List Item" would be number 7, and the "Third List Item" would be number 8.

           Formatting Numbered Lists with CSS

           To change list numbers you should use the property list-style-type CSS style sheets:

           Numbered list styles

           Example	Meaning	Description
           a, b, c	lower-alpha	Lower case
           A, B, C	upper-alpha	Capital letters
           i, ii, iii	lower-roman	Roman numerals in lowercase letters
           I, II, III	upper-novel	Roman numerals in capital letters

           Example: Applying a CSS Property list-style-type

           Bulleted lists

           Bulleted lists are essentially similar to numbered lists, only they do not contain sequential numbering of items. Bulleted lists are created using a block element

           (from the English Unordered List - unnumbered list). Each list element, as in numbered lists, begins with a tag
           • . The browser indents each list item and automatically displays bullets.
             Tag
             has the following syntax:
             • First point
             • Second point
             • Third point

             In the following example, you can see that, by default, a small marker in the form of a filled circle is added before each list item:

             Inside a tag

             • It is not necessary to place only text; it is acceptable to place any element of streaming content (links, paragraphs, images, etc.)

               Nested Lists

               Any list can be nested within another. Inside an element
             • It is permissible to create a nested list or a second-level list. To nest a list, describe the new list inside the element
             • already existing list. When you nest one bulleted list into another, the browser automatically changes the bullet style for the second-level list. Any list can be nested within another. The following example demonstrates the structure of a bulleted list nested within the second item of a numbered list.

               Example: Nested Lists

               • Try it yourself "
               • Monday
                 1. Send mail
                 2. Visit to the editor
                    • Choosing a theme
                    • Decorative design
                    • Final report
                 3. Evening viewing of messages
               • Tuesday
                 1. Revise schedule
                 2. Send images
               • Wednesday...
               • Monday
                 1. Send mail
                 2. Visit to the editor
                    • Choosing a theme
                    • Decorative design
                    • Final report
                 3. Evening viewing of messages
               • Tuesday
                 1. Revise schedule
                 2. Send images
               • Wednesday...

               Formatting Bulleted Lists

               For change appearance list marker property should be used list-style-type CSS style sheets:

               The following example shows different styles of bulleted lists:

               Example: Bullet List Styles

               • Try it yourself "
               • Coffee
               • Coffee
               • Coffee
               • Coffee

               Disc:

               • Coffee
               • Milk

               Circle:

               • Coffee
               • Milk

               Square:

               • Coffee
               • Milk

               None:

               • Coffee
               • Milk

               Graphic markers.

               In HTML it is possible to create a list with graphic markers. It’s one thing when the list markers are standard circles or squares, and quite another when the developer himself selects the marker in accordance with the page design. In order to make list items beautiful, small pictures are often used.
               To replace a regular marker with a graphic one, replace the property list-style-type per property list-style-image and indicate the URL of the image:

               Example: Graphic Markers

               • Try it yourself "

               Zodiac signs

               • Taurus
               • Gemini

               Zodiac signs

               • Aries
               • Taurus
               • Gemini

               Lists of definitions (descriptions)

               Definition lists are very useful for creating, for example, your personal dictionary of terms. Each definition list item has two parts: the term and its definition.
               You put the entire list into an element

               (from the English Definition List - list of definitions). It includes tags

               (from the English Definition Term - a defined word, term) and

               (from the English Definition Description - description of the term being defined).
               Lists of definitions are often used in scientific, technical and educational publications, using them to compile glossaries, dictionaries, reference books, etc.

               The general structure of the list of descriptions is as follows:

               First term

               Description of the first term

               Second term

               Description of the second term

               The following example shows one of the possible uses list of definitions:

               Example: Definition List

               • Try it yourself "

               World Wide Web - from English. The World Wide Web (WWW) is a distributed system that provides access to related documents located on different computers connected to the Internet. The Internet is a set of networks that use a single exchange protocol to transmit information. A website is a set of individual web pages that are interconnected by links and a uniform design.

               The World Wide Web

               - from English The World Wide Web (WWW) is a distributed system that provides access to related documents located on different computers connected to the Internet.

               Internet

               — a set of networks that use a single exchange protocol to transmit information.

               Website

               - a set of individual web pages that are interconnected by links and a uniform design.

               By default, the text of the term is pressed to the left edge of the browser window, and the description of the term is located below and shifted to the right.

               When it is necessary to number something on a website, an ordered list is most often used (

               ). It is reasonable to expect that there may be a desire to work on the design of these numbers. In CSS, however, realizing this desire is quite problematic, but, fortunately, not impossible. In his tutorial, Roger Johansson shows how this can be implemented using the:before pseudo-element, which can set the content property to counter .

               The:before pseudo-element is used to display the desired content before the element it is added to. Works in conjunction with the content property.

               It's worth making clear, however, that numbered counters can be applied to more than just ordered lists. For example, suppose you wanted to number a list of definitions (

               ), which consists of questions and answers for your FAQ.

               The markup will look something like this:

               How much wood would a wood chuck chuck if a wood chuck could chuck wood?

               1,000,000

               What is the air-speed velocity of an unladen swallow?

               What do you mean? An African or European swallow?

               Why did the chicken cross the road?

               To get to the other side

               Each new

               element is a new question, so we apply numbering to them. It will look extremely simple:

               The content property allows you to insert generated content into the text of a web page that is not originally present in the text.
               counter value Prints the value of the counter specified by the counter-reset property.

               The counter-reset property sets an identifier for the counter and sets the initial value.
               The counter-increment property specifies the step by which the counter value is increased.

               Faq ( counter-reset: my-badass-counter; ) .faq dt:before ( content: counter(my-badass-counter); counter-increment: my-badass-counter; )

               The :before pseudo-element can be assigned any style. For example:

               

               Having mastered this property, you can number whatever you want. The other day, for example, I posted one of my favorite recipes and numbered each step/photo with Roman numerals. This served as a reminder to me: numbers don't have to be decimals.

               

               The numeric variety is represented as values ​​of the list-style-type property.
               Namely:

               

               All that is required is to indicate the desired option in the counter value.

               Content: counter(my-counter, lower-roman);

               The Future of CSS3

               The above material is relevant for today, however, it pales in comparison with the possibilities that are hidden in CSS3 lists. Once browsers support them, it will be possible, for example, to work with list markers directly.

               Li::marker ( width: 30px; text-align: right; margin-right: 10px; display: inline-block; ) ol ( list-style: symbols("*""2020""2021""A7"); ) ul ( list-style-type: "there should be an asterisk here)"; )

               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.

               Here is the simplest example of an unstyled list:

               html

               1. To plant a tree
               2. Build a house
               3. Raise a son

               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

               1. 1 To plant a tree
               2. 2 Build a house
               3. 3 Raise a son

               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

               1. To plant a tree
               2. Build a house
               3. Raise a son

               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:

               • 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
                 .
                 1. counter-increment: myCounter;– increments the css counter myCounter for each pseudo-element::before .
                 2. content:counter(myCounter);– prints the current value of the myCounter counter inside the::before pseudo-element.

               More details about css counters can be found in

               
               

               Quite often you have to use numbering: when creating various lists, lists, designing a table of contents or table of contents, etc.

               CSS uses counters to automate the numbering process.

               Let's start with a simple example. Then, in a more complicated way, we’ll create a nested list with automated numbering of its items and sub-items.

               Meter identification

               First you need to identify the meter.

               Using the counter-reset property, the counter is assigned a name and an initial value. The name can be anything, but cannot start with a number.

               Code snippet:

               This entry says that for the tag a counter named number with an initial value of 3 is installed.

               By default, the initial value of the counter is 0.

               Counter increment

               The counter-increment property is used for this. It is also used to specify counter increments - the number by which the counter value will increase.

               Code snippet:

               body ( counter-reset : number 3 ;)
               body p ( counter-increment : number 3 ; }

               This code snippet says that paragraphs ( tag

               ) in the body of the document will be numbered with the number counter in increments of 3.

               The first paragraph will be numbered 6, since the initial value of the counter is 3 and its increment is 3.

               The default value for counter increments is 1.

               Now all the necessary counter parameters are set: name, initial value, increment and element that will be numbered. Further....

               Counter display

               Now you need to display the counter value and set the rules for its location. This is done using the content property and the before and after pseudo-elements.

               The content property inserts the content before ( before) or after ( after) of the specified element.

               Code snippet:

               body ( counter-reset : number 3 ;)
               body p:after ( counter-increment : number 3 ; content : " equals " counter(number) "." ;)

               So, to the previous code snippet we added a content property that prints the word "equals" followed by the value of the counter number and a dot "." . All this is inserted onto the page after the paragraph content ( tag

               ), which is what the after pseudo-element says.

               Eventually...

               Below is the described example.

               Code snippet:

               
               
               
               
               

               
               

               2 times 3

               
               

               3 times 3

               
               

               4 times 3

               
               

               5 times 3

               
               

               Result:

               Nested lists with automatic numbering

               Let's look at an example of using counters to automate the process of numbering nested lists.

               You should already know, both from HTML and from studying lists in CSS, that list items are numbered automatically. But this numbering is the simplest.

               What about automatic numbering of subclauses like 1.1, 1.2, 2.1, 2.2, etc.?

               This problem is solved using counters that allow you to automate the process of numbering nested lists.

               Code snippet:

               
               
               
               
               

               
               

               1. First list item
               
               
               1. First subparagraph of paragraph 1
               
               
               2. Second subparagraph of 1st paragraph
               
               
               2. Second list item
               
               
               1. First subparagraph of paragraph 2
               
               
               2. Second subparagraph of 2nd paragraph
               
               
               3. Third item on the list
               
               
               1. First subparagraph of paragraph 3
               
               
               2. Second subparagraph of the 3rd paragraph
               
               
               3. Third subparagraph of the 3rd paragraph
               
               

               
               

               Result:

               This is how you automate the process of numbering nested lists!

               Good day!

               In this article, you will learn about all the possibilities of lists, understand how to make a numbered list, and master tags that will help you turn a simple bulleted list into a more interesting and noticeable one with arbitrary bullets. After completing the lesson, you will have an understanding of where lists are used and under what circumstances they can be used.

               This article is the third in this short course on the basics of HTML. Before reading this lesson, I recommend going through the previous two:

               The article has just begun, and you can already notice the use of a standard bulleted list. On my website it looks quite simple: on the left there is a small indent with a line and a square marker. Later in the article we will look in detail at what types of markers there are, how to make numbers, and also how to make your own marker.

               In each part of the article, the creation of certain lists will be accompanied by detailed explanations for inserting a particular list.

               1. Bulleted lists in HTML

               This type of list is used to list in the text a set of elements with similar meanings. This could be a list of links that are related to the same topic, detailed explanation for individual parts of the text. But let's see what bulleted lists look like in code:

               And this is what it looks like in the browser:

               Rice. 1.1. Standard view of HTML bulleted unordered list in browser

               1.1 Standard bullets for bulleted lists

               In the image above (Figure 1.1.) you can see the circles at the beginning of each menu item. This is the marker. By default, it appears as a filled circle in the browser. There are several types of markers in HTML: filled circle, empty circle and square. They do not require any CSS or third-party images:

               1.2 List marker in the form of an empty circle

               You know the attribute values, but now let's see how to make an HTML bulleted list in code. From the table above, we chose the second value "circle" for the type attribute and set it to our bulleted list:

               <html > <head > <title > Example of a bulleted list with an empty circle marker</title> </head> <body > <p> Stars:</p> <ul type = "circle" > <li > Sirius</li> <li > Arcturus</li> <li > Pollux</li> <li > Betelgeuse</li> <li > Sun</li> </ul> </body> </html>

               Let’s immediately see how this code will look in the browser:

               Rice. 1.2. View of a list marker as a circle in the browser

               1.3 List marker in the form of a square

               Let's also look at the last example with a square marker for an HTML list:

               Pay attention to the marker, it has become square:

               Rice. 1.3. View of a list marker as a square in the browser

               Important Note: This method is no longer used to create styles for bulleted lists. There is a clear separation between CSS (read what CSS is) and HTML. HTML is for markup and CSS is for creating an attractive appearance.

               The code that contains this attribute when specifying the current document type as HTML5 (""), will give an error during validation. If you haven’t heard what validation is, then this is the place for you.

               The error will be as follows:

               Rice. 1.4. Error on the validator when using the "type" attribute of a list

               We've sorted out the bulleted lists. Now let's move on to numbered lists, and then look at nested lists and several ready-made examples, which are used most often on real sites.

               2. Numbered lists in HTML

               Unlike the previous type of lists, numbered lists have one important feature: they are automatically numbered. This is useful when you need to number a large list. Doing it manually will take a lot of time, and you can still get confused. A numbered list is specified using the tag. What it looks like in practice:

               Example of a numbered list:

               1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

               <html > <head > <title > Example of a standard numbered list</title> </head> <body > <p> From one to five:</p> <ol > <li > First</li> <li > Second</li> <li > Third</li> <li > Fourth</li> <li > Fifth</li> </ol> </body> </html>

               This is what a numbered list looks like: standard settings in the browser:

               Rice. 2.1. Numbered list in browser with standard settings

               Like its predecessor (bullet list), it has its own styles for displaying numbers. Regular numbering is not the only type of bullet for a numbered list in HTML.

               2.1 Standard bullets for numbered lists

               Here we have a choice not of three types of markers, but of five:

               Marker name	"type" attribute value	List Example
               Markers in the form of Arabic numbers	1	Badminton Baseball
               Markers in the form of lowercase Latin letters	a	Chomolungma Chogori Kanchenjunga
               Markers in the form of capital Latin letters	A	Summit Plummet Tantrum Alley Insano
               Lowercase Roman numeral markers	i	Philippine Sea Arabian Sea coral sea
               Uppercase Roman numeral markers	I	Red Green Blue

               2.2 Own numbering in the HTML list

               In addition to the usual output of a numbered list, we can also start our numbering from any number. To do this, you need to set the additional attribute "start" . This numbering works on all types of markers for numbered lists. What it looks like in practice:

               1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

               <html > <head > <title > Custom numbering for a numbered list</title> </head> <body > <p> We start numbering from twelve:</p> <ol type = "a" start = "12" > <li > Twelve</li> <li > Thirteen</li> <li > Fourteen</li> <li > Fifteen</li> <li > Sixteen</li> </ol> </body> </html>

               Here's how it will appear on the real site:

               Rice. 2.2. Numbering from an arbitrary number in a numbered list

               In the image above, we numbered the list starting from twelve, while making markers in the form of lowercase Latin letters. Now, I think, it has become clear how to use these attributes in your projects.

               Well, now let's move on to nested HTML lists.

               3. How to make a multi-level (nested) list in HTML

               Multi-level lists are used on the site to build menus. This menu most often appears to be either a downward drop-down (lesson on) or a left or right drop-down menu. Such menus allow you to store other menu elements in a compact form.

               Using car models as an example, we will build a multi-level list in HTML:

               1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

               <html > <head > <title > HTML Nested Bullet List</title> </head> <body > <ul > <li > Citroen<ul > <li > Berlingo</li> <li > C1</li> <li > C2</li> <li > C3 Picasso</li> <li > C4 Grand Picasso</li> </ul> </li> <li > KIA</li> <li > Toyota</li> <li > Audi</li> <li > Lexus</li> </ul> </body> </html>

               Notice how the multi-level list looks in the browser:

               Rice. 3.1. Example of a multi-level list in HTML

               We made a multi-level list using bulleted (tag

               ). A multi-level list with Citroen models appeared with other markers. The main list has filled bullets, and the 2nd level list has empty circles. But, as you remember, using the “type” attribute we can redefine markers (it’s better to set ).

               But we can unite multi-level lists numbered and marked as follows:

               1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

               <html > <head > <title > Numbered, bulleted and multi-level lists in HTML</title> </head> <body > <ul > <li > First group of tulips<ol > <li > First grade<ul > <li > Simple early tulips</li> </ul> </li> <li > Second class<ul > <li > Terry tulips</li> </ul> </li> </ol> </li> </ul> </body> </html>

               In the example above we have double nesting (2 levels). First, a list of two classes of tulips is included; we have it numbered. Then a bulleted list is nested within each of the items in the numbered list.

               Let's see how it looks in the browser:

               Rice. 3.2. Example of a multi-level numbered list to a bulleted list in the browser

               4. Useful materials on HTML lists

               This is information that requires an understanding of CSS properties. To do this, I recommend studying the following lessons: . All examples will be immediately with source code and are divided into HTML (structure), CSS (styles) and Result (result) tabs.

               4.1 How to make an HTML list into a string

               Converting an HTML list to a string may be necessary when creating a horizontal menu. It's very easy to do:

               4.2 How to make an HTML list without an icon

               The list-style-type property in CSS is responsible for this (more details):

               4.3 How to center a list in HTML

               The list item is a block element, so it needs to be centered using padding. But there is one important point— we must explicitly specify the width for the alignment to work:

               4.4 How to make a list in HTML with pictures

               Just one CSS property, list-style-image , is enough. Inside the url, specify the address before the icon. I just want to note that it is better to immediately select a small image, because the height of the list line depends on it:

               4.5 Bulleted list HTML your bullet

               In this case, you need to connect font icons in advance (for example, FontAwesome). Then you can make any icon instead of a standard marker:

               4.6 How to make a list in HTML in several columns

               To make a list in several columns we will use CSS property column-count (property is supported only in the following browsers: IE 10+, Chrome 1.0+, Opera 11.1+, Safari 3.0+, Firefox 1.5+). You also need to set the height of the list to see the split into multiple columns:

               5. HTML Combo List

               To make a combo box in HTML is better Just use icon fonts. For example, Flaticon or Fontawesome.

               This information is already for advanced people, so first you will need.

               6. Practice working with lists

               In the video below you can see all the work with HTML lists in practice:

               To consolidate the information received, I recommend doing all the steps manually. Try different bullets for lists, create numbered lists, and then move on to multi-level (nested) lists and experiment with them.

               This is where we finish with the lists and move on to the next lesson on images.

               If you need more than just the basics of website building, but want to master the profession of Front-end developer, then pay attention to the course from the online school Netology - "" and the online school Skillbox and course "".

               The course lasts a long time, but you will receive structured knowledge with which you can immediately get a job if you are interested in this field.