Which tag is used to create the definition list. HTML: Numbered and bulleted list. Special and nested lists in HTML code

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

By default, most browsers add vertical margin and left padding to the 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

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

Walk along Apricot Street
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

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

Walk along Apricot Street
Turn onto Vinogradnaya
Stop on Shady Street

Demonstration of the start attribute

reversed attribute

The reversed attribute when added to an element

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

Walk along Apricot Street
Turn onto Vinogradnaya
Stop on Shady Street

Demonstration of the reversed attribute

value attribute

The value attribute can be applied to individual elements

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.

Walk along Apricot Street
Turn onto Vinogradnaya
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

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
. Let's repeat - the only element that we can put as a direct descendant of the elements
And
, is
.
However, inside the element
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.

Walk the dog

Fold laundry

Go to the store and buy:

Milk

Bread

Cheese

Mow the lawn

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
. Element
can contain any regular element you want. However, the element
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
.
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.
.
The process involves removing any default list-style-type property value and adding a background image and margins to the element
.
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
. 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
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
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
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
display property with the value inline or inline-block . This will put all the elements
on one line with equal spacing between each list item.
If the spaces between elements
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
, 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 floats
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
is a better option than changing the display property.
Installation for all elements
float properties like left will align all elements horizontally
directly next to each other without any gaps between them. When we use float for
, the list marker is displayed by default and will be positioned on top of the item
next to him. To prevent the list marker from appearing on top of other items
, 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
are displayed as inline-block .

Profile
Settings
Notifications
Exit

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
on our pages consist of several links. These elements can be better organized as an unordered list.
Using an unordered list (via element
) and list items (via the element
) will set the structure of our navigation menus. These new elements, however, will render our navigation menus vertically.
We're going to change the display value for our elements
to inline-block so that they all line up horizontally. When we do this, we must also take into account the empty space on the left between each element
. Recalling from Lesson 5, Positioning Content, we know that opening an HTML comment at the end of an element
and closing the comment at the beginning of the element
will remove this space.
With that in mind, the markup for the navigation menu inside our element
will look like this:

home
Speakers
Schedule
Location
Registration

In the same vein, markup for the navigation menu inside our element
will look like this:

home
Speakers
Schedule
Location
Registration

Don't forget to make these changes to all our HTML files.
With our bulleted list, let's make sure the list items are aligned horizontally and clean up their styles a bit. We'll use the existing nav class to specify our new styles.
Let's start by making sure that all the elements
inside any element with a nav class attribute value were rendered as inline-block to enable horizontal margins and to allow elements to be aligned vertically.
Additionally, we will use the :last-child pseudo-class to determine the last element
and reset its right margin to 0. This ensures that any horizontal space between elements
and the edge of its parent will disappear.
In our main.css file, below the navigation styles, add the following CSS:
Nav li ( display: inline-block; margin: 0 10px; vertical-align: top; ) .nav li:last-child ( margin-right: 0; )
You're probably wondering why our list doesn't include any list bullets or styles by default. These styles were removed by resetting at the top of our style. If we look at the reset, we see that the elements
,
And
include zero margin and padding, and for
And
list-style is set to none .
The navigation menu isn't the only place we'll use lists. We will also use them on some of our internal pages, including the Speakers page. Let's add some speakers to our conference.
In the speakers.html file, just below the intro section, we will create a new section where we will introduce all our speakers. By reusing some existing styles we will use the element
with a row class to wrap all our speakers and apply a white background and margins behind them. Inside an element
we will add an element
with the grid class to center our speakers on the page and this will allow us to include multiple columns as well.
So far our HTML below the intro section looks like this:

Inside the grid, each speaker will be marked with its own element
, which includes two columns. The first column measures two-thirds of the element
and will be marked with element
. The second column measures the remaining third of the element
and will be marked using the element
, and its content is secondary to the speaker and his speech.
Using our existing classes col-2-3 and col-1-3 , the diagram for the speaker section would look like this:

There are several points worth paying attention to here. First, every element
for each speaker includes an id attribute with the speaker's name as the value. Later, when we create a schedule for our conference, these id attributes will serve as anchors that will allow us to associate the schedule with a speaker profile.
Additionally, the element's closing tag
followed by opening a comment in HTML and the element's opening tag
, preceded by closing the comment. Since the column classes will render these elements as inline-block elements, we remove the white space that will appear between them.
Inside the column 2/3 marked with an element
we will use multiple headings and paragraphs to show the speaker's name, short bio, title of the talk, and announcement.
Given this content, the speaker section would look like this:

In the column 1/3 marked by the element
we are going to add an element
with the speaker-info class. We will use the element
, because we'll be adding styles to this element soon.
Before we get into any styling, let's add an unordered list to the element
, which includes list items relevant to the speaker.
Now our HTML for the speaker will look like this:

