HTML Paragraphs

Paragraph is the most frequently used text in the web site. A paragraph comprises of few sentences and expresses a single thought.

Browsers handle texts differently

When displaying texts, web browsers don’t care the line breaks and multiple spaces between words that you written in your HTML codes. Rather, when texts reach the edge of the browser, the browser automatically add a line break and displays remaining text from the next line. Also, browsers automatically convert multiply spaces between words to one. So how we’ll display paragraphs in the browser?

Use p element to create paragraphs

To display a block of texts as paragraph in the browser, add <p> tag before the text block and </p> tags after that text block. See the example below-

…
<body>
    <p>This is an example of paragraph.</p>
    <p>This is an example of paragraph.</p>
</body>
…

See the output below-

This is an example of paragraph.

This is an example of paragraph.

By default, most browsers add a line break and a full line of white space after a paragraph.

Closing </p> tag is optional but highly recommended to use

You may not mention the end </p> tag if there are some other elements after the paragraph like another paragraph, form, headings, any sectioning content, list, table etc. When these elements start, the previous paragraph automatically ends. But, it is highly recommended that you’ll add the closing tag. It’s a good practice. Think, if you remove the next element after paragraph or reposition that element somewhere, your paragraph may not display properly.

Don’t use p element to add vertical spaces

As p element adds one blank line after the paragraph, you may tend to add this element to add vertical spaces. Don’t abuse this element in this way. You can add any amount of vertical space with CSS. Also, some WYSIWYG editors may add p element when you try to add padding after content. Pay close attention here.

Don’t use p element to add a line break

If you want to end a line and start adding text from the next line, don’t you use p element. When you write anyone’s address, this situation come. See the following example.

Name: Harry K. Bolick
Flat: 2238 Gnatty Creek Road
State: Manhattan, NY
Country: USA

Here, each part of the address starts in a the separate line. To mention a line break, use <br /> tag.  See the code below-

…
 <p>Name: Harry K. Bolick <br />
 Road: 2238 Gnatty Creek Road <br />
 State: Manhattan, NY <br />
 Country: USA
 </p>
 …

If you used p element instead of <br /> tag, it would add extra spaces between lines. <br /> tag will not add any extra space between lines.