What tag defines a numbered list. Bulleted list. Bulleted Lists in HTML

A bulleted list is defined by adding a small bullet, usually in the form of a filled circle, before each list item. The list itself is formed using a container

, and each list item begins with a tag
• as shown below.
  • First point
  • Second point
  • Third point

  The list must contain a closing tag

, otherwise an error will occur. Closing tag Although not required, we always recommend adding it to clearly separate list items.

Example 11.1 shows the HTML code for adding a bulleted list to a web page.

Example 11.1. Create a bulleted list

---

• Cheburashka
• Crocodile Gena
• Shapoklyak
• Rat Larisa

---

The result of this example is shown in Fig. 11.1.

Rice. 11.1. Bulleted list view

Pay attention to the padding at the top, bottom, and left of the list. Such indents are added automatically.

Markers can take one of three forms: circle (default), circle, and square. To select a marker style, use the tag's type attribute

. Acceptable values ​​are given in table. 11.1
Table 11.1. List Bullet Styles

List type	HTML Code	Example
List with circle markers		First Second Third
List with circle bullets		First Second Third
List with square bullets		First Second Third

The appearance of markers may vary slightly in different browsers, as well as when changing the font and text size.

Creating a list with square bullets is shown in Example 11.2.

Example 11.2. Type of markers

Changing Beliefs

• change in religious faith (optional: Buddhism, Confucianism, Hinduism). Special offer - Judaism and Islam together;
• a change in belief in the infallibility of the favorite party;
• the belief that aliens exist;
• preference for a political system as the best of its kind (to choose from: feudalism, socialism, communism, capitalism).

The result of this example is shown in Fig. 11.2.

Lists are part of everyday life. The to-do list defines what is done. Navigation routes offer a step-by-step list of directions. Recipes require a list of ingredients and a list of instructions. Lists are found almost everywhere, so it's easy to see why they are also popular on the Internet.

When we want to use a list on a website, HTML offers three different types to choose from: bulleted, numbered, and description list. Which type of list to use, and whether to use a list at all, depends on the content and the semantically most appropriate option for displaying it.

In addition to the three different types of lists available in HTML, there are several ways to style these lists via CSS. For example, we can choose what type of bullet to specify for the list. The marker may be a square, a circle, a number, a letter, or possibly none. In addition, we can decide how the list should be displayed - vertically or horizontally. All of these options play an important role in styling our web pages.

Bulleted lists

A bulleted or unordered list is simply a list of related items for which the order does not matter. Creating a bulleted list in HTML is done using a block list element

