1. Computing

Write in HTML: Paragraphs and Spacing

Or: Why Does My HTML All Run Together Like an Ancient Scroll?

By

So, you've learned basic HTML concepts and some basic HTML tags, and you decided to paste some HTML into your CMS. Unfortunately, your article ran together. Everything is one paragraph! What happened?

Don't panic. Understand how your browser interprets line breaks, and you'll fix this quickly … or at least, simply.

Browsers Ignore Most White Space

HTML is about marking up ordinary text. Back when text was on parchmentq, ordinary text ran together in giant blocks. Today, we break text into paragraphs.

You may not think much about paragraphs. They just happen. You press ENTER, and that's that.

But HTML is different. The browser tries hard to filter out information that doesn't seem important. You need to understand how this works so you don't get confused.

Suppose you type a whole bunch of spaces:

I feel          like           e.e. cummings

Your prosaic browser will give this crisp rendition:

I feel like e.e. cummings

We're not in Word anymore, Toto. Browsers ignore extra spacing. They reduce multiple spaces to a single space.

Browsers will also ignore your line breaks.

 I feel        like    e.e.
            cummings
     but  everyone    hates    

   C A P I T A L S   online
                              anyway.

Your browser makes this:

I feel like e.e. cummings but everyone hates C A P I T A L S online anyway.

If you come from the word processor world, this behavior can be startling. Actually, it gives you a great deal of freedom.

Paragraphs

But you probably still want paragraphs. Here they are: <p> and </p>.

<p>This is a paragraph.</p><p>This is another paragraph, even though 
it's on the same line.

And even though I just entered two line breaks, this is still part of
paragraph two. Now I shall close paragraph two.</p>

Look carefully at the <p> and </p> tags, then see what the browser does.

This is a paragraph.

This is another paragraph, even though it's on the same line. And even though I just entered two line breaks, this is still part of paragraph two. Now I shall close paragraph two.

See? The browser really does totally ignore your line breaks. It only cares about tags.

Normally, of course, the sane choice is to match your paragraphs with line breaks:

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

But the line breaks are only for you. The browser ignores them.

Adding a bunch of <p> tags can be tedious. It's one thing to add italics here and there. It's another to have to add tags every time you start a new paragraph.

But wait! There's hope! Don't run screaming back to your word processor.

Your CMS May Respect Your Blank Lines

Fortunately, some CMSs are designed to insert paragraph tags automatically for you, behind the scenes. You can simply insert a blank line between paragraphs, and the CMS does the rest.

  This is a paragraph. No tags!

  And here's <em>another</em> paragraph.

If your CMS has this feature, you'll get:

This is a paragraph. No tags!

And here's another paragraph.

Why does this work? Before the CMS spits out your article as a web page, it adds the necessary <p> tags.

Your CMS will probably do this automatically. If it doesn't, you may be able to turn on this feature.

Hit ENTER Twice for a Paragraph

In a word processor, you usually hit ENTER only once between paragraphs. The paragraphs are a single line, but the word processor wraps them.

In HTML, you want to hit ENTER twice between paragraphs. If your CMS adds <p> tags automatically, it likely expects a blank line.

HTML Line Breaks Are Different

In the browser, paragraphs have space between them. What if you just want to end a line, without having a space before the next line? No problem. There's a line break tag.

  1. About.com
  2. Computing
  3. Content Management Systems
  4. Maintain Your CMS Website
  5. HTML Tutorial for Writers
  6. Write in HTML - Paragraphs and Spacing

©2014 About.com. All rights reserved.