HTML Line Break: Mastering the HTML New Line Using BR Tag

Do you know – how paragraphs are rendered in HTML page? Basically when you write a paragraph in HTML, it starts a new line automatically. But if you want a HTML Line Break within this paragraph to start from a new line then how you can do this? Yes you can do this using the HTML BR Tag.

In this article, we are going to explain what HTML line breaks are and how to use them in a super easy way.

Formal Definition of HTML Line Break?

In HTML, a line break is a specific code that breaks a line and begins a new line without introducing a new paragraph.

How to Add a Line Break in HTML:

The most recent version of HTML, HTML 5.2, contains 142 HTML tags. Among those only 115 tags are deemed functional and usable within any HTML code. One of which is to make line breaks. In HTML, line breaks can be added with the BR tag. It can divide an element into numerous sections by passing between inline elements.

Here is the first example of a paragraph with HTML BR Tag:

<p>
    Hello, HTML Programmer !!
    <br />
    Are you really trying to create a
    <br />
    new line
    <br />
    using HTML BR Tag?
</p>

Code Output – Html Line Break Example:

Usage of HTML New Line:

• BR tag inserts a single line break.
• BR tag comes extremely handy, in case of writing addresses or poems.
• BR tag has no end tag as it’s an empty tag.
• BR tag is an hard coded element. So use carefully for responsive designs.

Html Line Break More Example:

Not only you can use this tag for text block but also you can use other forms of inline elements like span, links. For example, look at this code:

<style>
  body{
	font-size:2em;
	font-weight:bold;
  }
</style>

<div>
    <span>HTML Code</span>
    <span>Javascript Code</span>
</div>

<br/>
<br/>

<div>
    <span>HTML Code</span><br/>
    <span>Javascript Code</span>
</div>

Output:

Sample Code:

<style>
  body{
	font-size:2em;
	font-weight:bold;
  }
</style>

<div>
    <a href='https://coderstechzone.com/html/'>HTML Code</a>
    <a href='https://coderstechzone.com/javascript/'>Javascript Code</a>
</div>

<br/>
<br/>

<div>
    <a href='https://coderstechzone.com/html/'>HTML <br/> Code</span><br/><br/>
    <a href='https://coderstechzone.com/javascript/'>Javascript <br/> Code</a>
</div>

Output:

Styling with CSS:

The BR Tag has the only one purpose for creating a new line. There is no other purpose of using it. Also this tag has no visual dimension or impact. Thus the styling capacity is very limited to developers.

Though you can use Margin, Padding – But it’s not a recommended practice. The most widely used CSS property is line-height to control the line spacing among a text block or other inline HTML elements.

Text blocks in HTML are generally using p(paragraph) tag. In this manner, you have control over both the line height inside and between p tags.

<style>
   #modified_Line_Height{
	line-height:50px;
   }
</style>

<div>
   <p id='defaultSized'>
	Hi Html Programmer! <br/>
	Hi Javascript Programmer!
   </p>

   <p id='modified_Line_Height'>
	Hi Html Programmer! <br/>
	Hi Javascript Programmer!
   </p>

</div>

Tips and Notes:

• You are unable to change the height of the HTML BR tag itself. It is just a command to start a new line.
• The only line-height style allows you to adjust the line height.
• Do not use Padding/Margin to the BR tag.
• Clear attributes already deprecated. So don’t use it.
• Do not use P Tag for a line break. Because it’s a serious accessibility concerns for special people those who navigate your page with the aid of screen reading technology.
• Excessive or incorrect usage of HTML New Line create problems with the content’s logical flow and navigation for users who use their keyboards to browse webpages.
• BR is a void element.
• If you want to create more complex layouts and spacing, CSS Flexbox and Grid are the most useful tools for flexible and responsive designs. As they allow more precise control over spacing and positioning of all elements of your pages.
• BR Tag supports HTML Global Attributes.
• BR Tag supports HTML Event Attributes.

Browser Compatibility:

The HTML new line Tag element is supported by all modern web browsers. This includes:

• Google Chrome
• Mozilla Firefox
• Microsoft Edge
• Internet Explorer (8 and above)
• Safari
• Opera

Conclusion:

Finally, we would like to convey clearly that HTML Line Break using BR Tag is very sensitive in terms of responsive design, readability, keyboard navigations. So wisely use it. Or you can use alternate CSS attributes like flexbox, bootstrap libraries etc.

Hope now you can understand everything about the HTML BR tag along with the impact of block elements. So use HTML New Line BR Tag only whenever seriously required. All references are also mentioned here for your better understanding.

Thanks for being with us. Please share the article and support us as always.

Frequently Asked Question on “HTML Line Break”: