Bulleted lists in html and css. Bulleted list

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

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

  The end tag must be present in the list.

Example 11.1 provides HTML for adding a bulleted list to a web page.

Example 11.1. Create a bulleted list

• Cheburashka
• Crocodile Gena
• Shapoklyak
• Rat Larissa

Result this example shown in Fig. 11.1.

Rice. 11.1. Bulleted list view

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

Markers can be of three types: circle (default), circle, and square. The type attribute of the tag is used to select the marker style.

... Allowable values ​​are given in table. 11.1
Tab. 11.1. List bullet styles

List type	HTML code	Example
List with bullets in the form of a circle		First Second Third
List with bullets in the form of a circle		First Second Third
List with square markers		First Second Third

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

The creation of a list with square markers is shown in Example 11.2.

Example 11.2. Marker type

Changing beliefs

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




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

In the html markup language, there are 3 types of lists - ordered (numbered), unordered (unnumbered) and definition lists.

To build such a list, 2 kinds of elements are needed: ‘ul’ (short for unordered list, that is, an unordered list) and ‘li’ (list item). Anything written inside the ‘li’ is marked with a marker.

The appearance of such a list can be controlled by specifying the types of markers.

Marker types

There is a special type attribute, which is placed on both elements of the list. This is your marker type. There are 3 types in total: circle, disc and square:

- square
- disk
- circle

Depending on where to specify the marker type, you can change it for the entire list or for a specific element.

Ordered list

To build the list, you also need 2 elements: ‘ol’ and ‘li’ (list item). Markers are replaced with dotted numbers. An example of a simple list:

1. first element
2. second element
3. last element

The appearance of an ordered list can be controlled by setting different types numbering.

Numbering types

There is a special type attribute that appears on the ‘ol’ or ‘li’ element. This is the type of your list. There are 5 types in total:

- Numbering with Arabic numerals (1, 2, 3)
- Numbering capital letters(A, B, C)
- Numbering lowercase letters(a, b, c)
- Numbering in large Roman numerals (I, II, III)
- Numbering in small Roman numerals (i, ii, iii)
- What digit to start numbering with

Depending on where to specify the type of numbering, you can change it for the entire list or for a specific element.

Definition list

A definition list has been developed for dictionary entries.

There is a common container 'dl'. Inside it are ‘dt’ (definition termin) and ‘dd’ (definition description). Simplest example:

Marketing department

This department is engaged in the promotion of goods and services

Financial department

This department deals with all financial transactions

All elements of all lists are block. But inside the ‘dt’ element you can only put inline elements... You can put whatever you want in the 'dd' and 'li' elements. This is where nested lists come in.

Nested (mixed lists)

These are multilevel lists, within which there is a hierarchy. Such lists are often used when building a sitemap. Example:

Mixed list

NEWS OF THE DAY

Today the rain

It will rain all day

NEWS OF THE NIGHT

It will rain at night

Tomorrow a new day will begin

Good day!

In this article, you will learn about all the possibilities of lists, understand how to make a numbered list, master the tags that will help make a simple bulleted list more interesting and noticeable 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 tutorial on basic HTML. Before reading this lesson, I recommend going through the previous two:

The article has just begun, and you may 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. Further in the article, we will take a closer look at what markers 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 lists is used to enumerate a set of elements similar in meaning in the text. This can be a listing of links that are related to the same topic, a detailed explanation for individual parts of the text. But let's see how bulleted lists look like in the code:

And this is how it looks in the browser:

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

1.1 Standard bullet points

In the image above (Fig 1.1.), You can see circles at the beginning of each menu item. This is the marker. By default, it is a filled circle in the browser. There are several types of markers in HTML: filled circle, empty circle, and square. They don't require CSS or third-party images:

1.2 List marker as an empty circle

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

<html> <head> <title> An 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> The sun</ li> </ ul> </ body> </ html>

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

Rice. 1.2. Bullet view for a list in the form of a circle in the browser

1.3 List marker in the form of a square

Let's also see the last example with a square bullet for the HTML list:

Notice the marker, it has become square:

Rice. 1.3. Bullet view for a list box in the form of a square in the browser

Important note: this is no longer used for styling bulleted lists. There is a clear separation between CSS (read what CSS is) and HTML. HTML is for markup and CSS is for good looks.

The code that contains this attribute, when specifying the type of the current document as HTML5 (""), will give an error during validation. If you have not heard what validation is, then you should go here -.

The error will be as follows:

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

We figured out the bulleted lists. Now let's move on to numbered lists, and then consider nested lists and a few ready-made examples that are most often used on real sites.

2. Numbered lists in HTML

Unlike the previous type of lists, numbered lists have one important feature: they automatically add numbering. This is useful when numbering needs to be done. big list... It will take a very long time manually, and you can still get lost. A numbered list is specified using a tag. How it looks in practice:

An 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> 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 how a numbered list looks like with standard settings in the browser:

Rice. 2.1. Numbered list in a browser with standard settings

