In this section of our HTML tutorial, we will focus on the <br> element, which is used to insert line breaks within text content in HTML documents. Understanding how to create line breaks is essential for controlling text formatting and layout.
Understanding Line Breaks
The <br> element is a self-closing tag used to insert line breaks within text content. It is particularly useful when you want to start a new line without creating a new paragraph or a block-level element. Line breaks are commonly used in addresses, poems, or any scenario where manual control over line breaks is necessary.
Classic <br> Syntax
Here is the classic syntax for using line breaks in HTML:
|
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <!-- Document Type Declaration (DOCTYPE) --> <html> <head> <!-- Other elements in the head section --> </head> <body> This is some text.<br> This text is on a new line. <!-- Content in the body section --> </body> </html> |
In this example, the <br> element is used to insert a line break, starting the text on a new line.
XHTML-style <br /> Syntax
Alternatively, you can use the XHTML-style syntax:
|
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <head> <!-- Other elements in the head section --> </head> <body> This is some text.<br /> This text is on a new line. </body> </html> |
In later versions of HTML (HTML5 and beyond), both classic and XHTML-style syntaxes for self-closing tags like <br> are accepted. The classic syntax is more commonly used, but the choice between the two is a matter of preference and coding style.
Code Examples
Here are examples of using the <br> element in HTML:
Inserting a Line Break:
|
1 2 |
This is some text.<br> This text is on a new line. |
Inserting Multiple Line Breaks:
|
1 |
First line.<br><br>Second line. |
Inserting Line Breaks in Addresses:
|
1 2 3 |
John Doe<br> 123 Main Street<br> City, State, ZIP |
Use a line break within a paragraph in HTML:
|
1 2 |
<p>This is a sample paragraph of text with a line break.<br> This text continues on a new line within the same paragraph.</p> |
In this example, a line break <br> is used within a paragraph (<p>) to start a new line while keeping the text within the same paragraph. This is useful when you want to insert a line break without creating a new paragraph or block-level element.
Conclusion
The <br> element is a simple but effective tool for inserting line breaks within text content. It is particularly useful when you need to create manual line breaks in addresses, poems, or other scenarios where precise control over text layout is required. As you continue to work on web pages, you’ll discover how line breaks, along with other HTML and CSS techniques, contribute to the overall design and readability of your content.