How to place the list items horizontally? Examples of stylish design UL Li Li lists CSS match the HTML tag describing OL.

We will continue our conversations about the beginning of HTML. In this article I want to talk about how to create paragraphs, lists and headlines in the text. As well as about solitary tags
and

I strongly advise you to familiarize yourself with the first lesson in this series, as well as with the introductory article about the beginning of the study of HTML those who have not yet become familiar with them.

Now we will continue to study tags. I will assume that the reader has already been familiar with the material of the above articles.

As always, the work plan:

1. Paragraphs
2. Rasp rows
   
3. Lists and lists
4. Headlines
5. Horizontal rules

   ---

Paragraphs

The text almost always consists of paragraphs. Paragraph is the element of the text that is carrying a complete thought.

In HTML paragraph, how can be judged from the header, is indicated. The letter "P" is taken from the word "Paragraph", which is the "paragraph" indicates the "paragraph".

Consider an example:

The text of the first paragraph. It contains thought. But the thought ended.

Now the other thought has already begun and we write it in another paragraph.

As can be seen, the use of paragraphs is very simple and does not require special comments. If you look at this code in the browser, we will see two lines between which there is one empty string. In Russian texts, paragraph is taken to separate not an empty string, but the displacement of the first line to the right. But on the Internet, it is often used precisely such formatting, so it often leaves it in Russian-speaking texts. However, if such behavior does not suit, it can be changed using CSS.

Rasp rows

Sometimes it is necessary to translate the string without ending with the thought without closing the paragraph. That is, just go to a new string. There is a single tag for this.
. Here is an example of its application:

The wind is fun walk

And the boat is customized

He runs himself in the waves
On raised sails.

This fragmet poem A.S. Pushkin helped us illustrate the action of the tag
. I specifically past two lines of this quatrain posted in one line of the code to show that the lines are transferred to the new line not because we put the transfer of lines, and because we put tags
. This tag is completely simple and does not need detailed explanations, so we will finish discussing it.

Lists

and elements of lists

Sometimes in the text you need to list something. For this purpose, three tags are used: UL, OL, LI. All these container tags, but the tag is always contained in one of the containers or, and does not make sense outside them. The UL container applies when we are not important to the order of the listed positions, and we do not want to focus on the order in which they go. And the OL tag, on the contrary, focuses on the sequence of the elements, automatically numbling each line. Consider an example:

• Bulk


• Pie


• Loaf


• Pie

On the browser screen, this code will look like this:

• Bulk
• Pie
• Loaf
• Pie

If we simply replace the UL tag on the OL tag, then we get a numbered list:

1. Bulk


2. Pie


3. Loaf


4. Pie

Now it looks like this:

1. Bulk
2. Pie
3. Loaf
4. Pie

No one prohibits investing one list to another, forming nested listings with asses:

Instruments:

• Saw


• Screwdrivers
  
  
  
  1. Straight
  
  
  2. Cross
  
  
  
  


• Drill

It is necessary to experiment a little with these lists to learn them. There is another kind of lists, but it is rarely applied, so I will not tell about it now. Maybe in another article.

Of course, as everything else, the appearance of these elements can be changed beyond recognition using CSS.

Headlines

Of course, paragraphs help in structuring documents. But in order to smash a large text to smaller logical parts, you can be entitled to each of them. Each part may contain even sacrificing, with its lower level headers, and so on. To task the header, serve tags where "X" is a number from 1 to 6. The header is the lower level, the greater the number. That is, the title of the highest level will be called H1, and the lowest - H6. By default, the text located in these headlines is displayed with a large font with incitements. This text is displayed on the entire string, that is, HX tags are blocks. The tag H1 is the largest font, and the H6 tag is the smallest. As a rule, on the page one, maximum - two tags of the top level H1. With a decrease in the level, the number of tags increases. But rarely, as a webmaster can break the text so that he will need headlines 5 or 6 levels. Even the 4th level is rarely applied.

Talk less, work more!

Element

(From English. "Unordered List" - "Disordered List") creates a marked (disordered) list. As a rule, element
It is used to create such lists, where the change in the order of the items of this list does not significantly change the meaning of the list.

Tag

It refers to block elements, so it will occupy all the width accessible to it, and the size of the height will depend on the amount of content.

Points for numbered lists are determined using the tag

