How to make an enum in html. Bulleted lists

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, surely after the information received below, they 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 is 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) 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, 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 writing the appropriate values \u200b\u200bfor 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 list of html. 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 an ordered list 2 item in a numbered list 3 item numbered list
1 item in an ordered list 2 item in a numbered list 3 item numbered list	1 item in an ordered list 2 item in a numbered list 3 item numbered list
1 item in an ordered list 2 item in a numbered list 3 item numbered list	1 item in an ordered list 2 item in a numbered list 3 item numbered list
1 item in an ordered list 2 item in a numbered list 3 item numbered list	1 item in an ordered list 2 item in a numbered list 3 item numbered list
1 item in an ordered list 2 item in a numbered list 3 item numbered list	1 item in an ordered list 2 item in a numbered list 3 item 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 the different values \u200b\u200bfor 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 by using 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 apart from, therefore, in order not to miss these important 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.

Good day!

In this article, you will learn about all the possibilities of lists, understand how to make a numbered list, master 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 bullet 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 list 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:

Figure: 1.1. Standard view of HTML bulleted unordered list in browser

1.1 Standard bullet points

In the image above (Figure 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 do not 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\u003e <head\u003e <title\u003eAn example of a bulleted list with an empty circle marker</ title\u003e </ head\u003e <body\u003e <p\u003eStars:</ p\u003e <ul type \u003d "circle"\u003e <li\u003eSirius</ li\u003e <li\u003eArcturus</ li\u003e <li\u003ePollux</ li\u003e <li\u003eBetelgeuse</ li\u003e <li\u003eThe sun</ li\u003e </ ul\u003e </ body\u003e </ html\u003e

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

Figure: 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 HTML list:

Notice the marker, it has become square:

Figure: 1.3. Marker view for a square list in a 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 creating an attractive look.

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:

Figure: 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, 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 you need to number 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\u003e <head\u003e <title\u003eExample of a standard numbered list</ title\u003e </ head\u003e <body\u003e <p\u003eOne to five:</ p\u003e <ol\u003e <li\u003eFirst</ li\u003e <li\u003eSecond</ li\u003e <li\u003eThird</ li\u003e <li\u003eFourth</ li\u003e <li\u003eFifth</ li\u003e </ ol\u003e </ body\u003e </ html\u003e

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

Figure: 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 for 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 numerals	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 must 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\u003e <head\u003e <title\u003eRandom numbering for a numbered list</ title\u003e </ head\u003e <body\u003e <p\u003eWe start numbering at twelve:</ p\u003e <ol type \u003d "a" start \u003d "12"\u003e <li\u003eTwelve</ li\u003e <li\u003eThirteen</ li\u003e <li\u003eFourteen</ li\u003e <li\u003eFifteen</ li\u003e <li\u003eSixteen</ li\u003e </ ol\u003e </ body\u003e </ html\u003e

This is how it will display on a live site:

Figure: 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 the 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 dropdown either down (lesson on), or dropdown 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 multilevel 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\u003e <head\u003e <title\u003eHTML nested bulleted list</ title\u003e </ head\u003e <body\u003e <ul\u003e <li\u003eCitroen<ul\u003e <li\u003eBerlingo</ li\u003e <li\u003eC1</ li\u003e <li\u003eC2</ li\u003e <li\u003eC3 Picasso</ li\u003e <li\u003eC4 Grand Picasso</ li\u003e </ ul\u003e </ li\u003e <li\u003eKIA</ li\u003e <li\u003eToyota</ li\u003e <li\u003eAudi</ li\u003e <li\u003eLexus</ li\u003e </ ul\u003e </ body\u003e </ html\u003e

Notice what a multilevel list looks like in a browser:

Figure: 3.1. Example of a multilevel list in HTML

We made a multilevel list using a bulleted (tag

But we can combine multilevel lists with numbered and bulleted 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\u003e <head\u003e <title\u003eNumbered, Bulleted, and Multilevel Lists in HTML</ title\u003e </ head\u003e <body\u003e <ul\u003e <li\u003eThe first group of tulips<ol\u003e <li\u003eFirst grade<ul\u003e <li\u003eSimple early tulips</ li\u003e </ ul\u003e </ li\u003e <li\u003eSecond class<ul\u003e <li\u003eTerry tulips</ li\u003e </ ul\u003e </ li\u003e </ ol\u003e </ li\u003e </ ul\u003e </ body\u003e </ html\u003e

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:

4. Useful Resources for HTML Lists

It contains 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 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 item, so it needs to be centered with 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 must first connect font icons (for example, FontAwesome). 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 the work with hTML lists on practice:

HTML lists are used to group related pieces of information together. There are three types of lists:

bulleted list —

marked with a marker,
numbered list —
1. marked with a number,
  definition list - - consists of term pairs
  —
  definition.
  Each list is a container that contains list items or term-definition pairs. List items behave like block items, stacking one under the other and taking up the entire width of the container block. Each list item has additional blocklocated on the side that does not participate in the layout.
  
  Generating HTML Lists
  
  1. Bulleted list
  
  Bulleted list is an unordered list (from the English Unordered List)... Created using a paired tag
  ... The marker of a list item is a label, for example, a filled circle.
  Browsers add the following formatting to the list box by default:
  Each list item is created using a pair tag
2. (from the English List Item).
- Microsoft
- Google
- Apple
Figure: 1. Bulleted list
2. Numbered list

Numbered list is created using a paired tag. Each list item is also created using the element
... The browser numbers the elements in order automatically, and if you delete one or more elements of such a list, the rest of the numbers will be automatically recalculated.
The list box also has default browser styles:
the value attribute is available, which allows you to change the default number for the selected list item. For example, if for the first item in the list you set

, then the rest of the numbering will be recalculated relative to the new value.

For tag

Attribute	Description, accepted value
reversed	The reversed attribute displays the list in reverse order (for example, 9, 8, 7 ...).
start	The start attribute sets the initial value from which the numbering will start, for example, the construction the first item will be assigned a serial number "10". You can also specify the numbering type at the same time, for example, .
type	The type attribute specifies the kind of marker to use in the list (as letters or numbers). Accepted values: 1 - default value, decimal numbering. A - numbering the list in alphabetical order, capital letters (A, B, C, D). a - numbering the list in alphabetical order, lower case (a, b, c, d). I - numbering in Roman capital numerals (I, II, III, IV). i - Roman numeration lowercase numbers (i, ii, iii, iv).

Microsoft
Google
Apple

3. List of definitions

Definition lists are created using the tag

The definition list box has the following default browser styles:

For tags

and

available.

Producer:: Petr Tochilin
Cast:: Andrey Gaidulyan; Alexey Gavrilov; Vitaly Gogunsky; Mariya Kozhevnikova

Figure: 3. List of definitions

4. Nested list

Often, the capabilities of simple lists are not enough, for example, when creating a table of contents, you cannot do without nested items... The markup for the nested list would be as follows:

Paragraph 1.
Point 2.
- Subclause 2.1.
- Subclause 2.2.
  - Subclause 2.2.1.
  - Subclause 2.2.2.
- Subclause 2.3.
Point 3.

Figure: 4. Nested list

5. Multilevel numbered list

A layered list is used to display list items at different levels with different indents. The markup for a multilevel numbered list would be as follows:

paragraph
paragraph
1. paragraph
2. paragraph
3. paragraph
  1. paragraph
  2. paragraph
  3. paragraph
4. paragraph
paragraph
paragraph

This default markup will create a new numbering starting with one for each nested list. To make nested numbering, you need to use the following properties:
counter-reset resets one or more counters, setting a value to reset;
counter-increment specifies the counter increment value, i.e. with what step each subsequent item will be numbered;
content - the generated content, in this case it is responsible for displaying the number before each item in the list.

Ol (/ * remove the standard numbering * / list-style: none; / * Identify the counter and name it li. The counter value is not specified - by default it is 0 * / counter-reset: li;) li: before (/ * We define the element to be numbered - li. The pseudo-element before specifies that the content inserted using the content property will be placed before the list items. It also sets the counter increment value (default is 1). * / Counter-increment: li; / * The content property displays the number of the list item counters () means that the generated text is the value of all counters with that name. A quoted period adds a separating period between numbers, and a period with a space is added before the contents of each list item * / content: counters (li, ".") ".";)
Figure: 5. Multilevel numbered list

The hypertext markup language HTML has a tag

Tag syntax

Item # 1

Item # 2

Item # 3

...

This code is converted to a bulleted list on the site:

Item # 1
Item # 2
Item # 3

Tag

requires the mandatory use of an end tag

A pair tag is used to form list items. Between the opening and closing tags are individual words, phrases, paragraphs, images, chunks of code and much more, which are the contents of a bulleted list.

What can be the contents of a bulleted list?

It can be a variety of texts, including single words, phrases and paragraphs, images, nested lists, chunks of php code, and much more that needs simple labeling.

Each bulleted list item is indented by default 40 pixels to the right. Using cSS styles, we can change the display of this list at our discretion. Tag

List-in-list attachments are allowed

for example

Item # 1

Item # 2-1

Item # 2-2

Item # 2-3

Item # 3

...

Tag attributes and properties

Widely used tag attribute

1. type \u003d "disc" - marker in the form of a filled circle (this value is the default). The disk example was just above.

2. type \u003d "circle" - a marker in the form of a transparent circle

For example:

Item # 1

Item # 2

Item # 1
Item # 2

3. type \u003d "square" - a marker in the form of a square

For example:

Item # 1

Item # 2

And this is how it looks on the page:

Item # 1
Item # 2

In CSS, the marker type is specified using the list-style-type attribute:

...

Let's consider what values \u200b\u200bthe list-style-type can take:

disc - a marker in the form of a circle (the example was above)
circle - marker in the form of a transparent circle (the example was above)
square - a marker in the form of a square (the example was above)
decimal - marker in the form of a numbered list in Arabic numerals: 1, 2, 3, ...
decimal-leading-zero - marker in the form of a numbered list in Arabic numerals with leading zero: 01, 02, 03, ...
lower-roman - marker in the form of a numbered list in the Roman alphabet in small letters: i, ii, iii, iv, v
upper-roman - bullet in the form of a numbered list in the Roman alphabet in big letters: I, II, III, IV, V
lower-latin - a marker in the form of a list in the Latin alphabet in small letters: a, b, c, d, ...
upper-latin - a marker in the form of a list in the Latin alphabet in capital letters: A, B, C, D, ...
lower-greek - a bullet in the form of a list in the Greek alphabet in small letters
upper-greek - bullet in the form of a list in the Greek alphabet in capital letters

Note 2

The attribute can be assigned as the tag itself

... When setting an attribute to a tag

How to make an enum in html. Bulleted lists

HTML bulleted lists - ul and li tags

Numbered HTML Lists - ol and li tags

HTML definition lists - dl, dd, dt tags