HTML br Tag: A Step-by-Step Guide
What is the br Tag?
The HTML <br>
tag is used to insert a line break within text. It is an empty element, meaning it doesn’t have a closing tag, and is primarily used to improve the formatting of content within paragraphs, lists, or other textual elements.
Syntax
<br>
Key Features of the br Tag
- Creates a single line break in text.
- Does not require a closing tag.
- Commonly used for poems, addresses, or formatting content where line breaks are necessary.
Usage Examples
1. Basic Example
<p>
This is the first line.<br>
This is the second line after a line break.
</p>
Rendered Output:
This is the first line.
This is the second line after a line break.
2. Formatting an Address
<address>
John Doe<br>
123 Main Street<br>
Springfield, USA
</address>
Rendered Output:
John Doe
123 Main Street
Springfield, USA
3. Creating Line Breaks in Poetry
<p>
Roses are red,<br>
Violets are blue,<br>
HTML is awesome,<br>
And so are you!
</p>
Rendered Output:
Roses are red,
Violets are blue,
HTML is awesome,
And so are you!
When to Use br
- To create line breaks in content where semantic grouping (like paragraphs) is not appropriate.
- For formatting addresses, poems, or song lyrics.
- Avoid using
<br>
excessively to control spacing. Use CSS for layout and spacing instead.
Example of Full Page Usage
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Learn how to use the HTML <br> tag to add line breaks in content effectively.">
<title>HTML `<br>` Tag Example</title>
</head>
<body>
<h1>Using the HTML `<br>` Tag</h1>
<p>
Welcome to the world of HTML!<br>
This guide will teach you how to use the `<br>` tag effectively.
</p>
<h2>Contact Information</h2>
<address>
Jane Doe<br>
456 Elm Street<br>
Metropolis, USA
</address>
<h2>A Poem</h2>
<p>
Code is poetry,<br>
Lines that shine,<br>
Elegant solutions,<br>
One at a time.
</p>
</body>
</html>
Common Mistakes to Avoid
Misusing <br>
for Layout:
Don’t use <br>
to create vertical space between sections; use CSS instead.
Poor Practice:
<p>Welcome</p>
<br><br>
<p>to HTML</p>
Better Practice:
p {
margin-bottom: 20px;
}
Not Using Semantic Tags:
Avoid using <br>
where a new paragraph or section makes more sense.
Best Practices
Use CSS for Spacing:
Rely on CSS for spacing instead of multiple <br>
tags. For example:
p {
margin-bottom: 20px;
}
Avoid Overuse:
Avoid Overuse:
Don’t use <br>
as a replacement for proper structure (e.g., <p>
or <div>
tags). For example:
- Poor Practice:
<p>This is a line.<br><br>This is another line.</p>
Better Practice:
<p>This is a line.</p>
<p>This is another line.</p>
Use with Semantic Elements:
Use with Semantic Elements:
Use<br>
inside elements like<p>
or<address>
where logical grouping is still preserved.
HTML BR
Quiz-summary
0 of 4 questions completed
Questions:
- 1
- 2
- 3
- 4
Information
Quiz: Test Your Knowledge
You have already completed the quiz before. Hence you can not start it again.
Quiz is loading...
You must sign in or sign up to start the quiz.
You have to finish following quiz, to start this quiz:
Results
0 of 4 questions answered correctly
Your time:
Time has elapsed
You have reached 0 of 0 points, (0)
Categories
- Not categorized 0%
- 1
- 2
- 3
- 4
- Answered
- Review
- Question 1 of 4
1. Question
What is the purpose of the br tag?
CorrectIncorrect - Question 2 of 4
2. Question
Is the br tag a self-closing tag?
CorrectIncorrect - Question 3 of 4
3. Question
Should br be used for creating spacing between sections?
CorrectIncorrect - Question 4 of 4
4. Question
What is a better alternative to br for controlling spacing?
CorrectIncorrect