One of the things we have to know about line breaks in HTML is that when people start creating HTML web pages they usually make the mistake of believing that the carriage return on the editor will cause the same effect when the page is displayed. But, this is not true and we must rely on the language HTML and its elements to achieve this effect.
If what we do is code our page as follows, so that we only insert simple text carriage breaks:
<!DOCTYPE html> <html lang="es"> <head> <title>Line breaks</title> </head> <body> First line Second line </body> </html>
We can see that the result is not what we really expected. That is, we are not going to have two lines between the first and second lines.
The result when we load it in the browser will be the following:
First line Second line
That is, there is no break between the first and second lines. Even though we have inserted the carriage returns.
In order to achieve the desired effect we must use the element
br
. This is what is known as the “break” element. That is, each element
br
that we use will generate a line break.
That is why the previous code would look like this:
<!DOCTYPE html> <html lang="es"> <head> <title>Line breaks</title> </head> <body> First line <br><br> Second line </body> </html>
We see that we can put the labels in a row. They do not need to be on a new line. In this case we will obtain the desired effect.
First line Second line
It must be taken into account that the element
br
helps us create line breaks and separate text phrases. But we should never use the
br
to create separations between elements. In order to create separations between elements we must use the CSS margin properties.
In this way we will have already learned in this article how to use the
br
to be able to insert line breaks in HTML. We hope it has been useful to you.