10. br Tag

Introduction

The <br> (line break) element creates a line break in text, forcing content to start on a new line. It’s a self-closing element useful for formatting addresses, poetry, or other content where line breaks are significant. However, it should be used sparingly, as CSS and semantic HTML are generally preferred for layout.

Basic Usage

<p>Line one<br>Line two<br>Line three</p>

Common Use Cases

Addresses

Formatting addresses:

<address>
    123 Main Street<br>
    City, State 12345<br>
    Country
</address>

Poetry

Preserving line breaks in poetry:

<p>
    Roses are red,<br>
    Violets are blue,<br>
    HTML is fun,<br>
    And so are you.
</p>

Forced Line Breaks

When line breaks are necessary:

<p>Name: John Doe<br>Email: john@example.com</p>

Best Practices

Use Sparingly

Prefer semantic HTML and CSS:

<!-- Good: Semantic structure -->
<address>
    <div>123 Main Street</div>
    <div>City, State 12345</div>
</address>

<!-- Avoid: Multiple br tags -->
<p>Line 1<br><br><br>Line 2</p>

CSS Alternative

Use CSS for spacing:

<!-- Good: CSS spacing -->
<p class="spaced">Line 1</p>
<p class="spaced">Line 2</p>

<style>
    .spaced {
        margin-bottom: 1em;
    }
</style>

References

• MDN Web Docs - br element