Categories
Learn HTML

HTML: br tag

HTML: <br> tag

In this series of learning HTML, we will teach you how to use HTML br tag with proper syntax and lots of examples. Let’s start on the HTML br tag.

Description of HTML br tag

The HTML br tag is a self-closing tag that is used to insert a line break within a block of text. When the web page is rendered in a web browser, the br tag causes the text to break to a new line.

Here’s an example of how to use the br tag in HTML:

<p>This is the first line.<br>This is the second line.</p>

In this example, the br tag is used to insert a line break after the first line of text. When rendered in a web browser, it might look something like this:

This is the first line. This is the second line.

Note that the br tag is a self-closing tag, which means that it does not require a closing tag. Additionally, the br tag should only be used to create line breaks within a block of text, and should not be used to create spacing or indentation within the layout of a web page. To create more complex layouts, CSS should be used instead.

 

Syntax of HTML br tag

The HTML <br> tag is a self-closing tag that is used to insert a line break or carriage return within a block of text. The syntax of the <br> tag is as follows:

<p>
This is some text.<br>
This text will be on a new line.
</p>

Here, the <br> tag is used to break the line of text and start a new line. The tag does not require a closing tag, since it is a self-closing tag.

The <br> tag can be used to insert a line break within any block-level element, such as paragraphs, headings, and lists.

Example:

<p>
This is some text.<br>
This text will be on a new line.
</p>

<h1>Heading</h1>
<p>
This is some more text.<br>
This text will be on a new line.
</p>

<ul>
<li>Item 1<br>
This text will be on a new line.
</li>
<li>Item 2<br>
This text will be on a new line.
</li>
</ul>

In this example, the <br> tag is used to insert line breaks within paragraphs, headings, and list items.

Global Attributes

The <br> tag is a self-closing tag in HTML and is used to insert a line break or newline in the document. It does not have any global attributes specific to it, but it can use the global attributes available in HTML.

The global attributes that can be used with the <br> tag include:

  1. class: Specifies one or more class names for the element, which can be used to apply CSS styles to the element.
  2. id: Specifies a unique identifier for the element, which can be used to identify the element in a document or to apply styles to the element.
  3. style: Specifies inline CSS styles to be applied to the element.
  4. title: Specifies a title for the element, which can be used as a tooltip when the user hovers over the element.
  5. aria-*: Used to define accessible attributes for the element, which can be used by assistive technology to provide additional information to users with disabilities.
  6. data-*: Used to store custom data private to the page or application.

Example:

<br class="my-line-break" id="break1" style="color: red;" title="This is a line break">

In the above example, the class, id, style, and title attributes are used to apply a red color to the line break, give it a unique identifier, and add a tooltip.

Event Attributes

The <br> tag is a self-closing tag in HTML and does not have any event attributes specific to it. However, it can use the global event attributes available in HTML.

The global event attributes that can be used with the <br> tag include:

  1. onclick: Specifies a script to be executed when the element is clicked.
  2. ondblclick: Specifies a script to be executed when the element is double-clicked.
  3. onmousedown: Specifies a script to be executed when a mouse button is pressed down over the element.
  4. onmouseup: Specifies a script to be executed when a mouse button is released over the element.
  5. onmousemove: Specifies a script to be executed when the mouse pointer moves while it is over the element.
  6. onmouseover: Specifies a script to be executed when the mouse pointer moves onto the element.
  7. onmouseout: Specifies a script to be executed when the mouse pointer moves out of the element.

Example:

<br onclick="alert('You clicked the line break!');" onmouseover="this.style.color='red';" onmouseout="this.style.color='black';">

In the above example, the onclick attribute is used to display an alert message when the line break is clicked. The onmouseover and onmouseout attributes are used to change the color of the line break when the mouse pointer moves over and out of it, respectively.

Other Attributes

The <br> tag is a self-closing tag in HTML and does not have any attributes other than the global and event attributes.

However, the <br> tag can use some Boolean attributes to provide additional functionality, such as:

  1. clear: Specifies whether the line break should clear any floating elements that precede it. The clear attribute can take the values left, right, both, or none.

Example:

<br clear="both">

In the above example, the clear attribute is used to clear any floating elements that appear on either side of the line break.

  1. hidden: Specifies that the line break should be hidden from view.

Example:

<br hidden>

In the above example, the hidden attribute is used to hide the line break from view. However, this attribute is not commonly used with the <br> tag.

Note that Boolean attributes do not require a value. If the attribute is present, it is considered to be true. If the attribute is absent, it is considered to be false.

 

Notes on HTML br tag

Here are some important notes on using the <br> tag in HTML:

  1. The <br> tag is a self-closing tag, which means that it does not require a closing tag.
  2. The <br> tag is used to insert a single line break or newline in the document. If you need to insert multiple line breaks, you should use multiple <br> tags.
  3. The <br> tag is not recommended for use in the body of your HTML document. Instead, you should use CSS to control line breaks and spacing in your content.
  4. The <br> tag should be used sparingly, as excessive use can make your content difficult to read and maintain.
  5. When using the <br> tag, you can also use the clear attribute to control how the line break interacts with any floating elements on the page.
  6. If you need to insert more complex line breaks or spacing in your content, you should consider using CSS to control these aspects of your layout.
  7. Finally, remember that the <br> tag is just one of many HTML tags that you can use to structure and format your content. Always choose the appropriate tag for the content you are creating to ensure that your markup is semantically meaningful and accessible.

 

Browser Compatibility

The HTML br tag has essential support with the following browsers:

  1. Chrome
  2. Internet Explorer (IE)
  3. Opera
  4. Safari (WebKit)
  5. Firefox (Gecko)
  6. Android
  7. Firefox Mobile (Gecko)
  8. Edge Mobile
  9. Opera Mobile
  10. Safari Mobile

