X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

HTML <br> Tag

Definition

The HTML <br> tag defines a line break. Unlike the <p> tag that defines the paragraph, an empty indent is not added before the line.

Syntax

The <br> tag is empty, which means that the closing tag isn’t required. But in XHTML, the (<br>) tag must be closed (<br/>).

Example of <br> tag:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Example of the &lt;br&gt; tag usage.</h1>
    <p> Inside the paragraph, we can put the tag &lt;br /&gt;, <br> to transfer a part of the text to another line if necessary.</p>
  </body>
</html>

Usage

The <br> tag is used to enter line breaks. It is useful for writing addresses, poems or song lyrics.

Do not use <br> tag to separate paragraphs. It is very problematic to use <br> tag to separate the paragraph for the people who navigate through the screen reading technology. Use <p> elements and CSS margin property to control spacing.

Example of <br> tag usage:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Example of the &lt;br&gt; tag usage</h1>
    <blockquote>
      But I'm not the only one<br>
      I hope some day you'll join us<br>
      And the world will live as one.<br>
    </blockquote>
    <cite>John Lennon "imagine"</cite>
  </body>
</html>

Styling with CSS

Many people use CSS margin property on <br> tag to increase the spacing between the lines of text in a block. But there is CSS line-height property that was created for that purpose.

Example of styling the <br> tag with CSS:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style> 
      br {
      line-height: 50px;
      }
    </style>
  </head>
  <body>
    <h1>Example of the &lt;br&gt; tag usage.</h1>
    <p> We use CSS line-height property &lt;br /&gt;, <br> to increase  the spacing between the lines of text.</p>
  </body>
</html>

Attributes

Attributes Value Description
clear Specifies how to process the next line if the text wraps around the floating element.
Not used in HTML5.
all Reverses the flow around the element from the right and left edges at the same time.
left Reverses the flow from the left side of the element placed after the <br> tag.
right Reverses the flow from the right side.
none Cancels the action of an attribute.

The <br> tag supports the Global Attributes and the Event Attributes.


Browser support



Do you find this helpful?

Related articles