Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
What is the correct way of using , , or in HTML?
The HTML <br> element creates a line break in text content. There are several correct syntaxes for using the br tag, depending on the document type you're working with. Understanding the differences helps ensure proper cross-compatibility.
Syntax
Following are the valid syntaxes for the br element −
<!-- HTML5 and HTML4 --> <br> <!-- XHTML and XML --> <br /> <!-- Self-closing without space (valid but not recommended) --> <br/>
The <br> element is a void element, meaning it has no content and does not require a closing tag. The space before the forward slash in <br /> ensures compatibility with older HTML parsers.
HTML5 Syntax
In modern HTML5 documents, the simplest and most commonly used syntax is −
<br>
Example − Using <br> in HTML5
Following example demonstrates the standard HTML5 br tag usage −
<!DOCTYPE html> <html> <head> <title>HTML5 Line Break</title> </head> <body style="font-family: Arial, sans-serif; padding: 20px;"> <p>First line of text.<br> Second line after break.<br> Third line after another break.</p> <address> TutorialsPoint<br> 123 Learning Street<br> Education City, EC 12345 </address> </body> </html>
The output shows each line on a separate row −
First line of text. Second line after break. Third line after another break. TutorialsPoint 123 Learning Street Education City, EC 12345
XHTML Syntax
In XHTML documents, all elements must be properly closed. The br element uses self-closing syntax with a space before the forward slash −
<br />
Example − Using <br /> in XHTML
Following example shows XHTML-compliant line break usage −
<!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>XHTML Line Break</title> </head> <body style="font-family: Arial, sans-serif; padding: 20px;"> <p>Learning HTML is easy.<br /> Learning CSS makes it beautiful.<br /> Learning JavaScript adds interactivity.</p> </body> </html>
The output displays three separate lines −
Learning HTML is easy. Learning CSS makes it beautiful. Learning JavaScript adds interactivity.
Cross-Compatible Syntax
For documents that need to work in both HTML and XHTML environments, <br /> with a space is the safest choice. Modern HTML5 parsers accept this syntax without issues.
Example − Cross-Compatible Usage
<!DOCTYPE html> <html> <head> <title>Cross-Compatible Line Breaks</title> </head> <body style="font-family: Arial, sans-serif; padding: 20px;"> <h2>Contact Information</h2> <p> John Doe<br /> Web Developer<br /> Phone: (555) 123-4567<br /> Email: john@example.com </p> </body> </html>
This syntax works correctly in both HTML5 and XHTML parsers −
Contact Information John Doe Web Developer Phone: (555) 123-4567 Email: john@example.com
Common Use Cases
The br element is appropriate for line breaks that are part of the content structure −
-
Addresses − Breaking address lines in contact information.
-
Poetry − Preserving line structure in poems or verse.
-
Short phrases − Separating related but distinct phrases.
Note − Avoid using multiple <br> tags to create vertical spacing. Use CSS margins or padding instead for proper semantic markup and better responsive design.
Example − Poetry Formatting
<!DOCTYPE html> <html> <head> <title>Poetry with Line Breaks</title> </head> <body style="font-family: Arial, sans-serif; padding: 20px;"> <blockquote style="font-style: italic; margin: 20px;"> Roses are red,<br> Violets are blue,<br> HTML is great,<br> And CSS too! </blockquote> </body> </html>
The poem structure is preserved with proper line breaks −
Roses are red,
Violets are blue,
HTML is great,
And CSS too!
Differences Between BR Syntaxes
| Syntax | Document Type | Compatibility | Recommendation |
|---|---|---|---|
<br> |
HTML5, HTML4 | All modern browsers | Preferred for HTML5 documents |
<br /> |
XHTML, XML | Universal compatibility | Required for XHTML, safe for all |
<br/> |
Any (valid but not ideal) | Works but no space | Avoid; use spaced version |
<br></br> |
Invalid | May cause parsing issues | Never use; br is void element |
Conclusion
Use <br> for HTML5 documents and <br /> for XHTML or when cross-compatibility is needed. Both create identical line breaks in the rendered output. Never use <br></br> as the br element cannot have closing tags.
8K+ Views