• which, in addition to text, may include other HTML elements (lists, images, headlines, paragraphs, etc.). By default, marked lists are displayed on a web page in the form of a list starting with a small black circle. Browsers when displaying the elements of the list add a small indent from the left edge.

  Note:If K.

  CSS property applies, then elements
  • Inherit these properties.

    Tip:To change the marker type, use the CSS list-style-type property or the list-style-image property, allowing you to replace markers on images. Use the tag to create numbered lists

    .

    Syntax

    ...
    • ...
    ...

    Closing tag

    Obligatory.

    Attributes

    Compact retained in HTML5 reduces indents and distances between rows. Type HTML5 Sets the view of the list marker.

    For this item available global attributes and events.

    Stylization by default

    Most browsers will display an item

    With the following CSS values \u200b\u200bby default:

    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

    COMPACT and TYPE attributes are not supported in HTML5.

    Example of use:

    Unordered HTML List:

    HTML example:

    Try it yourself
    • Coffee
    • Tea
    • Cocoa

    Specifications

    Specification	Status
    Whatwg Html Living Standard (Whatwg)	Live standard
    HTML 4.01 (W3C)	Recommendation
    HTML5 (W3C)	Recommendation
    HTML 5.1 (W3C)	Recommendation

    Support browsers

    Try yourself - examples

    How to make the list begins with a number different from 1.

    Lists are numbered and non-numbered.

    Numbered lists are displayed by the code:

    List with numbers
    1. paragraph 1
    2. point 2
    3. point 3

    Not numbered lists are displayed by the code:

    List with checkmarks or other symbols
    • paragraph 1
    • paragraph 1
    • paragraph 1

    Each item of any list lies in Li tag. All items of the list are concluded in one common UL or OL tag. Styles of these tags are prescribed in the style sheet.

    For each tag assigned certain design styles. They indicate indents from text.

    For a numbered list, numbering styles are prescribed for each item.

    Standard Arabic numbers are described by the Decimal value.

    list-Style-Type: Decimal; /*Arabic numerals*/

    For the marked list, the style of characters - squares or circles is indicated.

    list-Style-Type: Circle; / * Mugs * /
    List-Style-Type: Square; / * Squares * /

    Each menu item can be assigned an image.

    list-Style-image: URL ('path to image');

    Usually in the templates, the numbered list is made up with simple numbers, and not numbered - black squares and circles. It is boring and inexpressively. Let's fix it.
    

    Where are the styles of lists spelled out in Template Twenty Eleven?

    Open Style.CSS style file. Find a section titled / * Text Elements * /

    The standard code looks like this:

    How to arrange a numbered list?

    Numbered list using background

    Look at this cute design of a numbered list.

    Like? Let's repeat.

    Find styles for OL tag. Push new properties to it.

    OL (Padding: 0px 0 0 20px; margin: 0.5em 0 1.571em 1.9em; color: # 2e2e2e; List-Style-Type: none; font: 15px / 17px verdana, arial, helvetica, sans-serif; z-index : 2; Counter-Reset: Point;) OL Li (Margin-Bottom: 4px; Line-Height: 1.6; Color: # 2e2e2e; Position: relative;) OL Li: Before (Margin-Bottom: 4px; counter-increment: Point 1; Line-Height: 1.6; Height: 24px; margin-left: -36px; left: 0px; width: 24px; margin-top: 1px; background: # BDC3C7; Content: Counter (Point); Text-Align: Center; Position: Absolute; font-weight: bold;)

    In order for you to understand where you need to change under your design, let's analyze this code on the shelves.

    list-Style-Type: None; - Disables standard digits output
    Counter-Reset: Point; - Specifies the variable for the numbering counter
    Position: relative; - places the numbering near the items themselves

    before - pseudo-element for OL Li tag. It has the following styles:
    CONTENT: COUNTER (POINT); - displays the value of the variable
    Counter-Increment: Point 1; - Increases the counter on 1
    Position: Absolute;
    Background: # bdc3c7; - Background for numbers (background can be set by color or beautiful icon
    Margin - External Indents
    Padding - Internal Indents
    Color - Text Color Element
    Background - Background
    Text-Align - text alignment
    font-weight - thickness (saturation) of the font

    In your styles you can specify any colors, alignments, font size and indentation.

    Numbered list with a unique image for each item

    On one female site there are very attractive numbered lists.

    How is it implemented? Let's look at the following code:

    / * First Number * / OL Li: First-Child (List-Style-Image: URL (path to the image with digit 1);) / * Second number * / OL Li: NTH-Child (2N) (List-Style- Image: URL (path to image with digit 2);) / * Third number * / OL Li: NTH-CHILD (3N) (List-Style-Image: URL (path to the image with digit 3);) / * Fourth number * / OL Li: NTH-CHILD (4N) (List-Style-Image: URL (path to the image with digit 4);) / * Next, we prescribe exactly only for the following points of points * /

    In the code of such a numbered list, you need to list all the points of the items and for each of them to assign a unique icon.

    If you use up to 20 numbered items in the articles in the articles, then you need to register the NTH-Child (AN) pseudo class 20 times. So that the latter in the styles it was a pseudo-class NTH-CHILD (20N).

    Find the stitch styles in the styles file that describe the design of the numbered list (OL Li tags).

    Extract the first-child pseudo-child. Copy and paste it once, then change this property to NTH-Child (AN) and copy as much as numbers should have your icon. Slip items.

    For each number, suck the list-style-image property with your own unique icon.

    If the icons on the site are located far from items or superimposed on them, you need to edit alignment and indentation of digital icons or text points.
    

    How to arrange a marked (non-measured) list?

    Screen Li Li List with alternating icons

    I really liked such a marked list

    UL (Padding: 11px 0 5px 0;) UL Li (Padding-Left: 32px; Margin-Bottom: 10px; font: Normal 15px Verdana, Sans-Serif; Color: # 2e2e2e; Line-Height: 1.6; Border-Bottom: 1px dashed #CCC; Padding-Bottom: 10px;) UL LI: Before: Absolute; Width: 27px; Height: 24px; margin-left: -35px; margin-top: -2px; background: URL ("Images / Sprite.jpg") 0px 2px No-repeat; List-Style-Type: Circle;) UL LI: NTH-Child (2N): Before: Absolute; Width: 27px; Height: 43px; margin-left: -35px; margin-top: -2px; background: url ("images / sprite.jpg") 0PX -17PX NO-REPEAT; List-Style-Type: Circle;)

    You can, instead of the standard List-Style-type style, assign the "path to the icon" property - list-style-image: URL. But then you need to register an external left indent from the cramps of the site - without it, the icons will not be displayed, will go beyond the area of \u200b\u200bthe content area.

    An indentation can be assigned to the experiment:

    UL LI (IMAGES / RADIO.PNG); margin-left: 30px;)

    Alternation of icons can be set by the NTH-Child (AN) property. The example uses the Beforee pseudo-element.

    The code is registered one pseudo-class NTH-Child (2N). Its value - 2. It turns out that another id is conformed to each other item. If instead of 2n write 2n + 1, then the other icon will have to accomplish odd items.

    For each list item, you can set the lower underscore. In the example above, items are emphasized by dotted.

    Also each item can assign a frame, background, icons. Just do not permanently. Our task - not to glue everyone, pushed out the design, and improve the quality of the perception of content.
    

    How to display a few lists with different designs on the page?

    Sometimes you need to place several lists with different styles.

    If you assign common styles, then the same design will be assigned to all lists. Different lists can be displayed if you assign an OL or UL tag a separate ID and write it in HTML article editing mode. Well, in the style file for this ID you need to register individual styles.

    Here, for example, one pretty design option:

    In HTML you register the list like this:

    Content
    1. paragraph 1
    2. point 2
    3. point 3

    In CSS you suck styles like this:

    OL # SOD (Padding: 0px 20px 10px 51px; margin: 0.5em 0 0 0EEM 1EM; Color: # 2e2e2e; list-style-type: none; background: # F1F4F5; Border-Left: # BDC3C7 4PX SOLID; Display: Inline- block;) ol # sod li () ol # sod li: before (font-weight: Normal! Important)

    The new style is different from the main design of the OL tag: background, display style, line to the left of the content.

    Using in the text there are several different list of lists, you will make information that is even more interesting. When lingifying any items, you can set some icons, and when transferring actions - others. Here the design is limited only to your fantasy.

    These methods are applicable and in the design of menu items, rubrics and any other site elements.
    

    How to create an armature links in the content list?

    How to register them in HTML code? One piece of code framed an anchor link, and another piece of code is set next to the place where we need to transfer when you click on the link.

    Content
    1. Title 1.
    2. Title 2.
    3. Title 3.

    And in the text of the article you need to write like this:

    Title 1 ... Title 2 ... Title 3 ...

    Maybe more experienced webmasters will correct me. I just advise what I tried in practice myself.

    If you have any questions left, I will be glad to see them in the comments.

    Ageev Veronica.

    Maybe you will also be interested in:

    Hello, dear blog readers Website. Today, within the framework of this category, I want to talk about a variety of HTML lists that can be created based on specially designed tags UL, OL, LI and DL. Using the UL and LI pair, labeled lists are created using OL and LI - numbered, and with the help of DL, DT and DD elements, the so-called definition listings are created. We also consider brief principles for creating nested structures.

    I want to remind you that we have already managed, managed to talk about the basics of modern, as well as layouts tabile (). In addition, we touched on the foundations, well, learned through.

    MARKED lists based on tags UL and LI

    UL tag is used to create label lists, and to create numbered - OL. These tags are pair and block, just as element Li.

    Separate list items are located between the opening and closing tag, which in turn consist in the opening and closing element Li. From above and from the bottom of HTML lists, the browser adds indents to one line, similar to the retreats created by the paragraph tag.

    Let's see, for example, a labeled version that may look like this:

    • First line
    • Second
    • The last element

    Inside the opening and closing tags, UL, only Li elements can be installed, and any content (text, pictures, headers, paragraphs, links, and even other lists can be inserted inside these elements themselves.

    Those. UL serves only for organizing a marked (not ordered) listing, and all that you will see on the Web page inside it is implemented using the contents of Li elements.

    For UL, you can change the view of the marker, prescribing different values \u200b\u200bin it for the "Type" attribute. If "type" (managing the appearance of markers) for the UL element is not specified, the default marker view will be displayed (DISC - painted in the text color of the circle):

    1. - Circle cream (default);
       • - not painted circle;
         • - Square

    In the examples, the type attribute, we were prescribed in the UL element, using this type of markers for all items. But the "Type" attribute can be prescribed for each individual Li tag, setting its own type of marker for this item.

    An example of a marked list with various types of marker for each item:

    

    1. Disk marker
    2. Marker in the form of a not painted disk
    3. Square

    Numesed lists in HTML based on Tag OL

    To create a numbered listing, OL tags are used, inside which the elements Li will be located again. OL and LI, as I have already mentioned, are blocks (i.e., seek to take all the place available in width) and inside OL will not be placed anything other than Li elements.

    It turns out that OL and UL are service tags that are needed only to indicate the browser, which kind of list we form (labeled or or numbered). In the case of a numbered one - to the left of each item we will see not a marker, but the point and the point behind it:

    

    1. First line
    2. Second point
    3. Third String

    As I have already mentioned a little higher, the elements of UL, OL and Li have the ability to use the Type attribute. It allows you to configure the type of marker or set, what numbers or letters will be numbered listing items. For a numbered list, the parameters of this attribute may receive the following values:

    1. - the numbering will be performed by conventional Arabic numbers (the same option will be used by default, if there is no "Type" attribute);
       1. - capital letters as numbering;
          1. - lower case;
             1. - Capital Roman figures;
                1. - lower case roman numbers;

                   An example of a numbered list with different types of numbering for each item:

                   

                   1. with numbering by big Roman numbers
                   2. Numbering with small Latin letters
                   3. Small Roman Numbering

                   When creating numbered lists, it also has the ability to start the numbering from a unit, but from the number specified in the attribute attribute. For example:

                   1. The first element whose number is set in the OL tag attribute Start \u003d "23"
                   2. The next item, with a number per unit large
                   3. Another one more

                   For OL, you can also start a new numbering from any value, starting from any item, speaking in the Value attribute at the opening LI item with the desired number. For example:

                   1. First point with number one
                   2. This element will receive the number specified in the Value \u003d "32" attribute
                   3. Point with a large number

                   Registration of the appearance of lists in CSS (Style Tables)

                   But, as a rule, now the appearance of the markers is not given via the Type attribute, but for which the corresponding properties are prescribed.

                   Here I will simply give an example of various markers for non-numbered lists, the appearance of which is set through a separate file with cascading style tables.

                   • First point
                   • Second
                   • Last

                   But about we talk in subsequent articles. It is in this way that the appearance of markers for UL on this blog is set. Pictures are used as markers: for ordinary items of non-numbered list -, for nested items of non-measured -.

                   Special and subfed lists in HTML code

                   The third and the last view is called "Definition Lists" and they are set using three tags - DL, DT and DD. DL reports the browser, which will follow the list of definitions.

                   Usually this kind is used (well, or it was assumed that it would be used) to write dictionary articles consisting of terms (prisoners in DT tags) and their descriptions (prisoners in DD tags).

                   First term

                   Description

                   The second term

                   His description

                   

                   If you look at the example above, remove that the DD element (term description) is shifted (by 40 pixels) relative to the DT element (the term itself).

                   In general, DL, DT and DD are block tags, and, inside the DT element, you can only insert content with line tags (it turns out that inside the DT it is impossible to use block elements of titles and paragraphs). And within DD tags, you can insert any elements and lowercase and blocks.

                   Nested list HTML is created by analogy with simple, but inside the main list, the part of the items is to once again in the opening and closing UL or OL tag.

                   Please note that a closing Li of that item in which the attached item will be created is made only after the entire code of the attached list (it is very important for its proper display on the Web page). The attached list may look something like this:

                   

                   1. The first point of the main numbered
                   2. Second point
                      • The first element of the nested marked
                      • Second
                      • The third and last point of the marked
                   3. The third element is numbered

                   Good luck to you! To ambiguous meetings on the blog pages Website

                   You may be interested

                   How to insert in HTML link and picture (photo) - IMG and A tags Select, Option, Textarea, Label, Fieldset, Legend - HTML Tags Forms of drop-down lists and text field
                   HTML forms for the site - Tags Form, Input and Select, Option, Textarea, Label and others to create webform items
                   As colors are set in HTML and CSS code, the selection of RGB shades in the tables, the issuance of Yandex and other programs
                   Embed and Object - HTML tags to display media content (video, flash, audio) on web pages
                   Tags and attributes of H1-H6 headers, HR horizontal line, briefing RR and paragraph P according to HTML 4.01
                   Tables in HTML - Tags Table, TR and TD, as well as COLSPAN, CellPadding, CellSpacing and Rowspan to create them
                   What is the HTML Hypertext Markup language and how to see the list of all tags in the W3C Validator
                   Font Tags (Face, Size and Color), Blockquote and Pre - Outdated text formatting in pure HTML (without using CSS)
                   IFrame and Frame - what it is and how best to use frames in html
                   IMG - HTML tag for inserting pictures (SRC), alignment and streamlining it with text (align), as well as background tasks (background)

                   HTML Tags

                   Meaning and application

                   Numerized (ordered) List is designed for items that follow in a definite order. Numbered list begins with tag

                   (abbreviated from English ordered List. - Ordered list). Each element of the list begins with a tag
                   1. (List element).

                      Support browsers

                      Attribute			Opera.		Iexplorer.	Edge.
                      start, Type	Yes	Yes	Yes	Yes	Yes	Yes
                      reversed.	Yes	Yes	Yes	Yes	Not	Not

                      Attributes

                      Attribute	Value	Description
                      compact.	compact.	Not supported in HTML5. Indicates that the list should be less than the usual size (Line-Height: 80%). Use CSS instead of this attribute.
                      	reversed.	Indicates that the order in a numbered (ordered) list should follow descending. The attribute is not supported by Internet Explorer and EDGE browsers.
                      start.	number	Specifies the initial value of the numbered (ordered) list. Values \u200b\u200bshould be integer, it is allowed to use negative values. When using with letters (type \u003d "a" and type \u003d "a"), the number specified in the attribute value is the serial number of the letter in the alphabet. For example, start \u003d "4" will fit the letter "D" And the list will begin with it. When using the START \u003d "27" value, the counter is reset, while the list becomes two-digit ("27" \u003d "AA", "28" \u003d "AB", "29" \u003d "AC" ...).
                      type	1 (default) A (big) a (lower case) I (Roman Large) i (Roman small)	Determines the type of marker, which is used in the construction of a numbered (ordered) list.

                      Example of use

                      1. First point Second point
                      2. Third point

                      Look on page it will be, respectively, so:

                      1. First point.
                      2. The second item.
                      3. Third point.

                      If you want the list to start from a specific number (not from 1), you must specify the Start attribute for the tag

                      .

                      For example:

                      Another interesting attribute is type, which will allow you to set an alphabetic numbering ("A" - large, "a" - line), or the numbering from Roman numbers ("I" - in the upper case, "I" - in the lower register).

                      Consider an example in which all possible Type attribute values \u200b\u200bare presented (different from the default value):

                      >
                      1. First point Second point
                      2. Third point
                      >
                      1. First point Second point
                      2. Third point
                      >
                      1. First point Second point
                      2. Third point
                      >
                      1. First point Second point
                      2. Third point

                      I draw your attention that it is allowed to generate numbered (ordered) lists invested in other numbered lists (inside the list item

                      3. ):
                         1. First point
                            1. First point Second point
                            2. Third point
                            Second point
                            3. Third point

                            Look on page it will be, respectively, so.