HTML line break tag – when and how to use it

HTML line break codeA lot of beginners to website design want to know how to create a line break using HTML. And while the tag used to create a line break is easy to remember, knowing when and how to use it correctly is a little more complicated. In addition, there are many times when you shouldn’t even use the HTML line break code at all.

In this post we’ll take a look at line breaks, what is the HTML tag for one, and when to and not to use them.

(By the way, if this is your first time visiting Newbie Website Design, then I encourage you to check out the My First Website series to learn how to build websites the right way.)

Let’s get learn more about HTML line breaks, shall we?

What is a line break?

A line break is a special HTML tag that will force the very next the next character (or sentence or paragraph) to appear on a new line right below the one above. It is similar to pressing the “return” key when using a word processor.

It isn’t gonna work

If you’re using a text editing program like Notepad (Windows) or TextEdit (Mac) to write the HTML for your website, then pressing the return key in order to create line breaks isn’t going to work. You could press the return key a hundred times and you still won’t see those line breaks when you view your website with a browser. To get the desired line-breaking space that you want you either have to use the special HTML line break code or use CSS to do it for you.

The HTML for a line break

Here’s the HTML tag you need in order to make a line break:

<br />

Pretty simple, huh? Just plop this where you want a line break and you’re done!

Or are you…

The wrong way to do line breaks

Now, before you go adding the HTML line break code all over your layout, just remember this: if you ever decide to change the design of your website, then you may have to go through all of your pages and do some nasty hunt and replace.

For example:

Let’s say that you added two line breaks after all of the <h1> heading tags on your website. Later, if you decide that you only want one line break after the heading tags, then you have to erase all of the extra HTML line break code from every page. And if you have added line breaks after subheadings, paragraphs, and other layout elements, then let the editing nightmare begin!

The better way to do line breaks

Instead of relying on HTML for your line breaks, let an external CSS file handle the task. You won’t be using the <br /> tag. In its place you’ll be using a padding-bottom to get the job done right. By using CSS in an external file, you can control the height of this “padding” all throughout your website from one location.

(NOTE: to learn more about what an external CSS file is and how to make one, I strongly suggest going through the My First Website series here on Newbie Website Design. Post #5 talks specifically about how to add an external CSS file. )

The “non line break” line break

Okay. Okay. So we’re not technically going to be adjusting the line breaks. But what we are going to do is control how much white space occurs after an element such as a heading or a paragraph. We do this by using padding-bottom in our CSS. It’s easy. Take a look:

h1 {
    padding-bottom: 20px;
}

This CSS simply tells the browser that all <h1> headings will have an extra 20 pixels of padding below it — right after the closing </h1> tag. Any text that follows the heading will be pushed down by 20 pixels. You can do this after paragraphs, too:

p {
    padding-bottom: 15px;
}

The p represents the paragraph tags in your HTML. After a closing paragraph tag (</p>) the very next element — be it a subheading or another paragraph — is pushed down 15 pixels.

When to use an HTML line break

Personally, there are only two times when I use an actual HTML line break in my designs…

#1: One-shot deals

If I need a little extra space in a design and I know 100% for certain that it won’t be repeated on other web pages I’ll use the <br /> tag. Before you add an HTML line break, be certain that it will never become a repeated part of every page of your layout.

#2: Proper text layout

There are times when you just have to make sure that the text of your layout flows correctly. Since all browsers won’t display your text exactly the same way, you can use HTML line breaks to ensure a clean look. A good example of this is when you have a centered heading that contains a lot of text. For example, this looks just horrible:


heading-bad

The word “system” hangs like deadweight at the bottom — stranded and all alone. But with a few line breaks we can make it look much, much better:


heading-good

Here’s the code (keep your eyes peeled for the HTML line break code):

<h1>Lose 20 pounds in 5 days with<br />our 100% safe, all-natural<br />weight-loss system!</h1>

Conclusion

Line breaks aren’t that hard to create with HTML. Because of that, they are extremely easy to add to a design. The downside is that by using them too much you might make updating or altering your website’s design and layout a major pain down the road. Start off right by adjusting the padding-bottom in an external CSS file and all future headaches will never cross your furrowed brow.

If you enjoyed this post, then how about sharing it
with your friends using these services? Thanks!



4 Responses:

  1. IT Dubai

    I like your blog. Been busy lately studying html and found your blog.

    Keep posting tips

    Allan

  2. owen

    thank you for your info about line break tag.. i have an idea and work my assignment…keep posting and share it to us newbie!!:)

  3. mila marcelo

    thank you for the information about line breaks…i hope can still post a new idea about HTML!!

  4. Thomas Jones

    Its worth noting that padding-bottom is the wrong property to use here, semantically. While, in the absence of a border, padding and margin do the same thing, the moment someone tries to use padding-bottom to “push text down” from their heading, and add a border to said heading, they will get unexpected results.

    Use margin (and the corresponding margin-top/bottom/left/right properties) when specifying the space between elements. Padding defines the space between an element’s border and its content, whereas the margin defines the space between an element’s border and the adjacent element’s border.


Share your thoughts below: