Using the Line Breaking Element

Posted on Updated on HTML by Adam Laki

Using the <br> element, we can create line breaks in our texts.

For me, using the line break element is a little bit weird. When I learned HTML and CSS, the rule was to use <p> tags to break the texts. Therefore, I avoided using this element.

If you write HTML code for a long time, you saw a lot of misuse of the elements. In the case of <br>, we can see when there are multiple items are present next to each other, creating a visual spacer between the elements vertically.

Today this element is rarely used because we don’t need it much. First of all, we can’t use it for visual behavior (spacing) because, for that, there is CSS. If we want format text rightly, usually, we use <p> tags to create paragraphs (with the proper spacing).

Use the <br> Element Correctly

There are scenarios when we want to break our block of text at a specific point. A good example is an address; here we don’t want to use a new wrapper element (<p>, <span>) to control it with CSS, we want a line break.

If you need just a line break, then use the <br> element if you need more – like to control the margin – use CSS (and other, proper HTML elements).

The breaking behavior can be unusual because of the responsive design. Now we have smaller viewports, and while our broken text looks good on a larger screen, it can be fragmented on smaller ones.

<address>
    Pine<br>
    Budapest<br>
    Hungary
</address>

It is an element that doesn’t require a closing tag. Keep in mind that faking <p> tags with <br> (to create margins) elements is also bad for accessibility.

Need a web developer? Maybe we can help, get in touch!