<p> tag is used to create paragraphs. For example,
<p>HTML is fun to learn.</p>
As we can see, a paragraph starts with the
<p> and ends with the
HTML paragraphs always start on a new line. To demonstrate this, let's create a webpage with two paragraphs.
<p>Paragraph 1: Short Paragraph</p> <p>Paragraph 2: Long Paragraph, this is a long paragraph with more text to fill an entire line in the website.</p>
The above HTML code contains two paragraphs. And each paragraph starts on a new line even though there is sufficient space after the first paragraph.
Note: By default, browsers automatically add whitespace (margin) above and below paragraphs. It is possible to change whitespace and other design aspects using CSS.
HTML Paragraphs and Spaces
Paragraphs automatically remove extra spaces and lines from our text. For example,
<p> The paragraph tag removes all extra spaces. The paragraph tag also removes all extra lines. </p>
Here, the output
- remove all the extra spaces between words
- remove extra lines between sentences
Note: It's possible to add extra spaces and lines in HTML, which we will discuss later in this tutorial.
Adding Line Breaks in Paragraphs
We can use the HTML line break tag,
<br>, to add line breaks within our paragraphs. For example,
<p>We can use the <br> HTML br tag <br> to add a line break.</p>
Note: The <br> tag does not need a closing tag like the <p> tag.
Pre-formatted Text in HTML
As we have discussed, paragraphs cannot preserve extra lines and space. If we need to create content that uses multiple spaces and lines, we can use the HTML <pre> tag.
<pre> tag creates preformatted text. Preformatted texts are displayed as written in the HTML file. For example,
<pre> This text will be displayed in the same manner as it is written </pre>
Other Elements Inside Paragraphs
It's possible to include one HTML element inside another. This is also true for
<p> tags. For example,
<p> We can use other tags like <strong>the strong tag to emphasize text</strong> </p>
In the above example, we have used the
<strong> tag inside the
Browsers automatically make the contents inside
<strong> tags bold.
Paragraph is Block-level
<p> tag is a block-level element. It starts on a new line and takes up the full width (of its parent element).
Note: Keep note of which elements are inline-level and which are block-level. It will be important later when we learn CSS.
Add Extra Space Inside Paragraphs
As discussed earlier, we cannot normally add extra empty spaces inside paragraphs. However, we can use a certain HTML entity called non-breaking space to add extra spaces. For example,
<p>Extra space inside a paragraph</p>
is an HTML entity, which is interpreted as a space by browsers. This allows us to create multiple spaces inside paragraphs and other HTML tags.