Dividing line tag. Horizontal lines. Vertical lines in HTML

Basically, horizontal lines are used to decorate the HTML pages of the site, giving them a more attractive look. But they can also visually delimit the information of neighboring sections, adding convenience to readers when studying it. In general, draw horizontal lines where you need to, that's all.

How do I draw a horizontal line?

There is a special tag for drawing horizontal lines in HTML

... But myself

---

cannot have content, since it simply does not have an end tag, that is, it is empty.

An example of drawing horizontal lines in HTML

---

Paragraph.

Paragraph.

---

Paragraph.

Result in the browser

Paragraph.

Paragraph.

Paragraph.

As you can see, the lines are very thin, nondescript and drawn to the full available width, so now we will learn how to change them to make them look more attractive.

How do I change the color, thickness and width of horizontal lines?

In old HTML versions at the tag

---

there were special attributes with which it was possible to change the color, thickness and width of horizontal lines. These are color, size and width, respectively. But in newer versions they have been ditched in favor of Cascading Style Sheets (CSS), so, you guessed it, we'll be using our favorite style attribute again. The general syntax is:

---

style = "background: color">- line color (or rather its background).

---

style = "height: size">- line thickness.

---

style = "width: size">- line width.

---

style = "background: color; height: size; width: size"> - but you can specify all the parameters at once, just do not forget about the semicolon (;).

