HTML br Tag For Single Lines Break Tutorial with Examples


HTML provides <br> tag in order to break a single line where the current line will end and a new line will be started. In this tutorial, we will learn the usage of the HTML <br> tag with examples and use cases. We will also compare the <br> tag with similar tags like <p> and <wbr>. <br> tag is supported by all major and popular browsers like Google Chrome, Mozilla Firefox, Microsoft Edge/Internet Explorer, Opera, Safari, etc.

<br> Tag Syntax

HTML <br> tag has very simple syntax where just attributes can be used. But in most cases <br> is used without any attribute. Keep in mind that <br> tag do not have an end tag like <br/> etc which simply means it shouldn’t be closed.

<br ATTRIBUTE>
  • ATTRIBUTE is generally not used but in some rare situations margin and line-height attributes can be used.

<br> Tag For Single Line Break

<br> tag will create a single line break after the current line. <br>  tag do not provide the styling of similar attributes where only margin or line-height can be set between current and next line. <br> tag can be used inside a text in a single line for multiple lines where every occurrence of the <br> tag will make a single line break. Keep in mind that <br> tag will not add spaces it will simply add an empty line with no spaces.

<html>
<body>

<h1>br Example1</h1>
This a text block<br> where multiple <br>break line tag<br> is used.

<h1>br Example2</h1>
This is<br>
another<br>
example<br>
about<br>
break tag

</body>
</html>
"<br
<br> Tag For Single Line Break

Styling and Margin with line-height CSS Attribute

One of the useful attributes for the <br> tag is the line-height CSS attribute will simply set the margin between the current line and the next line. We can express the line height in different formats or units like px, em or cm etc. We will use the style attribute in order to provide line-height CSS attribute.

<html>
<body>

<h1>br Example1</h1>
This a text block<br style="line-height:22px;"> where multiple <br style="line-height:32px;">break line tag<br style="line-height:42px;"> is used.

<h1>br Example2</h1>
This is<br style="line-height:32px;">
another<br style="line-height:12px;">
example<br style="line-height:32px;">
about<br style="line-height:12px;">
break tag

</body>
</html>
Styling and Margin with line-height CSS Attribute
Styling and Margin with line-height CSS Attribute

When and Where To Use <br> Tag

<br> tag can be used in different cases where most popular of them are listed below.

  • Address  can be expressed in a multi-line manner by using <br> tag to create a new line.
  • Poems generally consist of multiple lines where these new lines or line breaks can be created with <br> tag.
  • Code Samples may require a lot of new lines if we do not use pre-formatted tags so we can use <br> in order to create new lines for code samples.

LEARN MORE  HTML Comments: How To Create and Use In HTML Code?

Leave a Comment