Like its predecessor (bulleted list), it has its own styles for displaying numbers. Plain numbering is not the only kind of bullets in a numbered list in HTML.

2.1 Standard bullets for a numbered list

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

Marker name	The value of the "type" attribute	List example
Arabic numeral markers	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 Numerals	i	Philippine sea Arabian Sea Coral sea
Uppercase Roman numeral markers	I	Red Green Blue

2.2 Custom numbering in the HTML list

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

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

<html> <head> <title> Random numbering for a numbered list</ title> </ head> <body> <p> We start numbering at 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>

This is how it will display on a live site:

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

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

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

3. How to make a multilevel (nested) list in HTML

Multilevel lists are used on the site in building the menu. This menu most often looks like a drop-down either down (lesson on), or drop-down to the left or right. Such menus allow you to store other menu items 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 bulleted 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 what a multilevel list looks like in a browser:

Rice. 3.1. An example of a multilevel list in HTML

We made a multilevel list using a bulleted (tag

). The tiered list with Citroen models came with other markers. The main list with filled bullets, and the 2nd level list with empty circles. But, remember, with the "type" attribute we can override the markers (it's better to set them).

But we can combine numbered and bulleted multilevel lists like this:

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 Multilevel Lists in HTML</ title> </ head> <body> <ul> <li> The 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, we put in a list of two classes of tulips, we have it numbered. Then, a bulleted list is nested into each of the items in the numbered list.

We look at its appearance in the browser:

Rice. 3.2. An example of a multilevel numbered list in a bulleted list in a browser

4. Useful Resources for HTML Lists

It contains information that requires an understanding of CSS properties. To do this, I recommend that you study the following lessons:. All examples will be immediately with source code and are broken down into HTML (structure), CSS (styles) and Result (result) tabs.

4.1 How to make an HTML list into a string

You may need to make the HTML list into a string when creating a horizontal menu. It's very simple to make it:

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 make a list in HTML centered

A 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 url, specify the address before the icon. I just want to note that it is better to select a small image right away, because the height of the list line depends on it:

4.5 HTML Bulleted List Your Marker

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

4.6 How to make a list in HTML into multiple columns

To make a multi-column list we will use the CSS column-count property (this property is only supported 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 for the list to see the split into multiple columns:

5. Practice of working with lists

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

Numbered lists are a collection of items with their sequential numbers. The type and type of numbering depends on the parameters of the element

, which is used to create the list. The following values ​​can be used as numbering elements:
• Arabic numerals (1, 2, 3, ...);
• Arabic numerals with leading zero for digits less than ten (01, 02, 03, ..., 10);
• uppercase Latin letters (A, B, C, ...);
• lowercase Latin letters (a, b, c, ...);
• uppercase roman numerals (I, II, III, ...);
• lowercase roman numerals (i, ii, iii, ...);
• Armenian numbering;
• Georgian numbering.

As a practical matter, the principles of displaying bulleted list items can be applied in a similar way to a numbered list. But given that we are dealing with an enumeration, there are some features, which will be discussed below.

List numbering

It is allowed to start the list from any number; the start attribute of the element is used for this purpose

or the value of the element
1. ... Any positive integer can be specified as a value. It does not matter what type of numbering is set, even if Latin letters are used as a list. If the start and value attributes are applied to the list at the same time, then the latter takes precedence and the numbering is displayed from the number specified by value, as shown in example 1.

   Example 1. Renumbering a list

   4. You should take great care of your workplace.
   5. Adjust the lighting in the room so that the light source is on the side or behind the operator.
   10. To avoid medical complications, it is recommended to choose a chair with a soft seat.
   
   
   

   The first element of the list in this example will start with the Roman numeral IV, since the start = "4" attribute is specified, then the number V follows, and the last element follows out of order and is assigned the number X (Fig. 1).

   Rice. 1. Roman numerals in the list

   Writing numbers

   By default, a numbered list has a certain form: first there is a number, then a period, and then the text is displayed through a space. This form of writing is clear and convenient, but some developers prefer to see a different way of formatting the numbering of lists. Namely, instead of a period, there is a closing parenthesis, as shown in Fig. 2 or something similar.

   

   Rice. 2. View of a numbered list with a parenthesis

   Styles allow you to change the way lists are renumbered using the content and counter-increment properties. First, the ol selector needs to set counter-reset: item, this is necessary so that the numbering in each new list starts over. Otherwise, the numbering will continue and instead of 1,2,3 you will see 5,6,7. The item value is a unique counter identifier, we choose it ourselves. Next, you need to hide the original markers through the list-style-type style property with a value of none.

   The content property typically works in conjunction with the :: after and :: before pseudo-elements. So, the li :: before construction says that some content must be added before each element of the list (example 2).

   Example 2. Creating your own numbering

   Li :: before (content: counter (item) ")"; / * Add brackets to numbers * / counter-increment: item; / * Set the counter name * /)

   The content property with the value counter (item) outputs a number; adding a parenthesis as shown in this example, we get the required numbering. counter-increment is needed to increment the list number by one. Note that the same identifier called item is used throughout. The final code is shown in example 3.

   Example 3. Changing the view of a list

   1. First
   2. Second
   3. Third
   4. Fourth
   
   
   

   In this way, you can make any kind of numbered list, for example, take a number in square brackets, in this case only one line will change in styles.

   Content: "[" counter (item) "]";

   List with Russian letters

   There is a numbered list with with Latin letters, but there are no Russian letters for the list. They can be added artificially using the above technique. Since the numbering is done through styles, the list itself remains original, only the selected class is added to it, let's call it cyrilic (example 4).

   Example 4. Code for creating a list

   1. One
   2. Two
   3. Three

   Adding letters is done using the :: before pseudo-element and the content property. Since each line must have its own letter, we will use the pseudo-class: nth-child (1), the letter number is written in parentheses. The first letter, of course, is A, the second is B, the third is C, and so on. This entire set is added to the li selector as follows (example 5).

   Example 5. Using the pseudo-class: nth-child

   Cyrilic li: nth-child (1) :: before (content: "a)"; ) .cyrilic li: nth-child (2) :: before (content: "b)"; ) .cyrilic li: nth-child (3) :: before (content: "in)"; )

   In this example, each letter is followed by a parenthesis, all lowercase. You can define your own type of list numbering, for example, it can contain uppercase letters with a period, with one or two brackets, or only letters. Unlike standard numbering, we are free to do whatever we want here. A list of ten letters should be enough for almost all situations, but if this suddenly turns out to be not enough, nothing prevents us from expanding our list to include at least all the letters of the Russian alphabet.

   Finally, we adjust the alignment and position of the letters, if desired, specify the font size, color and other parameters (example 6).

   Example 6. List with Russian letters

   1. Borsch
   2. Pike cutlets
   3. Kulebyaka
   4. Mushrooms in sour cream
   5. Pancakes with caviar
   6. Kvass
   
   
   

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

   Hello dear readers! Today, as a continuation of the series of articles under the heading "Basics of html", I want to acquaint you with the algorithm for creating html lists with help tags ul and li (unordered list), ol and li (numbered list), dl, dt, dd (definition list).

   Now I will continue to acquaint you with the most frequently used html tags, which are used to create lists on site pages. If someone does not know what it is, for sure, after the information received below, he will immediately understand what it is about, since this form of presentation of the material is very common.

   HTML bulleted lists - ul and li tags

   The bulleted list will be defined by the ul tag. List items are located between the opening and closing ul tags, the content of each of which must, in turn, be located between the opening and closing li tags. Immediately, I note that the ul tag is paired (the presence of an opening and closing tags), as well as block, that is, it forms a container that contains elements (strings) that are formed each time by the li tag. Accordingly, the li tag is paired and lowercase.

   Default appearance marker is represented by a filled circle. However, you can change its appearance by applying the type attribute, which has the following values: disc, circle, square. The disc value (which determines the appearance of the filled circle marker) 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 item in the bulleted list can be given its own appearance by prescribing the appropriate values ​​for the type attribute.

   Numbered HTML Lists - ol and li tags

   Now let's see how a numbered list is formed using ol tags (block and paired tags, similar to ul). The li tag also acts as a tag that defines the elements of the numbered html list. A numbered list is a collection of numbered items. The type of numbering is determined by the type attribute, which can take the following values:

   • A - capital Latin letters;
   • a - lowercase Latin letters;
   • I - capital Roman numerals;
   • i - lowercase Roman numerals;
   • 1 - Arabic numerals

   	1 item in a numbered list 2 item in a numbered list 3 item in a numbered list
   1 item in a numbered list 2 item in a numbered list 3 item in a numbered list	1 item in a numbered list 2 item in a numbered list 3 item in a numbered list
   1 item in a numbered list 2 item in a numbered list 3 item in a numbered list	1 item in a numbered list 2 item in a numbered list 3 item in a numbered list
   1 item in a numbered list 2 item in a numbered list 3 item in a numbered list	1 item in a numbered list 2 item in a numbered list 3 item in a numbered list
   1 item in a numbered list 2 item in a numbered list 3 item in a numbered list	1 item in a numbered list 2 item in a numbered list 3 item in a numbered list

   You can also provide a numbered list where the items are numbered in reverse order, for example: 3, 2, 1. This is done using the reserve attribute of the ol tag.

   It is also possible to start a bulleted list with any other number instead of 1. To do this, you can use the start attribute, and it does not matter at all what value of the type attribute is set. See an example of using the name attribute in conjunction with different meanings the type attribute (1 and I):

   HTML definition lists - dl, dd, dt tags

   Another kind of html lists is a definition list. It is formed as follows. The content of this list is enclosed between the opening and closing dl tags that form the container. The dt tag defines a term, and dd is the description of 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 the next publications.

   By the way, modern realities are such that html language cannot be viewed apart from, so in order not to miss these essential materials, subscribe to the blog update via RSS feed or by e-mail. This concludes the topic of today's article, if you received necessary information, don’t refuse to use the social media buttons.