Adding a line break means moving elements you are typing or have typed to a new line. Whether you’re writing a thesis or an essay, a line break is an essential part of every piece of long-form writing.
You can add line breaks in code editors and word processors by pressing the “Enter” key; however, in HTML, the procedure is different.
There are a few easy ways to add a line break in HTML; let’s look at them below:
Add Line Breaks Using The <br> Tag
In HTML, the most straightforward way to add a line break is via the <br> or line break tag. This tag inserts a single line break; this is most useful when writing poems or addresses.
The <br> is an empty tag meaning there is no need for a closing tag; all you need is the opening <br> tag. Also, you can choose to use the <br> outside of text elements; you can use it to add line breaks between any two elements that directly follow each other.
Here’s an example of how to use the <br> tag:
<!DOCTYPE html>
<html>
<body>
<p>You can cause<br> line breaks<br> in a piece of text,<br> using the br<br> or line break element.</p>
</body>
</html>
Here’s an example of how to use the <br> tag to add a line break between two pictures:
<!DOCTYPE html>
<html>
<body>
<img src="http://placekitten.com/g/200/200" alt="random cat picture">
<br>
<img src="http://placekitten.com/g/200/201" alt="random cat picture">
</body>
</html>
The <br> tag adds a single line break; however, you can add further line breaks by adding more of the tag in the position you want to break further. Here’s an example:
<img src="http://placekitten.com/g/200/200" alt="random cat picture">
<br><br><br>
<img src="http://placekitten.com/g/200/201" alt="random cat picture">
While using multiple break elements is possible, it is not advisable because it might make your website break on different screen sizes, especially if you’re working on a responsive site. The best way to adjust the vertical space as you want is to use CSS’s margin and padding properties.
Add Line Breaks Using Block Elements
In HTML, there are two major display styles for every element– inline and block display. When used, inline elements can stay side-by-side with other elements and won’t add a line break; an example is the <a> or link element. For instance:
<a href="https://clouddevelop.org">clouddevelop</a> <a href="https://clouddevelop.org">clouddevelop</a>
On the other hand, block elements cannot have another element on the same line as them; they automatically break into the next line. An example of a block element is the <p> or paragraph element. For instance:
<p>This is one paragraph</p>
<p> There's an automatic line break to this next paragraph</p>
If you want to have an automatic line break between text elements, you can open a new paragraph tag without adding a <br> tag. There is also an automatic line break when using heading elements (h1 – h6).
Another thing to note about the line breaks between paragraph and heading elements is that the space is usually equal to two <br> breaks. The reason is that <br> line breaks might be used within a paragraph to continue a train of thought while a heading or paragraph most times starts a new train of thought.
<a href="https://clouddevelop.org">clouddevelop</a>
<br><br>
<a href="https://clouddevelop.org">clouddevelop</a>
<p>This is one paragraph</p>
<p> There's an automatic line break to this next paragraph</p>
Add Line Breaks By Changing Inline To Block Elements
If you want to make an inline element add an automatic line break, you can change the display property using CSS. The default property of inline elements is “inline” you can make the element add an automatic line break by changing it to “block”.
Below is an example of how to do it:
<!DOCTYPE html>
<html>
<head>
<style>
a {display: block;}
</style>
</head>
<body>
<a href="https://clouddevelop.org">clouddevelop</a><a href="https://clouddevelop.org">clouddevelop</a>
</body>
</html>
You can also choose to change a certain portion of a paragraph into a block element by covering it in a <span> tag, adding a class, and changing that class display to block in CSS.
<!DOCTYPE html>
<html>
<head>
<style>
.to-block {display: block;}
</style>
</head>
<body>
<p>This is a paragraph <span class="to-block">that is broken here.</span>This is still a continuation of that paragraph.</p>
</body>
</html>
Conclusion
For simplicity, it is best to use the <br> tag option if you want a simple line break within a paragraph. If you’re trying to achieve a more custom form of spacing between elements, you should ALWAYS use CSS for that.
Finally, changing portions of a paragraph into a block element is not good practice, and you might have a hard time understanding what’s happening in that portion when you come back later.
Read More: How To Make HTML Italics