When an element
With the speaker-info class ready, we can add some styling to it.
Let's start by adding a new section to our main.css file to style the Speakers page. In it we will add a one-pixel solid frame with a radius of 5 pixels around any element with the speaker-info class.
Next, we'll add a top margin of 88 pixels to position the element on the same vertical line as the speaker's first paragraph, and we'll also add 22 pixels of vertical padding to provide room for the nested bulleted list.
Finally, we'll center align all the text inside the element.
Overall, our CSS for the speaker-info class looks like this:
/* ====================================================== Speakers ======= =================================== */ .speaker-info ( border: 1px solid #dfe2e5; border-radius : 5px; margin-top: 88px; padding: 22px 0; text-align: center; )
Let's stop for a moment and look at why we're using the element here
and corresponding styles.
We place the element
inside element
with the value col-1-3 for the class attribute, because we want the padding inherited from the col-1-3 class to be outside the border of the element
. We'll be including an image inside the element soon
along with the list, so we created an element
rather than applying those styles directly to the element
.
As we add more and more speakers to the page, we want to make sure they remain equally spaced vertically. To do this, we'll create a set of rules for the speaker class that includes a bottom margin of 44 pixels, thus:
Speaker ( margin-bottom: 44px; )
We can apply this class to
for each speaker, provided that this is not the last speaker. We're omitting this class for the last speaker because we don't want to create unnecessary padding before our element
. With more than one speaker, our markup would look like this:

...
...

Pay attention to the first element
with speaker Chris Mills. The section includes a class attribute with the value speaker , which vertically separates it from my section, Shay Hou. Last element
again mine and it doesn't include a speaker class to keep it at the right distance from the element
.

Our navigation menu is now complete and the Speakers page has begun to take shape.
Rice. 8.01. Our Speakers page after updating the navigation menus and adding a column
Demo and source code
Below you can view the Styles Conference website in its current state, as well as download the site's current source code.
Summary
Lists are used quite often in HTML, often in places that are not explicit or obvious. The key is to use them semantically as much as possible and where they fit best.
To summarize, in this lesson we covered the following:
how to create a bulleted, numbered, and descriptive list;
Editors: Vlad Merzhevich

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

To build such a list, you need 2 types of elements: ‘ul’ (short for unordered list, i.e. unordered list) and ‘li’ (list element). Everything written inside 'li' is marked with a marker.

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

Types of markers

There is a special type attribute that is placed in both list elements. This is your marker type. There are only 3 types: circle, disk and square:

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

Ordered list

To build a list, you also need 2 elements: ‘ol’ and ‘li’ (list element). Markers are replaced with numbers with a dot. Example of a simple list:

first element

second element

last element

You can control the appearance of the ordered list by specifying different types of numbering.

Types of numbering

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

- Numbering in Arabic numerals (1, 2, 3)
- Numbering in capital letters (A, B, C)
- Numbering in lowercase letters (a, b, c)
- Numbering in large Roman numerals (I, II, III)
- Numbering in small Roman numerals (i, ii, iii)
- What number to start numbering from?
Depending on where you specify the type of numbering, you can change it for the entire list or for a specific element.

Definition list

A list of definitions has been developed for dictionary entries.

There is a general container 'dl'. Inside it are ‘dt’ (definition termin) and ‘dd’ (definition description). The 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 elements. But only inline elements can be placed inside the 'dt' element. You can put whatever you want into the 'dd' and 'li' elements. This is where nested lists come from.

Nested (mixed lists)

These are multi-level lists, within which there is a hierarchy. Often such lists are used when building a site map. 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

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

– a numbered (using numbers or letters) list, each element of which has a serial number (letter);
– 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
(from the English List Item - list item). The default is a numbered list with Arabic numbers.
Tag
has the following syntax:

element 1

element 2

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

Get the key

Insert the key into the lock

Turn the key two turns

Get the key out of the lock

Open the door

Step-by-step instruction

Get the key

Insert the key into the lock

Turn the key two turns

Get the key out of the lock

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, etc.). 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
in the following way:

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
, 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
Send mail

Visit to the editor
Choosing a theme

Decorative design

Final report

Evening viewing of messages

Tuesday
Revise schedule

Send images

Wednesday...

Monday

Send mail

Visit to the editor

Choosing a theme

Decorative design

Final report

Evening viewing of messages

Tuesday

Revise schedule

Send images

Wednesday...

Formatting Bulleted Lists

To change the appearance of the list marker, you should use the property 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 possible use of a definition list:

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.

Numbered lists are a collection of elements with their serial numbers. The type and type of numbering depends on the tag attributes
, which is used to create the list. Each item in the numbered list is indicated by a tag
as shown below.

First point

Second point

Third point

If you do not specify any additional attributes and just write the tag
, then the default is a list with Arabic numbers (1, 2, 3,...), as shown in Example 11.3.

Example 11.3. Create a numbered list
Numbered list
Working with time

creating punctuality (you will never be late for anything);

cure for punctuality (you will never be in a hurry);

change in perception of time and clocks.

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

Rice. 11.3. Numbered list view

Note that a numbered list also adds automatic indentation to the top, bottom, and left of the text.

The following values can serve as numbering elements:

Arabic numbers (1, 2, 3, ...);

capital Latin letters (A, B, C, ...);

