Proper use of line breaks in HTML

Book

One of the major sins when making a website is mixing up paragraphs and line breaks. I was trying to find sites that explain to beginners the proper use and common misuses of the paragraph <p> and line break <br> tags. Surprisingly I didn’t find many sites that discuss this beyond the usual don’t do this, don’t do that.

So I’ve decided I’ll go ahead an attempt to explain it in a bit more detail here. Since this is something you should learn when you’re still getting to know HTML, I’ll try to make this as friendly as possible to beginners.

WHEN & HOW TO USE THE P TAG

The <p> tag is used to create paragraphs in a body of text. So if you’re writing a blog post or article, or a comment, each paragraph should end up wrapped inside these tags.

For example:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Nunc suscipit pellentesque dictum.</p>

Will result in this:


Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Nunc suscipit pellentesque dictum.


Simple, right? Just remember that each paragraph in your text goes between the <p> and </p> tags, and you’re good to go.

WHEN & HOW TO USE THE BR TAG

The <br> tag is used to create line breaks in special cases, like addresses, poems and similar.

For example:

an old pond—<br>
a frog leaps in<br>
the sound of water

Will result in this:


an old pond—
a frog leaps in
the sound of water


THINGS YOU SHOULDN’T DO

You may have already realized that two consecutive line breaks will look like a paragraph separation, like this:

Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br><br>
Nunc suscipit pellentesque dictum.

While it does look similar in the browser, this causes several limitations and issues and you shouldn’t do it. Let’s see why…

HTML IS A SEMANTIC LANGUAGE BY NATURE

This means HTML should reinforce the meaning of the content. For example the tag <em> is used to emphasize a piece of text, which by default will appear in italics in the browser.

Website styling is a different story though, and should be abstracted from the HTML code. So through CSS you have the choice to change the style of any element, like that emphasized text. If in your website design, you don’t want it to appear in italics, you can change that.

A robot like Google’s search engine bot will be able to read your HTML and know that text is emphasized regardless of what it looks like in the browser.

In other words, HTML is structure and semantics and what robots read, while CSS is presentation and what makes the website pretty for human readers.

If you need a paragraph, as far as HTML goes, do yourself a favor and use the markup intended for that purpose. While it’s hard to determine if misusing paragraphs and line breaks would hurt SEO, it’s just good practice to do it correctly, but also easier to work with later on (read below).

HTML AND CSS NEED TO WORK TOGETHER

Defining vertical margins between paragraphs correctly is nearly impossible if your code solely relies on line breaks to structure your text, because all you’re left with is a huge HTML element with lots of orphaned text and other elements thrown in. You have no styling control whatsoever over these “paragraphs” because you haven’t defined them as such in your HTML code.

WEBSITES ARE SERIES OF BOXES

Seriously, try it. Add this to your website’s CSS for a moment and see what happens:

* { box-shadow: inset 0 0 0 1px red !important; }

Every element in a website can be thought of as a box. Even text, to some extent. And these boxes have a position, a width and height, and many other properties.

CSS is built around this concept: The CSS box model gives you margins & paddings to separate a paragraph of text from another, or from other elements.

By wrapping each paragraph in <p> & </p> tags, you get one element per paragraph.

One box per paragraph.

TO CLOSE OR NOT TO CLOSE

One last thing, if you’re using an HTML5 doctype, avoid self-closing the line break tag with the slash character (<br/>). That’s only needed in XHTML. In HTML5 simply use <br> instead.

FURTHER READING

  1. The Perfect Paragraph, Smashing Magazine
  2. CSS Box Model, W3Schools
  3. 12 Examples of Paragraph Typography
  4. You’re Doing it Wrong: Common HTML Tag Misuses
  5. CSS Margins

Leave a Reply

Your email address will not be published. Required fields are marked *