Table of Contents
HTML has a lot of useful tags that give you control over how your content is displayed.
One of these tags is the line break tag <br>
, which is used to create a line break in your content. This tag is useful when you want to create a line break in your content without using another tag like a new paragraph tag.
In this post, we will look at how to use the line break tag in HTML.
How to use the line break tag in HTML
As mentioned before, when you want to create a line break in your content without using any other block tags, you can use the line break tag <br>
.
This tag is rendered inline and forces the following content to be on a new line.
Let's first look at a line of text without a line break:
HTML<p>This is a line of text without a line break.</p>
That looks like this:
- HTML
<p>This is a line of text without a line break.</p>
Now let's add a line break <br>
tag inside this paragraph tag:
HTML<p>This is a line of text with a line break.<br>This is the second line of text.</p>
This renders like this:
- HTML
<p>This is a line of text with a line break.<br>This is the second line of text.</p>
Notice how even though we didn't define a new paragraph tag, the second line of text is on a new line.
Keep in mind that you should not use the line break tag simply to add spacing between your content. Instead, you should use CSS, specifically margin, to add spacing between your content.
Another thing to keep in mind is that the tag is self-closing, so you don't need to close it with a closing tag.
Conclusion
In this post, we looked at how to use the line break tag in HTML.
Simply add the line break tag <br>
in between text to force the rest of the text to live on a new line.
- Getting Started with Solid
- Getting Started with Svelte
- Getting Started with Express
- How to Serve Static Files with Nginx and Docker
- How to deploy a PHP app using Docker
- Getting Started with Deno
- Getting Started with Sass
- Learn how to use v-model with a custom Vue component
- Getting User Location using JavaScript's Geolocation API
- Learn how to build a Slack Bot using Node.js
- Getting Started with Vuex: Managing State in Vue
- Setting Up a Local Web Server using Node.js