lowercase Latin letters (a, b, c, ...);

capital Roman numerals (I, II, III, ...);

lowercase Roman numerals (i, ii, iii, ...).

To indicate the type of numbered list, use the type attribute of the tag
. Its possible values are given in table. 11.2.
Table 11.2. Types of numbered list
List type HTML code Example
Arabic numbers

1. Cheburashka
2. Crocodile Gena
3. Shapoklyak
Capital letters of the Latin alphabet

A. Cheburashka
B. Crocodile Gena
C. Shapoklyak
Lowercase letters of the Latin alphabet

a. Cheburashka
b. Crocodile Gena
c. Shapoklyak
Roman numerals in uppercase

I. Cheburashka
II. Crocodile Gena
III. Shapoklyak
Roman numerals in lower case

i. Cheburashka
ii. Crocodile Gena
iii. Shapoklyak
To start a list with a specific value, use the start attribute of the tag
. It doesn't matter what type the list is set to using type , the start attribute works the same with both Roman and Arabic numerals. Example 11.4 shows how to create a list using uppercase Roman numerals starting with eight.

Example 11.4. List numbering
Roman numbers

King Magnum XLIV

King Siegfried XVI

King Sigismund XXI

King Husbrandt I

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

Rice. 11.4. Numbered list with Roman numerals

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 have 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
Bulleted list

Cheburashka

Crocodile Gena

Shapoklyak

Rat Larisa

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

Rice. 11.1. Bullet 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
Bulleted list
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.

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

List type	HTML code	Example
Arabic numbers		1. Cheburashka 2. Crocodile Gena 3. Shapoklyak
Capital letters of the Latin alphabet		A. Cheburashka B. Crocodile Gena C. Shapoklyak
Lowercase letters of the Latin alphabet		a. Cheburashka b. Crocodile Gena c. Shapoklyak
Roman numerals in uppercase		I. Cheburashka II. Crocodile Gena III. Shapoklyak
Roman numerals in lower case		i. Cheburashka ii. Crocodile Gena iii. Shapoklyak

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

Seal

Also interesting:

Review of the free version of Virtual CD Virtual disk of Win 10

Choosing the best navigator for iPhone

Download webcam program for Windows 8

We recommend reading:

2024-03-04 00:10:06

Free antivirus for laptop

2024-03-04 00:10:06

How to unlock a Samsung smartphone using dr

2024-03-04 00:10:06

Beeline transfer money to another number: different methods

Continuing the topic:

Miscellaneous

Laptop Asus x553m specifications

We tried to make the description as good as possible so that your choice would be unmistakable and informed, but... We may not have used this product, but only from all...

×

WiFi

Linux

Windows

Miscellaneous

Networks

Smart TV

Solutions

Android

New articles
/
Popular

2024-03-03 00:06:57

Samsung Galaxy C5 - Specifications

Solutions

2024-03-03 00:06:57

New middle class: review of the Lenovo Vibe Z2 smartphone

Networks

2024-03-03 00:06:57

Xiaomi Hybrid Pro HD review: hybrid headphones with three drivers

Windows

2024-03-02 00:08:11

Pixel controller: programming and operation Supply ventilation controller pixel programming

Networks

2024-03-02 00:08:11

Choosing a good processor for a laptop Energy consumption of a laptop processor

Apple

2024-03-02 00:08:11

Setting up Rambler mail in email clients

Linux

How to open 1c xml file. Generating an XML file. Easy upload for third party application. Generating the “Invoice” document

Windows

Caching in Joomla. Caching in Joomla. Relieving the load from the server Do I need to enable caching joomla 1.5

Android

Smart watches for Windows phone – new opportunities for Windows fans

Programs

How to backup Gmail and Yandex mail

Smartphone

Why did Facebook buy Instagram?

Programs

How to organize files and folders on your computer Folders: sorting by multiple criteria

Devices

Which tag is used to create the definition list. HTML: Numbered and bulleted list. Special and nested lists in HTML code

Bulleted lists

Show bulleted list

Numbered lists

Numbered list demonstration

start attribute

Demonstration of the start attribute

reversed attribute

Demonstration of the reversed attribute

value attribute

Value attribute demonstration

Description Lists

Description List Demonstration

Nested Lists

Demonstration of nested lists

Styling List Items

list-style-type property

Demonstration of the list-style-type property

list-style-type values

Using an Image as a List Marker

Showing an Image as a Marker

list-style-position property

List-style-position property demonstration

Generic property list-style

Horizontal list display

List display

Demonstration of a list with inline-block

Lists with floats

Demonstration of a list with float

Navigation list example

Navigation List Demonstration

On practice

Definition list

Nested (mixed lists)

Numbered lists

Example: Numbered List

Formatting Numbered Lists with CSS

Example: Applying a CSS Property list-style-type

Bulleted lists

Nested Lists

Example: Nested Lists

Formatting Bulleted Lists

Example: Bullet List Styles

Graphic markers.

Example: Graphic Markers

Lists of definitions (descriptions)

Example: Definition List