How to add horizontal line in html. Horizontal and vertical lines in HTML

To emphasize some especially important elements of the site, it would not hurt to use all sorts of CSS styles and properties provided for this. Of course, you don't have to bother with the text and highlight it, for example, in bold or italics, change the background or make a frame around the text. But not always one of the presented methods is suitable. Let's say you have a text that needs to be separated due to the specifics of its semantic load. This is where HTML and CSS properties come in.

How to make a line in the text using CSS

To implement our plan, we need to refer to style.css file by writing the corresponding property in it border... This will create a line above, below, or on a specific side of the text. In turn, there are several properties that are responsible for displaying the line, namely:

- border-top- a horizontal line above the text;

- border-right- a vertical line located to the right of the text;

- border-bottom- a horizontal line below the text;

- border-left- the vertical line to the left.

How to make a line in html

Using CSS properties, you can write all the necessary values ​​by editing the HTML code. To do this, you need to go to the administrative part of the site. Select one of the published materials, switch the text editor to HTML code editing mode and add CSS properties. A sample can be seen below.



How do I make a dotted or straight line?



By prescribing these properties, you will be able to emphasize the importance of the material, paragraph or heading presented?


Brief explanation of commands

- width- line length;

- solid- solid line;

- dotted- dotted line.

For a deeper acquaintance with the styles, I recommend reading this one.

It is necessary to understand that in the process of making changes to the site code, the properties that determine the line type, its thickness and color are listed separated by a space.

This method has several advantages:

A wide range of possibilities with which you can make almost any line.

Ease of making all the necessary changes directly to the HTML code. This greatly simplifies the task for inexperienced site builders.

How to make a straight horizontal line using HTML tag

The first thing I would like to draw your attention to is that this tag, despite all the subtleties and principles of html, does not have a closing tag. It can be used anywhere in the html code, between tags and.

Tag attributes

- width- is responsible for the length of the line. Can be specified both in percent and in pixels.

- size- line thickness. Specified in pixels.

- color- defines the color of the line.

- align- attribute responsible for line alignment. In turn, the team refers to it.

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

... Moreover, he is block tag, that is, it creates line breaks before and after itself, so the line is always obtained on a separate line. Accordingly, it can only be specified inside tags that can contain block elements, for example or
... 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

Draw horizontal lines

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 older versions of HTML, 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 of measurement, 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.

Change the color, thickness and width of the 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 centered (default value).
  • left- pressed against the left edge.
  • right- pressed against the right edge.

An example of aligning horizontal lines.

Change the position of the 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 do not have a 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!

Now I will explain. By default, browsers draw borders 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 the 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 on the entire page be 85% of the default browser 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. Highlight 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.

From the author: I greet you. The need to present several blocks on a web page in one line is a very common 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 top and bottom margins (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 must be written in a separate file (style.css), which must be connected to the html document. In this file, I'll 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 you want and in general do whatever you want.

Convert to lines and immediately add padding. 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. In general, floating blocks are the best option. 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 elements has already been written and you will only 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 should have 4 columns on large screens, 3 on medium ones, and 2 on mobile phones. With the help of such frameworks as Bootstrap, or rather with its grid, it takes just a few minutes to implement such a thing.

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. To do this, you don't even need to connect the full version of the framework - you can customize it and stop there only what you really need.

You can learn how to work with the framework with. It also explains the theory, 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 browse our series of articles on Bootstrap and simple layout. I wish you success in layout and site building in general.

When creating an HTML page, layout plays an essential role. Especially when we are talking about various symbols and decorative design: these little things help to make the "language" of your page more accessible and clear, moreover, they significantly change its perception and appearance in general. One of the most important elements for design is a horizontal line, and further we will learn in more detail how to work with it and how to make a horizontal line in html.

What is a horizontal line and what is it for

A horizontal line in html is a page design element that performs a number of functions:

  1. Decorative... Helps to add attractiveness to the page.
  2. Dividing... Promotes effective separation of information of different meanings.
  3. Emphasizing or underlining... Draws the attention of page guests to the necessary and most important information.

It is the horizontal line that is considered the most affordable way to implement a number of functions. It is very simple to create it, but outwardly it looks very profitable. By simple changes to the html-code, you can adjust:

  • length;
  • width;
  • color characteristics;
  • alignment to one or the other edge.

Note that the horizontal line refers to block elements. This means that it occupies a new line on the page, and the text following it will go below.

How to create a horizontal line in HTML

You can set a line using a simple tag - hr in triangle brackets. It is short for "Horisontal Rule" and sets the classic external parameters. It differs from many others in that it does not need an end tag and is able to exist on its own. You can change the external characteristics of an element using additional values ​​in the tag:

  1. Length... If you do not want the length of the line to extend over the entire page, then you can set the desired size in pixels or percent. This is done with the help of an additional word "width" in the tag and a numeric length indicator specified after the "=" sign in quotes.

It looks like this. For example, if we need a length of 100 pixels, we would set a tag like this: hr width = "100 ″

  1. Alignment... Alignment is possible on the left or right edges, and also in the center. This feature is only valid if you have already specified the width parameter, since a full-page line cannot be aligned. To align, set an additional attribute in the "align" tag and add a direction to it: center - for the center, left - for the left and right - for the right alignment.

The finished tag in this case will look like this. For example, if we need to set the center alignment for a horizontal line with a length of 150 pixels, then the finished tag will look like this: hr align = "center" width = "150".

Note that "align", the measure for alignment, is put in position 1, even though the attribute is dependent on the length measure width.

  1. Width... Optionally, you can also specify the width, creating a bold or thin underline. This criterion does not depend on anything and can be used independently without specifying the length or alignment. For it, we use the size attribute in the tag and a numeric value equal to the desired width in pixels. The number is indicated in quotation marks after the size attribute and the "=" symbol.

Thus, if we need to create a line 15 pixels wide, we need to create the following tag: hr size = "15".

  1. Colour... It is also set as an independent indicator. To change it, use the color attribute in combination with the color name in the form of a code or in English. The color is indicated in quotes after the "=" symbol.

Thus, the tag for a standard white line can be written in two ways: hr color = "#FFFFFF" or hr color = "white"

Black can be created using code # 000000.

  1. Put away shadow... If you need an element that does not contain a shadow, then the noshade attribute should be used in the tag. It can be used alone or in combination with other elements. A tag for a standard line using it will look like this: hr noshade

Create a horizontal line using video

And if you want to get information in a more visual format, then refer to the next video, which describes in detail the possibilities of working with a horizontal line.

Having determined the required dimensions of the horizontal line, you can design the pages of the site in such a way that the information is structured and visually competently framed. This helps visitors to more easily perceive the information presented and make your site stand out from others.

Greetings to all readers. From time to time, the wizards are faced with the problem of how to make a horizontal or vertical line using HTML or 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 this is what the result will be.

Horizontal and vertical line using css.

Lines in CSS can be drawn using the Border statement. If you just want 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 define a vertical line as well. 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 both on regular sites 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.

SIMILAR ARTICLES