<br> Tag in HTML
Introduction
HTML Represents Hypertext Markup Language. It is commonly referred to as the foundation of the internet and serves as a fundamental markup language for developing web content and applications. An important and robust element within HTML is the <hr> tag, which allows for the insertion of a horizontal line to separate content. This tutorial will delve into the specifics of the <hr> tag.
When composing content in MS Word, pressing the enter key shifts the cursor to the next line. On the other hand, in HTML, to create a single line break within a paragraph, we utilize the <br> tag.
Examples of <br> Tag
Let's consider a scenario where we craft a poetic piece excluding the <pre> tag and observe the resulting outcome.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>Welcome To Example</h2>
<div>
Hold fast to dreams
For if dreams die
Life is a broken-winged bird
That cannot fly
Hold fast to dreams
For when dreams go
Life is a barren field
Frozen with snow
</div>
</body>
</html>
Output:
Explanation:
In the provided program, the poem is composed with line breaks, however, the output consolidates all the lines into a single continuous line.
Let's revise the aforementioned code using the assistance of the <br> tag and observe the resulting output.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>Welcome To Example</h2>
<div>
Hold fast to dreams <br>
For if dreams die <br>
Life is a broken-winged bird <br>
That cannot fly <br><br>
Hold fast to dreams <br>
For when dreams go <br>
Life is a barren field <br>
Frozen with snow <br>
</div>
</body>
</html>
Output:
Explanation:
We achieved the desired format output as expected by incorporating the <br> tag in the provided code snippet.
Let's delve into the explanation of the <br> element.
Definition of <br> Tag in HTML
The <br> tag in HTML is employed to generate a line break within an HTML document, representing a carriage return.
Syntax of <br> Tag:
We have the ability to compose the <br> tag using the syntax provided below.
<div>
Sample line one <br>
Sample line two <br>
Sample line three <br>
</div>
Attributes of <br> Tag in HTML
In HTML, the <br> element only accommodates two categories of attributes. These include Global attributes and event Handler attributes.
1. Global Attributes
The global attribute that is supported in HTML is as follows.
- Accesskey
- Autocaptilize
- Class
- contenteditable
2. Event Handler Attributes
We want something returned as a response whenever we press any key or click. In that case, we take the help of the event handler. The list of event listeners supported by the <br> tag is as follows.
- Onabort
- Onautocomplete
- Onautocompleteerror
- Onblur
NOTE: The <br> tag is deprecated in HTML 5. So It Is no longer supported in HTML5 and should not be used.
Example of <br> Tag with HTML & CSS Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#container{
background-color: black;
color : RGB(161, 240, 142);
font-weight: bold
}
</style>
</head>
<body>
<h2>Welcome To Example</h2>
<article id="container">
<section id="container-address">
C# Tutorial<br>
G-13, <br>
SECTOR-03, <br>
GAUTAM BUDDHA NAGAR, <br>
NOIDA, <br>
201301. <br>
</section>
</article>
</body>
</body>
</html>
Output:
Difference between <br> and <br/> in HTML
- With the help of <br> tag, we provide the line break in HTML. There is no need for </br> tag.
- But in XTML, it is stricter in HTML. So in XTML, the syntax is changed.
- We need to use <br/> (not to be confused with the usual ending tags in HTML where the slash is written before the element name, not after ex: </h1>,</br>)
Example of <br> Tag for Entering Line Breaks in HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Example of the <br> tag usage</h1>
<blockquote>
But I'm not the only one<br>
I hope someday you'll join us<br>
And the world will live as one.<br>
</blockquote>
<cite>John Lennon "imagine"</cite>
</body>
</html>
Output: