HTML Paragraphs

HTML Paragraphs are one of the core HTML elements. Learning how to use paragraph is important.

Paragraphs align sentences with common ideas. In HTML you can define a paragraph using the <p> tag. The <p> tag is a block level element and do not have any default formatting assigned except some whitespaces at the beginning and the end.

Paragraphs group content cohesively and you can also add various inline elements, images, form fields and more within a paragraph. A proper use organizes the content and optimizes readability for users and screen readers as well.

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

As <p> tags do not have any specific formatting, even using <div> tag instead produces the similar result. Please remember that <p> tag is utilized by search engines and assistive technologies so using proper semantics is important.

Defining a paragraph

The code below displays how we define a paragraph in HTML and the resulting output. You can see how we have used the <p> tag.

Example
<!DOCTYPE html>
<html>
<head>
     <title>HTML Paragraphs</title>
</head>
<body>
  <h1>Defining a Paragraph in HTML</h1>
  <p>A paragraph contains a block of text and this is how we define a paragraph in HTML.</p>
	
</body>
</html>
HTML Paragraphs

Please note that the paragraph tags do not preserve multiple spaces or line breaks within them. Any amount of blank spaces in the syntax will be replaced with just one space in the output.

Preserving Spaces & Line Breaks

Web browsers treats multiple spaces or line breaks as just one. For example if you add multiple spaces or line breaks within a paragraph, it will just collapse to one. The below demonstration will clarify what it means.

Example
<!DOCTYPE html>
<html>
<head>
     <title>Collapsing Spaces &amp; Line Breaks</title>
</head>
<body>  
  <p>This paragraph has   so     many     spaces      and
  
  multiple line
  
  breaks but      HTML does not seem to care about it.
  </p>	
</body>
</html>

Take a look at the output below, you won't see all those extra spaces and line breaks for the reason aforementioned. This behavior can sometimes be tricky and what if you want some extra spaces or may be line breaks as shown above in the rendred HTML output.

Result : HTML Paragraph

Non-breaking space

We can preserve spaces within our HTML document by using a non-breaking space. A non-breaking space, denoted by &nbsp; is an HTML entity that you can use within HTML to create a "space" that doesn't collapse.

&nbsp;

Line Breaks : <br> Tag

HTML has a dedicated tag to create a line break, it is the <br/> tag. You can use this tag anywhere in your HTML document to create a line break.

<br/>

Now that we know how to preserve spaces and line breaks, lets use the methods above and see it in action. Take a look at the code below and see how we have used the &nbsp; and <br> tags to add spaces and line breaks.

Example
<!DOCTYPE html>
<html>
<head>
     <title>Collapsing Spaces &amp; Line Breaks</title>
</head>
<body>  
  <p>This paragraph has &nbsp;&nbsp; so &nbsp;&nbsp;&nbsp; many     spaces &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; and <br/> <br/> multiple line
  <br/> <br/> breaks and &nbsp;&nbsp;&nbsp; HTML does seem to care about it.
  </p>	
</body>
</html>

The result:

Using the <pre> tag

Apart from all the techniques mentioned above. There is another way to preserve spaces and line breaks. This time its through the <pre> tag. Unlike the paragraph <p> tag, the preformatted <pre> tag preserves all the spaces, tabs, and line breaks and other formatting characters. The content is generally rendered using a monospaced font. The example below will make it clear.

Example
<!DOCTYPE html>
<html lang="en-US">
    <head>
        <title>Using the Pre Tag</title>
    </head>
    <body>
      <pre>
        The    Pre     Tag
        seems to care about spaces and line
        
        breaks.
      </pre>
    </body>
</html>

See how the spaces and line breaks are preserved when we use the <pre> tag. Please note that the <pre> tag is used generally when we need to display source codes, every code block that you see on this page or other makes use of the <pre> tag.

Conclusion

In this lesson, you learnt how to create paragraphs, preserve line breaks and spaces and so much more. In the next section we'll take a look at some formatting elements.