Paragraphs and breaks

Paragraphs are your friends

The most common basic element found in the code a web page is the paragraph tag. However, even this simple element has a troubled past and is sometimes still prone to being ignored and misunderstood.

In the early days of the web the paragraph tag was an under-developed and mixed-up kid. Some authors didn't bother with them at all, even though their pages looked to be full of paragraphs. Since the earliest versions, web browsers have assumed that anything which isn't tagged in any other way must be a paragraph, so authors tended to leave them out. And even when authors did include them there was confusion about how they should be used.

Some authors used the paragraph tag like a carriage return at the end of each paragraph. In this method the text would start without an opening tag then, when the paragraph was ended, a <p> tag was used before starting the next paragraph—again without an opening tag.

Another method was to start the text without a tag and then—when a new paragraph was required—the author used a couple of break tags—one to end the paragraph and the second to make a line space before the next paragraph.

A variation on the break method is to wrap the whole lot in a paragraph tag.

As if the poor overworked little break hasn't been asked to do enough, some old pages can still be found which use breaks at the end of each line of every paragraph! This is a result of authors thinking like typewriters and you can almost hear the "ping!" when the end of each line is reached (yes, thank you for spotting that I'm old enough to have used a manual typewriter). There is a use for this technique (see below) but wrapping blocks of text isn't it.

The kid grows up

While the methods described above are not really wrong in themselves, and many pages include them quite happily without their readers having seizures or their authors being incarcerated, like the list example given elsewhere these methods miss a trick or two.

The paragraph is a block-level tag and these days we like to enclose every paragraph using an opening and closing paragraph tag. By "every paragraph" we of course mean every chunk of text which is to be rendered in the browser as a single separate paragraph and which is not already a heading or list or some other format. Also, in the source code itself white space may be used in order to work more clearly, but we can be confident that creating paragraphs in the source such white space will be ignored by the browser.

Paragraph power

Once we have paragraphs of text cosily nestled between <p> and </p> they become more powerful.

By adding a class or id to the opening tag we can address a specific paragraph (but we're getting ahead of ourselves here and I haven't got time to write this bit up right now—it's cool though and worth waiting for!).

We need breaks (but not too many)

The break is an inline tag and comes in two varieties depending on whether we are writing HTML or XHTML. The older form is <br> (or <BR>) but we intend to mostly write XHTML these days so the form is <br /> (there's a space before the "/"). It is also usually written as a single tag—it closes itself rather than having a closing version—although it's not forbidden to use <br></br>.

While we don't want to use breaks to make our paragraphs, they can't skip off just yet—the humble break tag still has a useful job to do, but this time it's the job it was trained for.

Let's say the muse is upon us and we have a bee in our bonnet about writing a sonnet. We've already learned that the contents of a paragraph will have a line as long as the window allows:

but in our poetic mood we need a shorter line:

which is achieved using break tags:

so we use an opening paragraph tag (<p>) followed by the first line of text which is finished with a break (<br />) tag, and then we carry on in the same manner until we end the paragraph gracefully with a closing </p>.

The eagle-eyed reader will have noticed that there is no break tag on the last line, this isn't needed since the closing </p> takes up the baton at that point. (The eagle-eyed and literate reader will have noticed that the example isn't a sonnet at all, but we'll skirt around that.)

The break tag is only small, so it's duties are light. It shouldn't be used for lists as we have a specially trained team of tags for that job, and it's no longer needed for adding space between elements because we have other powerful methods of achieving that. Apart from setting poetry it's other job is when we occasionally need to force some text onto the next line, such as in an address:

but even this job can be handled better another way if we need to do it often.

Validate: XHTML CSS

This page was last updated when I had time.

All material in this web site which was originally created by me is © Philip King 2003 and licensed under a Creative Commons License.

These pages hosted by GreenNet.