More Web Design Tutorials

Basic HTML – How NOT to use the Line Break – – Tag

March 2, 2011

The <br> tag is called ‘line break’ tag, because it is meant to break lines by inserting a single line break. It is not there to create paragraph breaks or to add space around images or move things around on your page.

A poem is a good example of the proper use of the tag, as it requires line and paragraph breaks.

<p>Wer reitet so spät durch Nacht und Wind?<br>
Es ist der Vater mit seinem Kind;<br>
Er hat den Knaben wohl in dem Arm,<br>
Er faßt ihn sicher, er hält ihn warm.</p>
<p>"Mein Sohn, was birgst du so bang dein Gesicht?" <br>
"Siehst, Vater, du den Erlkönig nicht?<br>
Den Erlenkönig mit Kron und Schweif?" —<br>
"Mein Sohn, es ist ein Nebelstreif."</p>

And this is how this appears on the page – note the different spacing – line breaks just end one line and take you to the next, whereas a paragraph break – the <p>tag actually creates space.

Wer reitet so spät durch Nacht und Wind?
Es ist der Vater mit seinem Kind;
Er hat den Knaben wohl in dem Arm,
Er faßt ihn sicher, er hält ihn warm.

“Mein Sohn, was birgst du so bang dein Gesicht?”
“Siehst, Vater, du den Erlkönig nicht?
Den Erlenkönig mit Kron und Schweif?” —
“Mein Sohn, es ist ein Nebelstreif.”

(For the purpose of this lesson, I’m ignoring the proper use of HTML entity codes to create quotes and those funky German letters.)

An address is another good example of the proper use of the <br> tag:

<p>John Doe<br>
123 Main Street<br>
Some Town, USA<br>
555-555-5555</p>

Another situation where the <br> tag is frequently misused is around images to create space above and/or below them. While this:

<br>
<br>
<br>
<br>
<br>
<img src="http://www.killersites.com/community/public/style_images/Killersites2/logo.png" alt="The Killersites Frog">
<br>
<br>
<br>
<br>
<br>

creates that:

it’s not the proper use of the tag. In this case, the right way to create the space above and below the image is by using CSS and adding a margin or padding, which would look like this:

img {
     margin-top: 50px;
     margin-bottom: 50px;
}

Note: If you are using the XHTML doctype, the <br> tag must be closed like this: <br />