Examples of HTML br tag

We will discuss the <br> tag below, exploring examples of how to use the <br> tag in HTML5, HTML 4.01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict, and XHTML 1.1.

  • HTML5
  • HTML4
  • XHTML

We will discuss the HTML br tag below, with some examples of how to use the br tag in HTML5, HTML 4.01 Transitional, XHTML 1.0 Strict, XHTML 1.0 Transitional, and XHTML 1.1.

  1. HTML5
  2. HTML4
  3. XHTML

HTML5 Document

Here is an example of an HTML5 document that uses the <br> tag:

<!DOCTYPE html>
<html>
<head>
<title>Example using the HTML5 br tag</title>
</head>
<body>
<h1>Hello World!</h1>
<p>This is an example of using the br tag to add line breaks:</p>
<p>First line<br>
Second line<br>
Third line</p>
<p>You can also use multiple br tags in a row to add additional spacing:</p>
<p>First line<br><br><br>
Second line</p>
</body>
</html>

 

Hello World!

This is an example of using the br tag to add line breaks:

First line
Second line
Third line

You can also use multiple br tags in a row to add additional spacing:

First line

Second line

 

HTML 4.01 Transitional Document

Here’s an example of an HTML 4.01 Transitional document using the <br> tag to add line breaks:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Example using the HTML 4.01 br tag</title>
</head>
<body>
<h1>Hello World!</h1>
<p>This is an example of using the br tag to add line breaks:</p>
<p>First line<br>
Second line<br>
Third line</p>
<p>You can also use multiple br tags in a row to add additional spacing:</p>
<p>First line<br><br><br>
Second line</p>
</body>
</html>

In this example, the <br> tag is used to add line breaks within the paragraph tags (<p>) to create multiple lines of text. The document is declared as HTML 4.01 Transitional using the appropriate document type declaration (<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">).

The resulting output would display as follows:

Hello World!

This is an example of using the br tag to add line breaks:

First line
Second line
Third line

You can also use multiple br tags in a row to add additional spacing:

First line

Second line

 

 

 

XHTML 1.0 Transitional Document

here’s an example of an XHTML 1.0 Transitional document using the <br> tag to add line breaks

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example using the XHTML 1.0 br tag</title>
</head>
<body>
<h1>Hello World!</h1>
<p>This is an example of using the br tag to add line breaks:</p>
<p>First line<br />
Second line<br />
Third line</p>
<p>You can also use multiple br tags in a row to add additional spacing:</p>
<p>First line<br /><br /><br />
Second line</p>
</body>
</html>

In this example, the <br> tag is used to add line breaks within the paragraph tags (<p>) to create multiple lines of text. The document is declared as XHTML 1.0 Transitional using the appropriate document type declaration (<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">) and the HTML namespace is declared using the xmlns attribute on the html element.

Note that in XHTML, all elements must be closed properly, either with a closing tag or a self-closing tag. So instead of just using <br> as in HTML, the self-closing tag <br /> is used to properly close the <br> element.

The resulting output would display as follows:

Hello World!

This is an example of using the br tag to add line breaks:

First line
Second line
Third line

You can also use multiple br tags in a row to add additional spacing:

First line

Second line

 

XHTML 1.0 Strict Document

here’s an example of an XHTML 1.0 Strict document using the <br> tag to add line breaks:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example using the XHTML 1.0 Strict br tag</title>
</head>
<body>
<h1>Hello World!</h1>
<p>This is an example of using the br tag to add line breaks:</p>
<p>First line<br />
Second line<br />
Third line</p>
<p>You can also use multiple br tags in a row to add additional spacing:</p>
<p>First line<br /><br /><br />
Second line</p>
</body>
</html>

 

In this example, the <br> tag is used to add line breaks within the paragraph tags (<p>) to create multiple lines of text. The document is declared as XHTML 1.0 Strict using the appropriate document type declaration (<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">) and the HTML namespace is declared using the xmlns attribute on the html element.

Note that in XHTML 1.0 Strict, the use of certain elements and attributes is restricted, so some HTML elements and attributes are not allowed. However, the <br> tag is still allowed.

As with XHTML 1.0 Transitional, all elements must be closed properly using either a closing tag or a self-closing tag. So instead of just using <br> as in HTML, the self-closing tag <br /> is used to properly close the <br> element.

The resulting output would display as follows:

Hello World!

This is an example of using the br tag to add line breaks:

First line
Second line
Third line

You can also use multiple br tags in a row to add additional spacing:

First line

Second line

 

 

XHTML 1.1 Document

Here’s an example of an XHTML 1.1 document using the <br> tag to add line breaks:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example using the XHTML 1.1 br tag</title>
</head>
<body>
<h1>Hello World!</h1>
<p>This is an example of using the br tag to add line breaks:</p>
<p>First line<br />
Second line<br />
Third line</p>
<p>You can also use multiple br tags in a row to add additional spacing:</p>
<p>First line<br /><br /><br />
Second line</p>
</body>
</html>

In this example, the <br> tag is used to add line breaks within the paragraph tags (<p>) to create multiple lines of text. The document is declared as XHTML 1.1 using the appropriate document type declaration (<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">) and the HTML namespace is declared using the xmlns attribute on the html element.

Note that XHTML 1.1 is a more strict version of XHTML and has stricter rules for elements and attributes than XHTML 1.0. However, the <br> tag is still allowed.

As with XHTML 1.0, all elements must be closed properly using either a closing tag or a self-closing tag. So instead of just using <br> as in HTML, the self-closing tag <br /> is used to properly close the <br> element.

The resulting output would display as follows:

Hello World!

This is an example of using the br tag to add line breaks:

First line
Second line
Third line

You can also use multiple br tags in a row to add additional spacing:

First line

Second line