. Each individual item in the list is marked with an element
• .

  By default, most browsers add vertical margin and left padding to the element

  , and before each element
  • puts a single-color point. This point is called a list marker and can be changed using CSS.
    • Orange
    • Green
    • Blue

    Show bulleted list

    Numbered lists

    Numbered or ordered list of items

    Very similar to a bulleted list, individual bullet points are created in the same way. The main difference between lists is that for an ordered list, the order in which the items are presented matters.

    Because order matters, a numbered list uses numbers instead of a period as the default bullet.

    1. Walk along Apricot Street
    2. Turn onto Vinogradnaya

    Numbered list demonstration

    Numbered lists also have unique attributes available to them, including start and reversed.

    start attribute

    The start attribute specifies the number at which the numbered list should begin. By default, lists start at 1, but there may be situations where the list should start at 30 or some other number. When we use the start attribute on an element

    , then we can accurately determine from which number the counting of the numbered list should begin.

    The start attribute accepts only integer values, although numbered lists may use different numbering systems, such as Roman numerals.

    30. Walk along Apricot Street
    31. Turn onto Vinogradnaya
    32. Stop on Shady Street

    Demonstration of the start attribute

    reversed attribute

    The reversed attribute when added to an element

    allows the list to be displayed in reverse order. A list of five items numbered 1 to 5 can be reversed and numbered 5 to 1.

    The reversed attribute is a Boolean attribute and as such it does not take on any value. It can be true or false. False is the default value, the value becomes true when the reversed attribute appears on the element

    .
    1. Walk along Apricot Street
    2. Turn onto Vinogradnaya
    3. Stop on Shady Street

    Demonstration of the reversed attribute

    value attribute

    The value attribute can be applied to individual elements

    1. in a numbered list to change its value in the list. The number of any list item that appears below a list item with a value attribute will be recalculated accordingly.

       As an example, if the second list item has a value attribute set to 9, the number of that list item will be output as if it were the ninth one. All subsequent list items will be numbered starting from 9.

       1. Walk along Apricot Street
       9. Turn onto Vinogradnaya
       10. Stop on Shady Street

       Value attribute demonstration

       Description Lists

       Another type of list you'll see online (but not as often as bulleted or numbered lists) is a list of descriptions. Such lists are used to identify several terms and their descriptions, as in a glossary, for example.

       Creating a description list in HTML is done using a block element

       . Instead of using element

       To mark up list items, a description list requires two block elements:

       for the term and

       for description.

       A description list can contain many terms and descriptions, one after another. In addition, such a list may contain several terms per description, as well as several descriptions per term. A single term can have multiple meanings and be subject to multiple descriptions. Conversely, one description may fit several terms.

       When adding a description list element

       must go to the element

       . The term and the description that immediately follows it are related to each other. Therefore, the order of these elements is important.

       By default, element

       includes vertical padding, like elements

       And
       . In addition, the element
       includes the left margin by default.
       studies
       Devoting time and attention to gaining knowledge of the subject being taught, especially through books.
       project
       A submitted plan or drawing that shows how a building, clothing, or other item will look and function before it is built or made.
       Existing goals, plans, or intentions before they are embodied or realized in a tangible object.
       business
       Job
       A person's regular occupation, profession or craft.
       Description List Demonstration
       Nested Lists
       The feature that makes lists very powerful is the nesting feature. Each list can be nested within another list and they can be nested multiple times. But the ability to nest lists endlessly does not give you the freedom to do so. Lists should be reserved specifically where they retain the most semantic meaning.
       The trick to nesting lists is to know where each list and list item begins and ends. Speaking specifically about bulleted and numbered lists, the only element that can appear directly inside
       And
       is an element
       1. . Let's repeat - the only element that we can put as a direct descendant of the elements
          And
          , is
          1. .

             However, inside the element

          2. a standard set of elements can be added, including any elements
             or
             .

             To nest a list, start a new list before closing the list item. Once the nested list is complete and closed, close the enclosing list item and continue with the original list.

             1. Walk the dog
             2. Fold laundry
             3. Go to the store and buy:
                • Milk
                • Bread
                • Cheese
             4. Mow the lawn
             5. Cook dinner

             Demonstration of nested lists

             Since nested lists can be a bit confusing and display unwanted styles if done incorrectly - let's take a quick look at them. Elements

             And
             can only contain elements
             1. . Element
             2. can contain any regular element you want. However, the element
             3. must be a direct descendant of either element
                , or
                .

                It's also worth noting that when lists are nested inside other lists, their markers will change depending on the depth of the nesting. In the previous example, a bulleted list nested within a numbered list uses a circle instead of a dot as markers. This change occurs because the bulleted list is nested one level inside the numbered list.

                Luckily, we can control how bullet points look at any level, which we'll look at next.

                Styling List Items

                Bulleted and numbered lists use list item bullets by default. For bulleted lists these tend to be solid colored dots, while for numbered lists these tend to be numbers. Using CSS, the style and position of these markers can be customized.

                list-style-type property

                The list-style-type property is used to set the contents of the list item marker. Available values ​​range from squares and decimals to Armenian numbering and CSS styling can be added to elements

                ,
                or
                1. .

                   Any value for the list-style-type property can be added to a bulleted or numbered list. With this in mind, you can use numbering in a bulleted list and non-numeric bullets in a numbered list.

                   • Orange
                   • Green
                   • Blue

                   Ul ( list-style-type: square; )

                   Demonstration of the list-style-type property

                   list-style-type values

                   As mentioned earlier, the list-style-type property contains a handful of different values. The following table shows these values ​​and their corresponding contents.

                   Using an Image as a List Marker

                   There may come a time when the default values ​​for the list-style-type property are not enough and we want to define our own list marker. This is most often done by placing a background image for each element.

                2. .

                   The process involves removing any default list-style-type property value and adding a background image and margins to the element

                3. .

                   More details - setting the list-style-type property to none will remove existing list markers. The background property will set the background image along with its position and repeat if necessary. And the padding property will provide space to the left of the text for the background image.

                   • Orange
                   • Green
                   • Blue

                   Li ( background: url("arrow.png") 0 50% no-repeat; list-style-type: none; padding-left: 12px; )

                   Showing an Image as a Marker

                   list-style-position property

                   By default, list bullets are positioned to the left of the content in the element

                4. . This positioning style is described as outside , which means that all content will appear directly to the right, outside the list marker. With the list-style-position property we can change the default value of outside to inside or inherit .

                   outside places the list marker to the left of the element

                5. and do not allow any content to flow below this marker. The inside value (which is rarely used and can be seen) places the list marker on the first line of the element
                6. and allows the content to wrap around the marker if necessary.
                   • Cupcakes...
                   • Sprinkling...

                   Ul ( list-style-position: inside; )

                   List-style-position property demonstration

                   Generic property list-style

                   The list properties we recently discussed, list-style-type and list-style-position , can be combined into one generic property, list-style . In this property, we can use one or all of the list property values ​​at the same time. The order of these values ​​should be: list-style-type followed by list-style-position .

                   Ul ( list-style: circle inside; ) ol ( list-style: lower-roman; )

                   Horizontal list display

                   Sometimes we want to display lists horizontally rather than vertically. Perhaps we want to divide the list into several columns to build a navigation list or place several list items in one row. Depending on the content and desired appearance, there are several ways to display lists as a single line, for example by taking the display property value of the elements

                7. like inline or inline-block or via the float property.

                   List display

                   The fastest way to display a list on one line is to give the elements

                8. display property with the value inline or inline-block . This will put all the elements
                9. on one line with equal spacing between each list item.

                   If the spaces between elements

                10. are causing problems, they can be removed using the same techniques we discussed in Lesson 5, Positioning Content.

                    Much more often we will use the inline-block value instead of the inline value. The inline-block value makes it easy to add vertical padding and other space to elements

                11. , while the inline value does not.

                    When the value of the display property is changed to inline or inline-block , the list marker, whether a dot, number, or other, is removed.

                    • Orange
                    • Green
                    • Blue

                    Li ( display: inline-block; margin: 0 10px; )

                    Demonstration of a list with inline-block

                    Lists with float

                    Changing the display property to inline or inline-block is quick, but it removes the list markers. If they are needed then adding a float to each element

                12. is a better option than changing the display property.

                    Installation for all elements

                13. float properties like left will align all elements horizontally
                14. directly next to each other without any gaps between them. When we use float for
                15. , the list marker is displayed by default and will be positioned on top of the item
                16. next to him. To prevent the list marker from appearing on top of other items
                17. , horizontal margin or padding must be added.
                    • Orange
                    • Green
                    • Blue

                    Li ( float: left; margin: 0 20px; )

                    Demonstration of a list with float

                    As with any floated elements, this breaks the flow of the page. We must not forget to clear the float and return the page to normal flow - the most common method is via clearfix.

                    Navigation list example

                    We often design and find navigation menus that use unordered lists. These lists are typically laid out horizontally using one of the two methods mentioned earlier. Here, for example, is a horizontal navigation menu laid out using an unordered list, in which the elements

                18. are displayed as inline-block .

                    Navigation ul ( font: bold 11px "Helvetica Neue", Helvetica, Arial, sans-serif; margin: 0; padding: 0; text-transform: uppercase; ) .navigation li ( display: inline-block; ) .navigation a ( background: #395870; background: linear-gradient(#49708f, #293f50); border-right: 1px solid rgba(0, 0, 0, .3); color: #fff; padding: 12px 20px; text-decoration: none; ) .navigation a:hover ( background: #314b60; box-shadow: inset 0 0 10px 1px rgba(0, 0, 0, .3); ) .navigation li:first-child a ( border-radius: 4px 0 0 4px; ) .navigation li:last-child a ( border-right: 0; border-radius: 0 4px 4px 0; )

                    Navigation List Demonstration

                    On practice

                    Now that we know how to create lists in HTML and CSS, let's take a look at our Styles Conference site and see where we could use lists.

                    Now navigation menus in elements

                    And