Wajdi Alkayal
HTML Line Break – How to Break a Line with the HTML <br> Tag
BY:WMK-IT
When you're writing HTML, you often need to insert line breaks. A line break is essential in addresses, poems, or when text exceeds the available browser width. If you don't insert your own line breaks, then the text gets formatted in an odd way.
In this tutorial, I'm going to show you how to insert line breaks in your HTML code with some "with and without" examples, so you can start using it correctly and format your text better.
Basic HTML Line Break Syntax
You can insert line breaks in HTML with the <br> tag, which is equivalent to a carriage return on a keyboard.
Be aware that HTML will ignore any line break from a keyboard’s return key.
<br />
If you are wondering why there’s a forward slash in the <br> tag above, the slash was important when HTML4 was still widely used. With HTML5, you don’t need to put a slash in it anymore. But both will do the same thing.
If you are using a code formatter like prettier, it'll always insert the slash when you save or paste even if you don’t put it in there.
How to Insert Line Breaks in Addresses
A line break is important when you're writing an address on a letter, for example, in order to format it properly.
Here's an example of an address without line breaks
An address without line breaks (<br> tags) looks like this:
<p>
The Republican palace, Baabda,Beirut, Lebanon.
</p>
I have added some CSS code to center everything with Flexbox and make the text a bit bigger:
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
font-size: 3rem;
max-width: 1000px;
margin: 0 auto;
}
And this is how we can add line breaks to properly format our address:
<p> The Republican palace <br />
Baabda <br /> Beirut <br /> Lebanon </p>How to Add Line Breaks to PoemsPoems are conventionally written in short breaking sentences in order to create visual hierarchies and format them nicely.
So, if you want to write a poem in your HTML code, the
<br>tag makes the formatting process easier for you.A poem without line breaks
<p> I dabbled around a lot when I decided to learn to code I went from A to Z with resources When I decided to make my own things I discovered I've been in the old all while So I remained a novice in coding But then I found wmk-tech I got my hands on the platform I went from novice to ninja in coding And now I'm a camper for life </p>You can see the poem has no visual hierarchy, it is not formatted the right way, and so it is unreadable as a poem.
A poem with line breaks
<p> I dabbled around a lot when I decided to learn to code <br /> I went from A to Z with resources <br /> When I decided to make my own things <br /> I discovered I've been in the old all while <br /> So I remained a novice in coding <br /> But then I found wmk-tech <br /> I got my hands on the platform <br /> I went from novice to ninja in coding <br /> And now I'm a camper for life <br /> </p>I also changed the font size a bit in the CSS:
body { display: flex; align-items: center; justify-content: center; height: 100vh; font-size: 2.5rem; max-width: 1000px; margin: 0 auto; }You can see that the poem is now more readable and formatted the right way.
Some valuable advice: Do not use the
<br>tag to force a space between block-level elements (p,h1,h2,h3,div, etc). Instead, use the CSS margin property.You might be wondering – since the
<br>tag is an element, is it possible to style it?Well, it is possible. But there’s no real practical need to style it since all it does is create a couple of white spaces.
Conclusion
I hope this tutorial has given you the background knowledge you need to use the
<br>tag so you can make your HTML text look better.Thank you for reading, and keep coding.
WMK-IT
Join Our Telegram Channel for More Insights
