Home 〉 HTML Tutorials 〉 HTML '<br>' Tag - Line Break Tag with Syntax, and Examples
HTML '<br>' Tag - Line Break Tag with Syntax, and Examples !
HTML '<br>' Tag - Line Break Tag with Syntax, and Examples !
Do you know how to create a line break in HTML without starting a new paragraph?
The HTML '<br>' tag is the best solution. This post explained its syntax, how to apply basic spacing using CSS, and covered best SEO practices for writing clean HTML. We also looked at real examples and related topics to enhance understanding. You learned that the '<br>' tag is an empty tag, with limited styling capabilities, yet it plays a key role in formatting text. The detailed blog post on HTML line break '<br>' tag is as follows.
Introduction
When you want to create a line break in HTML — similar to pressing "Enter" in a text editor — the '<br>' tag is what you use. It's one of the simplest yet most useful HTML elements for controlling text formatting without using CSS or extra HTML structure. It helps you break text into a new line without starting a new paragraph.
Syntax:
Syntax ✍
<br>
The '<br>' tag is an empty tag, which means it has no closing tag. When used in a block of text, it forces the text to continue on a new line.
Attributes of '<br>' Tag
The '<br>' tag does not have any specific or standard attributes in HTML5. However, for accessibility and extended formatting, you may sometimes see the use of:
Optional Attribute (not standard in HTML5):
'class' and 'id' (for CSS targeting):
These can be used to apply margins or visibility changes if needed using CSS.
Example 📄
<br class="spacer">
CSS Example:
Code : 1 📝 
<!DOCTYPE html>
<html>
<head>
<style>
.spacer {
margin-bottom: 20px;
}
</style>
</head>
<body>
<br class="spacer">
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
- * class="spacer" is used to apply a bottom margin using CSS.
- * Although '<br>' does not display any content, using class/id allows you to control spacing.
Can You Style the '<br>' Tag?
By default, styling a '<br>' tag directly doesn't have much effect because it has no visible output. However, some CSS properties like 'margin', 'display', or 'visibility' can apply if you target the tag with a class or ID.
Example 📄
<br class="custom-break">
Code : 2 📝
<!DOCTYPE html>
<html>
<head>
<style>
.custom-break {
margin-bottom: 15px;
display: block;
}
</style>
</head>
<body>
<br class="custom-break">
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
This allows for extra spacing between lines, often used for better formatting of text content or user interface design.
Example Usage of '<br>' Tag
Code : 3 📝
<!DOCTYPE html>
<html>
<body>
<p>
Hello there!<br>
Welcome to our HTML tutorials.<br>
Let's learn step by step.
</p>
</body>
</html>
output 📌
Hello there!
Welcome to our HTML tutorials.
Let's learn step by step.
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
The '<br>' tag breaks each sentence into a new line without using separate paragraph tags.
Conclusion
The '<br>' tag is a simple yet powerful tool in HTML for breaking lines of text. It is especially useful when formatting poems, addresses, or any content where you want to control where a new line begins. Although it has limited styling capability, you can still apply CSS for spacing using 'class' or 'id'.
Related Topics:
- HTML Block, Inline, and Empty Elements Explained with Examples
- HTML Heading Tag Tutorial with Examples | H1 to H6 Tags Explained
- HTML Paragraph Tag Tutorial with Examples | HTML '<p>' Tag Explained
- HTML Text Formatting Tags Explained with Examples - Complete Guide
- CSS Margin Explained with Examples - Master Spacing in Web Design
- CSS Padding Explained with Examples | CSS Box Model Guide
Frequently Asked Questions (FAQs)
Can the '<br>' tag be self-closing?
Yes. In XHTML or when writing clean HTML, you may see '<br />'. In HTML5, '<br>' is sufficient.
Can I style the '<br>' tag using CSS?
Yes, but styling is limited. You can apply properties like 'margin' and 'display' using a class or ID.
What is the purpose of the '<br>' tag?
To break a line of text and start from a new line within the same paragraph or block element.
Should I use '<br>' to create space?
Use '<br>' for line breaks only. For visual spacing, use 'margin' or 'padding' in CSS.
Is '<br>' a block-level or inline element?
It behaves like an inline element, but it forces a block-like break in layout.