HTML br Tag: Line Breaks

html br tag

The br tag adds a single line break in HTML. It is an empty tag that does not need a closing tag. Use it to break lines of text where needed.

How the <br> Tag Works in HTML

In forms or contact sections, <br> is useful for breaking text like addresses into readable lines.

Use <br> to format lines in poems or lyrics where each line starts on a new row.

Here is the tag:

<br>

It can be written with or without the closing slash (<br />). Both work in modern HTML.

Use <br> when a break occurs within the same paragraph or content block. If the content should be a separate idea or block, use <p> instead.

Here is a quick example:

<p>Line one<br>Line two</p>

This will show “Line one” followed by “Line two” on a new line inside the same paragraph.

Do not use <br> to create space between elements. Use CSS for layout and spacing to keep structure clean and accessible.

Browsers treat <br> as a newline without adding extra space like <p> or <div>. It creates a simple break within content flow.

Instead of using <br><br>, use CSS margin or padding for vertical spacing. It keeps content more semantic and cleaner to manage.

Examples

Break Address in Contact Info:

<address>
  John Doe<br>
  1234 Main St.<br>
  Anytown, USA
</address>

This example uses <br> inside the <address> tag to place each part of the address on a new line. It improves readability.

Multiline Form Label:

<label for="bio">
  Tell us about yourself:<br>
  (Max 500 characters)
</label>
<textarea id="bio"></textarea>

The <br> tag separates the main label from the note. This makes it easier to scan without using multiple label elements.

Formatting a Short Poem:

<p>
  Roses are red,<br>
  Violets are blue,<br>
  I write HTML,<br>
  And so do you.
</p>

This formats each line of the poem separately using <br>. Each line appears on a new row inside the same paragraph block.

Custom Signature in Emails:

<p>
  Regards,<br>
  <strong>Jane Smith</strong><br>
  Front-End Developer<br>
  [email protected]
</p>

This signature layout uses <br> to separate the name, title, and email. It keeps the structure in a single paragraph for styling.

Wrapping Up

In this article, you learned what the <br> tag does and how to use it in different situations like forms, poems, or contact info.
Here is a quick recap:

  • <br> adds a line break without a new block
  • It works inside inline or block-level elements
  • Avoid using it for layout — use CSS instead
  • Use it wisely to improve text flow where a new paragraph is not needed

FAQs

What is the purpose of the tag in HTML?

The <br> tag adds a line break in HTML. It lets content continue on a new line inside the same block. It does not create space like paragraphs.

How to add multiple line breaks using in HTML?

You can use multiple <br> tags in a row like this:
<p>Line 1<br><br>Line 2</p>
This adds extra vertical spacing between the lines, but it's better to use CSS for spacing.

Can I use the tag inside lists or tables?

Yes, you can use <br> inside <td>, <th>, or <li> elements. It breaks content within a cell or list item:
<li>Item A<br>Item B</li>

Is
the same as starting a new paragraph with

?

No. <br> only adds a line break. <p> starts a new block of text with default margin spacing. Use <br> for simple line breaks within content.

Similar Reads

HTML dialog Tag: How to Create Dialog Boxes

The <dialog> tag is used to build modal popups in HTML. It shows alerts and messages without third-party scripts. Understand…

HTML Span Tag: Inline Container Explained

The HTML span tag acts as a simple container for inline text or other inline elements. It groups text and…

The hidden Attribute in HTML: How it Works with Examples

The HTML hidden attribute hides elements from users but keeps them in the code. You can use it when you…

HTML details Tag: How to Toggle Hidden Content

The <details> tag hides content and shows it when needed. It helps organize long pages. The tag shows extra info…

The em Tag in HTML: How to Emphasize Text in HTML

The HTML em tag shows stress or emphasis in text. It changes meaning for readers and screen readers. What is…

HTML progress Tag: How to Create Progress Bars with Examples

The <progress> tag in HTML shows task completion. It gives users visual feedback as the task runs. Understand the <progress>…

HTML template Tag: How it Works with Examples

The HTML <template> tag lets you store HTML content that won’t show up right away. JavaScript can pull it in…

HTML Small Tag: How to Make Text Small

The HTML small tag displays text in a smaller font size than nearby text. It shows less important or side…

HTML main Tag: How to Create a Primary Content Area

The <main> tag in HTML marks the central content of a webpage. It tells browsers and assistive technologies where the…

HTML Section Tag: How It Works with Examples

The HTML section tag groups parts of a web page that share one theme. It gives clear meaning to content.…

Previous Article

HTML time Tag: Representing Dates and Times

Next Article

HTML hr Tag: Horizontal Rules

Write a Comment

Leave a Comment

Your email address will not be published. Required fields are marked *


Subscribe to Get Updates

Get the latest updates on Coding, Database, and Algorithms straight to your inbox.
No spam. Unsubscribe anytime.