A color can be specified by its name in English or by the HEX-code of the color, preceded by a hash (#). Well, you already know about this from the lesson on changing the color of the text and background.

But we will talk about resizing in more detail. Do you remember from tutorial on changing fonts, there are about ten units in CSS, but line width can be specified only in pixels (px) and percentages (%), and thickness generally only in pixels. If you supply other units, then this will not be an error, but browsers will simply ignore them.

If you specify dimensions in pixels, then the thickness and width of the line will depend on the resolution of the monitor on which your site is viewed (the higher the screen resolution, the thinner and narrower the line).

As I said, only the line width can be specified as a percentage. Percentage sizes always depend on and are calculated based on the size of the parent container element, inside which the tag is located

---

... In this case, the size of the parent is taken as 100%. For example, if we place the tag

---

style = "width: 50%"> inside element

, then no matter how we resize the browser window or the monitor resolution - the line width will always be half the width of the block

.

An example of changing the color, thickness and width of horizontal lines.

---

---

---

---

Result in the browser

Changing the position of horizontal lines

When you change the width of a horizontal line, it becomes clearly visible that browsers always place it in the center. If you want to change its position, then just use inside

---

align attribute with the following values:

• center- the line is aligned to the center (default value).
• left- pressed against the left edge.
• right- pressed against the right edge.

An example of aligning horizontal lines.

---

---

---

Result in the browser

How do I remove the border around the line?

Take a look at the very first example of this tutorial. What color do you think these lines have? And here it is wrong. They are transparent, like any page elements that have not been specified. background color! Don't believe me? Then take a look at an example where we changed the color of the lines. For the very first one, we did not set the color, but only increased its size and isn't this line transparent? So that!

I’ll explain now. By default, browsers draw frames around lines, which create a three-dimensional effect. So, when we do not increase the thickness of the horizontal lines, browsers show us only these frames, since the thickness of the line itself is 0px.

To remove the border around the line, which often only spoils appearance, we will reapply the style attribute. And it is written like this:

---

Homework.

1. Create article, section and subsection headings. Center them all.
2. Set the entire page to Arial and Courier for headers.
3. Let the font size for the entire page be 85% of the browser's default size. And titles have 145%, 125% and 110%, respectively, of the font size on the page.
4. Write a paragraph under the first heading, a long quote under the second, and a poem under the third. And let the poem be centered on the page.
5. Place three words in bold in your quote.
6. Under the heading of the article, draw a three-pixel red horizontal line across the full width of the page.
7. At the top and bottom of the poem, draw one pixel black lines. Let the width of the top line be approximately equal to the width of the verse, and the bottom line half as much.
8. Remove unnecessary frames from the lines.

Horizontal lines formed by unpaired (no closing tag needed) tag

---

and can be pretty unique design elements. Designing the text with the addition of horizontal HTML lines will give the page a certain logic of presentation of the text, and also make it easier for the reader to highlight the blocks of information that need to be studied sequentially. Tag

---

can form horizontal lines of different colors, thicknesses and lengths. And it is quite simple to do it, which is shown in the examples below.

By the way, you can also use the block style properties

and

to form lines
at a certain location. True, this option may not always be convenient, for example, coloring sometimes does not always justify itself, but in many options it is possible to solve problems in this way. For example, inside a line formed tag

---

do not insert the text. And inside the blocks it is possible and is constantly being practiced. So you need to choose your option depending on the design requirements.

Vertical lines in HTML.

A vertical lines formed in virtually the same blocks

and

.
Only one inconvenience - not in all browsers the tag

---

works the same, but here you need to try
and tweak the page, or use updated browsers.

Formation of horizontal lines:

Tag

---

inserts a horizontal line on the page and has the following attributes:

Tag syntax

---

:

Examples of horizontal lines in HTML:

Examples of vertical lines in HTML:

---

Here is an example of a vertical red line on the left.

Here is an example of a vertical red line on the right.

Here is an example of a horizontal red line at the top.

Here is an example of a horizontal red line below.

Here is an example of horizontal and vertical lines.

The syntax for examples of vertical and horizontal lines in HTML is:

notice the style attribute
border- left (-right): 4px solid # FF0000;:

A circle formed with a tag

---

Here is an example of a vertical red line on the left.

Here is an example of a vertical red line on the right.

Here is an example of a horizontal red line below.

Here is an example of horizontal and vertical lines.

And if we analyze these examples, then we can make a rather simple conclusion that vertical lines are best formed using, and intermediate line options can be done with tag

---

But it all depends on imagination and requests. So choose and shape.

From the author: I greet you. The need to present several blocks on a web page in one line is a very frequent task that arises for layout designers. It occurs during the layout of almost every template, so all of us in any case need to know and apply the basic methods of changing the behavior of blocks.

Before we look at the most common tricks, I would like to recall a little theory. Web page elements are divided into block and inline. And the difference between them is very simple - lowercase ones can be located on one line, but block ones cannot. Of course, the differences do not end there, but this is the main difference. Already, blocks can have margins at the top and bottom (lowercase ones do not), and more properties can be applied to them.

The main ways to line up blocks in a row in css

We will not complicate anything, there are 3 main ways:

Convert blocks to inline elements. At the same time, block properties are lost, so this option is almost never used.

Make the desired elements block-inline. This is a special type in which the element retains its properties, but at the same time allows other blocks to be positioned side by side.

Float elements using the float property.

Let us dwell on these options. Flexbox, tabular display and other points will not be considered. So let's say we have 3 subheadings.

Heading 1

Heading 2

Heading 3

Naturally, all css properties need to be written in separate file(style.css), which needs to be connected to the html document. In this file I will write a minimal style so that our subheadings can be easily seen.

h3 (background: #EEDDCD;)

h3 ( background: #EEDDCD;

Here they are on the page:

There they behave like blocks. Each one is located on its own line, there are indents between them. If you want, you can also set any internal indents and in general do anything.

Convert to lines and add padding right away. To do this, add the following properties to the h3 selector:

display: inline; padding: 30px;

There are 2 main problems with this technique. The first is the minimum padding. It is formed due to the fact that there is one space between the blocks in the code, which forms this indentation. If this problem needs a solution, there are 2 main options:

In html, arrange the code of the necessary blocks in one line without spaces

Set a negative margin to the right of -4 pixels. That is how much one space takes.

The second problem is that display problems can occur with different heights of elements. All in all, the best option- floating blocks. Instead of display: inline-block, we write this:

Blocks in line using a framework

I must say right away that if you are going to use any normal css framework (for example, Bootstrap), then it is still much easier there. All the css-code responsible for the arrangement of the elements has already been written and you just have to set the correct classes. All you need to do is learn the grid system and you can create responsive multi-column templates without too much difficulty. At least it will be much easier than writing css from scratch.

Another challenge of writing code from scratch comes up just when you need responsive design. Of course, you can implement it yourself by owning media queries, but it will be much more difficult if you have a complex template.

For example, when you have large screens there should be 4 columns, on the middle - 3, and on mobile phones- 2. With the help of such frameworks as Bootstrap, or rather with the help of its grid, to implement such a thing is a matter of literally a few minutes.

Smoothly transferring the topic to the Bootstrap framework, I will once again note that if you are faced with the task of creating a complex responsive template, then it is simply a sin not to use the grid. You don't even need to connect for this. full version framework - you can customize it and stop there only what you really need.

You can learn how to work with the framework with. The theory is also explained there, but the most important thing is that there is practice. You will build 3 responsive templates and get a great experience that will allow you to make up websites to order or for yourself. And if you want to take a look at the benefits and features of the framework for free, I suggest you check out our series of articles on Bootstrap and simple layout. I wish you success in layout and site building in general.

Task

Make a horizontal line on the page.

Solution

Horizontal lines are good for separating one block of text from another. Small text with horizontal lines at the top and bottom draws more attention to the reader than regular text.

Using the tag

---

you can draw a horizontal line, the appearance of which depends on the attributes used, as well as the browser. The tag refers to block elements, so the line always starts on a new line, and after that all elements are displayed on next line... Thanks to the many attributes of the tag

---

the line created through this tag is easy to manipulate. Combined with the power of styles, adding a line to your document becomes a breeze.

Default line

---

displayed in gray and with a volume effect. This type of line does not always suit the design of the site, so the desire of developers to change the color and other parameters of the line through styles is understandable. However, browsers are ambiguous about this issue, which is why you will have to use several style properties at once. In particular, older versions Internet browser Explorer uses the color property for the line color, while other browsers use the background-color property. But that's not all, in this case, be sure to specify a line thickness (height property) other than zero and remove the border around the line by setting the border property to none. Putting all the properties together for the hr selector, we get a universal solution for popular browsers (example 1).

Example 1. Horizontal line

HTML5 CSS 2.1 IE Cr Op Sa Fx

---

Text string

---

Result this example shown in fig. 1.

Rice. 1. Colored horizontal line

Greetings to all readers. Periodically, the wizards are faced with the problem of how to make a horizontal or vertical line using HTML or with using CSS... This is what I will tell you today.

Lines in CSS

There are several ways to draw lines. One such way is using CSS. More precisely, with the help of Border. Let's take an example.

And here's what the result will be.

Horizontal and vertical line using css.

Lines in CSS can be drawn using the Border statement. If you just need a rectangle with a fixed border width, you can simply use this operator and set a value to it. For example border: 5px solid # 000000; will mean that the block borders are 5 pixels wide in black.

However, if you need to set not all boundaries, but only some, then you need to write down exactly which boundaries are needed, and what value each of them will have. These are the operators:

• border-top - sets the value of the top border
• border-bottom - sets the value of the bottom border
• border-left - Sets the value of the left border
• border-right - Sets the value of the right border.

Vertical and horizontal line in HTML

You can also create lines in HTML itself. To do this, you can use the hr tag.

In this case, a horizontal line will be drawn, one pixel high and full width.

But this tag, you can set some values.

• Width- sets the value of the line width.
• Color- sets the color of the line.
• Align- sets the alignment to the left, center, right
• Size- sets the value of the line width in pixels.

With the hr tag, you can also define a vertical line. But in this case, you will have to resort to styles again.

In this case, a vertical line will be drawn one hundred pixels high, one pixel thick, and indented five pixels.

Conclusion.

Well, now you know how you can set a vertical and horizontal line. Lines can be set as on regular sites, with using HTML, and set on a site that uses a CMS, for example, WordPress, but in this case, you will need to switch to HTML mode.

Well, if you have any more questions, ask them in the comments.