How to use ul in html. How to place list items horizontally? Where list styles are written in the Twenty Eleven template
The hypertext markup language HTML has a tag
- , used to create bulleted lists. It is supported by everyone modern browsers and allows you to display elements in an order that does not require numbering. For example, it very often displays menu items and everything related to lists on the page: dishes, products, equipment, tools and much more that needs to be listed without indicating the priority of a particular item.
- Element #1
- Element #2
- Element #3
- ...
- Element #1
- Element #2
- Element #3
- Element #1
-
- Item #2-1
- Element #2-2
- Element #2-3
- Element #3
- ...
- Element #1
- Element #2
- Element #1
- Element #2
- Element #1
- Element #2
- Element #1
- Element #2
- ...
- disc - marker in the form of a circle (example was above)
- circle - marker in the form of a transparent circle (example was above)
- square - marker in the form of a square (example was above)
- decimal - marker in the form of a numbered list in Arabic numerals: 1, 2, 3, ...
- decimal-leading-zero - a marker in the form of a numbered list in Arabic numerals with a leading zero: 01, 02, 03, ...
- lower-roman - a marker in the form of a numbered list in the Roman alphabet in small letters: i, ii, iii, iv, v
- upper-roman - marker in the form of a numbered list in the Roman alphabet in capital letters: I, II, III, IV, V
- lower-latin - marker in the form of a list in the Latin alphabet in small letters: a, b, c, d, ...
- upper-latin - marker in the form of a list in the Latin alphabet in capital letters: A, B, C, D, ...
- lower-greek - a marker in the form of a list in the Greek alphabet in small letters
- upper-greek - a marker in the form of a list in the Greek alphabet in capital letters
- . When setting an attribute to a tag
- all list items will be displayed as indicated by the attribute. But we can give this or that element its own display. Example in the picture:
- Element #1
- Element #2
- Element #3
- Element #1
- Element #2
- Element #3
- Element #1
- Element #2
- Element #3
- Element #1
- Element #2
- Element #3
- List item
- Unique list
- Original lists
- ZORNET.RU - Webmaster
- Another list
- List item
- Unique list
- Original lists
- ZORNET.RU - Webmaster
- Another list
- Scripts for uCoz
- Templates for uCoz
- Website design
- Website styles
- Styling with CSS
- The first element for the site
- Second element for the site
- Third element for the site
- The fourth element for the site
- The fifth element for the site
- Element #1
- Element #2
- Element #3
- ...
- A - sets markers in the form of capital Latin letters (A, B, C..);
- a - sets markers in the form of lowercase Latin letters (a, b, c..);
- I - sets markers in the form of large Roman numerals (I, II, III, IV..);
- i - sets markers in the form of small Roman numerals (i, ii, iii, iv..);
- 1 (default) - sets markers in the form of Arabic numerals (1, 2, 3..);
- . Between the opening and closing tags are individual words, phrases, paragraphs, images, pieces of code, and much more that are the content of the bulleted list.
Note
Inside the list you can change the account to your own. There is a special attribute value="" on the tag for this purpose.
- , which is assigned some numeric value. For example
- Element #1
- Element #2
- Element #3
- Element #1
- Element #2
- Element #3
- Element #1
- Element #2
- Element #3
- Element #10
- Element #11
- Element #12
- Element #1
- Element #2
- Element #3
- Element #1
- Element #2
- Element #3
- Element #1
- Element #2
- Element #3
- Element #1
- Element #2
- Element #3
- Element #1
- Element #2
- Element #3
- Element #1
- Element #2
- Element #3
- Element #1
- Element #2
- Element #3
- .
- Element #1
- Element #2
- Element #3
- Element #4
This is what it looks like on the page:
- Element #1
- Element #2
- Element #3
- Element #4
Example 5. Reverse numbered list in html
Below is an example of a reverse numbered list (counting in reverse order).
- Element #1
- Element #2
- Element #3
- Element #4
This is what it looks like on the page:
- Element #1
- Element #2
- Element #3
- Element #4
Element
- (from the English “unordered list”) creates a bulleted (unordered) list. Typically, the element
- , which, in addition to text, may include other HTML elements (lists, images, headings, paragraphs, etc.). By default, bulleted lists are displayed on the web page as a list starting with a small black circle. Browsers add a small margin to the left when displaying list items.
Note: If to
- applies CSS property, then the elements
- inherit these properties.
Advice: To change the marker type, use the list-style-type CSS property or the list-style-image property, which allows you to replace markers with images. To create numbered lists, use the tag
- .
- ... ...
Syntax
Closing tag
Required.
Attributes
compactDeprecated in HTML5 Reduces indentation and line spacing. type HTML5 Sets the type of list marker.Available for this item global attributes And events.
Default styling
Most browsers will display the element
- with the following CSS values default:
- Coffee
- Tea
- Cocoa
- Paragraphs
- Line breaks
- Lists and list elements
- Headings
- Horizontal rulers
- Bun
- Pie
- Loaf
- Pie
- Bun
- Pie
- Loaf
- Pie
- Bun
- Pie
- Loaf
- Pie
- Bun
- Pie
- Loaf
- Pie
- Saw
- Screwdrivers
- Straight
- Cross
- Drill
Ul ( display: block; list-style-type: disc; margin-top: 1em; margin-bottom: 1 em; margin-left: 0; margin-right: 0; padding-left: 40px; )
Differences between HTML 4.01 and HTML5
The compact and type attributes are not supported in HTML5.
Usage example:
Unordered HTML list:
Example HTML:
Try it yourselfSpecifications
Specification Status WHATWG HTML Living Standard (WHATWG) Living standard HTML 4.01 (W3C) Recommendation HTML5 (W3C) Recommendation HTML 5.1 (W3C) Recommendation Browser support
Try it yourself - Examples
How can I make the list start with a number other than 1?
Let's continue our conversations about the beginnings of html. In this article, I want to talk about how to create paragraphs, lists, and headings in text. And also about single tags
And
.I strongly advise you to read the first lesson in this series, as well as the introductory article about starting to study html for those who are not yet familiar with them.
Now we will continue studying tags. I will assume that the reader is already familiar with the material in the above articles.
As always, work plan:
Paragraphs
The text almost always consists of paragraphs. A paragraph is an element of text that conveys a complete thought.
In html, a paragraph, as can be seen from the title, is denoted by . The letter "p" is taken from the word "paragraph", which just means "paragraph".
Let's look at an example:
The text of the first paragraph. It contains a thought. But now the thought is over.
Another thought has already begun and we write it in another paragraph.
As you can see, the use of paragraphs is very simple and does not require any special comments. If we look at this code in a browser, we will see two lines with one empty line between them. In Russian texts, it is customary to separate a paragraph not by an empty line, but by shifting the first line to the right. But this is exactly the formatting that is often used on the Internet, so it is often left in Russian-language texts. However, if you don't like this behavior, you can change it using CSS.
Line breaks
Sometimes you need to translate a line without finishing a thought or closing a paragraph. That is, just go to a new line. There is a single tag for this
. Here is an example of its use:The wind is blowing merrily
And the boat speeds up
He runs in the waves
With sails raised.This fragment of a poem by A.S. Pushkin helped us illustrate the action of the tag
. I specifically placed the last two lines of this quatrain in one line of code to show that the lines are transferred to a new line not because we placed line breaks, but because we placed tags
. This tag is very simple and does not need detailed explanation, so we will stop discussing it here.Lists,
- and list elements
Sometimes you need to list something in the text. For this purpose, three tags are used: ul, ol, li. All of these tags are container tags, but the tag is always contained in one of the or containers, and has no meaning outside of them. The ul container is used when we don't care about the order of the items listed, and we don't want to focus on the order in which they appear. The ol tag, on the contrary, focuses attention on the sequence of elements, automatically numbering each line. Let's look at an example:
On the browser screen this code will look like this:
If we simply replace the ul tag with the ol tag, we get a numbered list:
Now it looks like this:
Nobody forbids nesting one list within another, forming nested lists with sublists:
Tools:
You need to experiment a little with these lists to get used to using them. There is another type of list, but it is rarely used, so I will not talk about it now. Maybe in another article.
Of course, like everything else, appearance These elements can be modified beyond recognition using CSS.
Headings
Of course, paragraphs help in structuring documents. But in order to break a large text into smaller logical parts, you can title each of them. Each part can contain further subparts, with their own lower-level headings, and so on. To set the title, use tags
, where “x” is a number from 1 to 6. The higher the number, the lower the heading. That is, the top-level heading will be called h1, and the bottom-level heading will be called h6. By default, the text in these headings is displayed in large font and indented. This text is displayed on the entire line, that is, hx tags are block tags. The h1 tag has the largest font, and the h6 tag has the smallest font. As a rule, there are one, maximum two top-level h1 tags on a page. As the level decreases, the number of tags increases. But it’s rare that a webmaster will be able to break up the text so much that he needs level 5 or 6 headings. Even level 4 is rarely used. Less words, more action!
- inherit these properties.
- used to create lists where changing the order of the items in this list does not significantly change the meaning of the list.
Tag
- refers to block elements, so it will occupy the entire width available to it, and the size of the height will depend on the amount of content.
Items for numbered lists are defined using a tag
The code looks like this:
Changing Tag Markers
- using CSS
Bullet list items created by tag
- , can be marked with arbitrary images. CSS is used to change the marker type. For example
And this is what it looks like on the page:
C using CSS we can set other types of marker display. But you need to remember that when specifying any style for a tag
- , it applies to all elements of the list. If you decide to change the standard ul and li lists, then this topic will be interesting to you. Because here you will learn several original solutions. Which will certainly help you change the standard look to a unique one, where CSS style is used, for the design of lists. The advantage is that we will use only one class throughout, which will radically change the look. In addition to these parameters, you can specify at what number the list should begin; here you can do everything yourself. The default starting value for numbered lists is at the first or letter A.
With the basics out of the way, we'll now take a closer look at the elements used to provide structure and meaning to the various parts of the design. If anyone doesn't know, ul and li are a much better option than plain text because when text is wrapped, especially in mobile phone, it indents perfectly and doesn't wrap around the marker.
Lists are considered to be a great way to present information on pages because they are easy to read and look good. Many people seem to think that bullet points are little images, but in fact they are all created through fairly simple HTML code. You can embed different types lists into each other if you want, just remember to close them correctly. You can play with the text you want in all these list commands.
You also need to know that lists initially contain several elements:
1 . Disorganized information.
2 . Organized information.
3 . Definitions.Let's start installation:
1. Option:
CSSKsangelopan (
margin: 19px 0 0;
padding:0;
list-style: none;
counter-reset: li;
}
.ksangelopan li (
border: 2px solid #3575ad;
background: #d7dee4;
position: relative;
margin-bottom: 17px;
padding: 15px 9px;
}
.ksangelopan li:hover (
z-index: 1;
}
.ksangelopan li:before (
border: 2px solid #2270b3;
position: absolute;
top: -14px;
padding: 3px 9px;
font-size: 11px;
font-weight: bold;
color: #246eaf;
background: #f2f4f7;
counter-increment: li;
content: counter(li);
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
}
.ksangelopan li:hover:before (
background: #2672b3;
color: #f7f9fb;
-webkit-transform: translate(-11px, 0);
-ms-transform: translate(-11px, 0);
-o-transform: translate(-11px, 0);
transform: translate(-11px, 0);
}
.ksangelopan li:after (
content: "";
position: absolute;
transition-duration: 0.3s;
-webkit-transition-property: width;
transition-property: width;
z-index: -1;
background: #FFF;
height: 100%;
left: 0;
top: 0;
width: 0;
}
.ksangelopan li:hover:after (
width: 100%;
}
That's all for the installation.2 Second option:
CSSBeleduzlopamges (
margin-bottom: 8px;
padding:0;
list-style: none;
counter-reset: li;
}
.beleduzlopamges li (
position: relative;
border: 2px solid #195588;
background: #eff3f7;
padding: 15px 19px 15px 27px;
margin: 12px 0 12px 40px;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.beleduzlopamges li:hover (
background: #FFF;
}
.beleduzlopamges li:before (
line-height: 32px;
position: absolute;
top: 4px;
left: -39px;
width: 39px;
text-align: center;
font-size: 16px;
font-weight: bold;
color: #f9f5f5;
background: #275b88;
counter-increment: li;
content: counter(li);
transition-duration: 0.2s;
}
.beleduzlopamges li:hover:before (
width:46px;
}
.beleduzlopamges li:after (
position: absolute;
left: 0;
top: 4px;
content: "";
height: 0;
width: 0;
border: 16px solid transparent;
border-left-color: #275b88;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
}
.beleduzlopamges li:hover:after (
margin-left: 6px;
}
You can independently set the center gamma to match the main style of the site.3 Third option:
CSSNizualisanelag (
padding:0;
list-style: none;
counter-reset: li;
}
.nizualisanelag li (
position: relative;
padding: 9px 17px 17px 25px;
margin-left: 39px;
transition-duration: 0.2s;
cursor: pointer;
font-weight: bold;
color: #343638;
}
.nizualisanelag li:before (
border: 3px solid transparent;
line-height: 35px;
position: absolute;
top: 0;
left:-29px;
width:41px;
text-align:center;
font-size: 14px;
font-weight: bold;
color: #619dce;
counter-increment: li;
content: counter(li);
transition-duration: 0.3s;
box-sizing: border-box;
}
.nizualisanelag li:hover:before (
color: #337AB7;
}
.nizualisanelag li:after (
position: absolute;
top: 0;
left: -29px;
width: 41px;
height: 41px;
border: 5px solid #468bd0;
border-radius: 50%;
content: "";
opacity: 0.5;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.nizualisanelag li:hover:after (
animation: 500ms ease-in-out 0s bounceIn;
opacity: 1;
}@keyframes bounceIn (
0% {
opacity: 0;
transform: scale3d(.3, .3, .3);
}
20% {
transform: scale3d(1.3, 1.3, 1.3);
}
40% {
transform: scale3d(.9, .9, .9);
}
60% {
opacity: 1;
transform: scale3d(1.03, 1.03, 1.03);
}
80% {
transform: scale3d(.97, .97, .97);
}
to (
opacity: 1;
transform: scale3d(1, 1, 1);
}
}
Comes with beautiful animation.4 Fourth option:
CSSPadding:0;
list-style: none;
}
.kudezamuden li(
padding:6px;
}
.kudezamuden li:before (
padding-right: 11px;
font-weight: bold;
color: #4979a0;
content: "\2606";
transition-duration: 0.4s;
}
.kudezamuden li:hover:before (
color: #235e90;
content: "\2605";
}
Similar previous versions, only the icon itself has been changed.In general, this is a small selection of lists that the web master can make nice list on the portal, where he himself can design it more, as he himself wants to see it.
If you need to put items in a numbered list instead of a bulleted one, then ordered HTML will be used. This list is created using the ol tag. Numbering starts at one and increases by one for each subsequent ordered list element with the li tag.
The only difference is that this tag is strictly made for numbering lists. The name of the tag comes from the English abbreviation "Ordered List" - a numbered list.
Tag Syntax
Where the type="value" attribute can take the following values
The start="value" attribute specifies the initial value (start value) of the report.
The reversed attribute specifies reverse counting (if necessary).
Tag
- requires the mandatory use of a closing tag
To form list elements, a paired tag is used
Examples with numbered lists in html (
- )
Example 1. HTML numbered list in Latin letters
Example with capital letters
Example with lowercase letters
This is what it looks like on the page:
Example 2. HTML numbered list in Roman letters
Example with capital letters
This is what it looks like on the page:
Example with lowercase letters
This is what it looks like on the page:
Example 3. Numbered list html different start position
An example that shows the capabilities of the start attribute, which allows you to set the starting value of the counter.
This is what it looks like on the page:
Example 4. Changing the count in html numbered lists
Below is an example with the ability to change counter values using the value attribute when displaying new elements in tags
Tag Syntax
This code translates into a bulleted list on the site:
Tag
- requires mandatory use closing tag
To form list elements, a paired tag is used. Between the opening and closing tags are individual words, phrases, paragraphs, images, pieces of code, and much more that are the content of the bulleted list.
What can be the content of a bulleted list?This can be a variety of text, including single words, phrases and paragraphs, images, nested lists, pieces of php code, and much more that need simple marking.
Each bulleted list item is indented 40 pixels to the right by default. Using CSS styles, we can change the display this list at your own discretion. Tag
- is block-based, so it occupies the entire area available to it, limited by the edge of the screen, table frame, or other page elements.
List-within-a-list attachments are allowed.
For example
Tag Attributes and Properties
Widely used tag attribute
- is a type attribute indicating what the list marker will look like. Can take the following values
1. type="disc" - marker in the form of a filled circle (this value is the default). The disk example was a little higher.
2. type="circle" - marker in the form of a transparent circle
For example:
3. type="square" - marker in the form of a square
For example:
And here's what it looks like on the page:
In CSS, the bullet type is specified using the list-style-type attribute:
Let's look at what values list-style-type can take:
The attribute can be assigned to the tag itself
- , and tags
