All About br Tag in HTML

All About br Tag in HTML

4 mins readComment
clickHere
Esha
Esha Gupta
Associate Senior Executive
Updated on Jan 31, 2024 15:56 IST

Have you ever wondered how to create a simple line break in your HTML content? The <br> tag is your solution. It's a self-closing element used to insert line breaks, especially useful in texts like poems or addresses. However, it's not designed for layout control, which is better handled with CSS. Let's understand more!

In HTML (Hypertext Markup Language), tags are the basic building blocks used to create web pages. They are used to define and structure the content of a webpage. In this blog, we will dive deeper into br tag in HTML.

Span Tag in HTML
Span Tag in HTML
Have you ever wondered how web developers style or manipulate specific parts of a webpage's text without affecting the whole document? This is where the tag in HTML comes into...read more

Table of Content

 

What is a br Tag in HTML?

The <br> tag in HTML inserts line breaks in a text. It stands for "Break". This tag is particularly useful when you want to create a new line within a paragraph or other element without starting a new paragraph. The <br> tag is an empty tag, meaning it does not have a closing tag. The <br> tag doesn’t carry any semantic meaning. It’s purely for formatting.

Let's first check out a video on the same.

Source: Net Ninja

Syntax of br Tag in HTML

<br>

The syntax of the <br> tag in HTML is straightforward. It is an empty element.

Note - In HTML5, this is the standard and correct way to use it. However, if you're working with XHTML, the tag needs to be closed.

Usage of HTML br Tag with Examples

Let's see some examples showing the uses of br tag.

Example 1: Separating Lines in a Poem

Problem Statement: Display a short poem with each line on a separate line.


 
<!DOCTYPE html>
<html>
<head>
<title>Poem Example</title>
</head>
<body>
<p>
Roses are red,<br>
Violets are blue,<br>
Sugar is sweet,<br>
And so are you.
</p>
</body>
</html>
Copy code

Output

Roses are red,
Violets are blue,
Sugar is sweet,
And so are you.

Example 2: Creating an Address Block

Problem Statement: Display an address with each component on a new line.


 
<!DOCTYPE html>
<html>
<head>
<title>Address Example</title>
</head>
<body>
<p>
Esha Gupta<br>
1234 Elm Street<br>
Springfield, IL 62704
</p>
</body>
</html>
Copy code

Output

Esha Gupta
1234 Elm Street
Springfield, IL 62704

Example 3: Breaking Lines in a Long Paragraph

Problem Statement: In a long paragraph, introduce line breaks at specific points for better readability.


 
<!DOCTYPE html>
<html>
<head>
<title>Paragraph Example</title>
</head>
<body>
<p>
This is a long paragraph intended to demonstrate the use of the <br> tag.
At certain points, <br> it's necessary to break the line for better readability,
even though the content is part of the same paragraph. <br> This helps to separate
ideas or statements within the same context.
</p>
</body>
</html>
Copy code

Output

This is a long paragraph intended to demonstrate the use of the
tag. At certain points,
it's necessary to break the line for better readability, even though the content is part of the same paragraph.
This helps to separate ideas or statements within the same context.

Example 4: List Items without List Tags

Problem Statement: Create a simple list of items using line breaks instead of list tags.


 
<!DOCTYPE html>
<html>
<head>
<title>List Example</title>
</head>
<body>
<ul> <!-- Use <ol> for an ordered list -->
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</body>
</html>
Copy code

Output

Item 1
Item 2
Item 3
Item 4

Example 5: Adding Space in a Form

Problem Statement: Use line breaks to add space between form elements.


 
<!DOCTYPE html>
<html>
<head>
<title>Form Example</title>
</head>
<body>
<form>
Name: <input type="text" name="name"><br><br>
Email: <input type="email" name="email"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Copy code

Output

Top 62+ HTML Interview Questions and Answers for 2024
Top 62+ HTML Interview Questions and Answers for 2024
Here are the HTML interview questions most likely to be asked during the interviews. This list also covers some HTML CSS interview questions to help you start or move ahead...read more

How to Create HTML Forms – Tutorial with Examples
How to Create HTML Forms – Tutorial with Examples
HTML forms or web forms are a powerful medium for interacting with users. They have interactive controls for submitting information. Web forms enable us to collect data or personal information...read more

HTML Attributes Explained with Examples
HTML Attributes Explained with Examples
HTML attributes provide additional information about HTML elements. They are used to modify the behavior or appearance of an element. Attributes are specified within the opening tag of an element...read more

Creating HTML Links – Tutorial With Examples

HTML Lists: Ordered and Unordered Lists Explained with Examples
HTML Lists: Ordered and Unordered Lists Explained with Examples
This tutorial explains how to create different types of lists: unordered, ordered, and description lists in HTML. In this blog, you will learn what are HTML lists and understand how...read more

Key Takeaways

  • The <br> tag is primarily used for inserting line breaks in text, such as in poems or addresses.
  • It's a self-closing tag, written as <br> in HTML5.
  • It's not intended for controlling layout or spacing; CSS is preferred for these purposes.
  • Overuse can impact readability and accessibility, so it should be used judiciously.

FAQs

What is a br tag?

The br tag in HTML is a line break element used to create a break in the line of text. It's commonly used to add space between lines within an element like a paragraph or header.

How do you use a br tag?

To use a br tag, you simply place it where you want the line break to occur in your text. Unlike most HTML tags, the br tag doesn't need a closing tag. For example, using a br tag between two sentences will place them on separate lines.

Can you control the amount of space a br tag adds?

The br tag itself doesn't provide a way to control the amount of space added. It simply breaks the line. However, you can use CSS to adjust the spacing around the br tag, or use multiple br tags in succession to create more space.

Is it good practice to use br tags for spacing in web layouts?

Generally, using br tags for creating space in web layouts is not recommended. It's better to use CSS for spacing and layout purposes as it offers more control and keeps your HTML cleaner.

Are there any special attributes for a br tag?

The br tag does not have any specific attributes that can be set. It's a straightforward, self-closing tag that performs a single function – creating a line break.

About the Author
author-image
Esha Gupta
Associate Senior Executive

Hello, world! I'm Esha Gupta, your go-to Technical Content Developer with a focus on Java, Data Structures and Algorithms, and Front End Development. Alongside these specialities, I have a zest for immersing myself ... Read Full Bio

Comments