A paragraph is composed of a sequence of sentences that define a particular topic. It may consist of line spaces and line breaks. Paragraphs must be organized and coherent and related to the topic. When we code a paragraph in HTML, the spaces and line breaks do not appear on the web page. To make it happen, several HTML elements serve the purpose.

The outcomes of this blog are:

• How to add a paragraph in HTML?
• How to add line breaks and spacing in HTML?
• How to display preformatted text in HTML?

How to Add a Paragraph in HTML?

In HTML, inside the body element, create a div element with the class name “main”. This <div> element contains <p> tag to add some content to the HTML page.

Here is the code:

Let’s apply CSS styling properties to the HTML elements.

Style main div

The properties applied to the <div> main are explained below:

• “width” property sets the width of the div element to 400px.
• “background-color” property sets/apply the background color to bisque.
• “height” property sets the height of the div element to 150px.
• “margin” with value “auto” places equal space around the div main.
• “text-align” property aligns the text in the center or mid of the element.
• “padding” attribute with the value “60px” adds/includes 60px spaces around the element’s content.
• “font-family” is set as sans-serif, Geneva, Verdana, Tahoma. This list of styles is provided to ensure that if the browser does not support the first style, others will be applied.
• “font-size” property adjusts the size of the text to 20px.
• “font-weight” property with the value bold makes the font bold.

Output

So, the image clearly shows there exists no line break.

How to Add Line Breaks and Spacing in HTML?

The HTML “<br>” tag, known as the “line break” element, adds a break between the lines of the paragraph.

Analyze the example below!

Example 1: Add Line Breaks and Spacing in a Simple Line
The above HTML code is modified by providing the <br> tag in the <p> element like this:

As a result, the line break will be added after the first two words of the paragraph:

In the next example, we will see the practical implementation of adding line breaks and spacing in a poem.

Example 2: Add Line Breaks and Spacing in a Poem
A poem consists of line breaks to set the poem’s rhythm. Line breaks also serve the function of representing where to speed up, slow down, and more. So, we have used a poem as an example.

The first part only displays the poem without any line breaks and spacing properties. In the next section, we will add the properties to see the difference:

Initially, the poem will be displayed as shown below:

Now, at the end of each line, we have placed
tags and also added one line space between the lines intentionally.

HTML

It can be observed that the <br> tag has successfully broken the line. Still, the one line space has not been added:

To handle this particular situation, the HTML <pre> tag can be utilized.

How to Display Preformatted Text in HTML?

The HTML “<pre>” element is utilized to specify the preformatted text and display the content as it is written in HTML. It holds the properties of line spaces as well as line breaks.

Now, add the previous HTML code within the <pre> tag:

Output

So, in this way, we can provide line spaces and breaks in our HTML page.

Conclusion

In HTML, the spaces and line breaks are omitted. To add them to the document, utilize the HTML line breaks and space elements. The line break can be specified by the “<br>” tag, and to display the content with line spacing and breaks, the HTML “<pre>” tag is used. This blog offered instructions for adding line breaks and space in an HTML document.