Write in HTML: Paragraphs and Spacing

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 parchment, 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:

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.

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:

and

Look carefully at the

and

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:

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

Adding a bunch of

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.

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

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

tags automatically, it likely expects a blank line.