HTML Paragraph Element | HTML
Tag
The HTML paragraph, designated by the <p> tag, is one of the most commonly used elements in web pages. The p tag is a block-level element used to define paragraphs in a webpage.
A block element typically starts on a new line and stretches the full width of its container. To create a paragraph, add <p> in the body of the HTML document, type the content of the paragraph, and add </p> to close that paragraph.
The basic syntax for creating a paragraph in HTML is straightforward:
<p>content</p>
Here, an HTML <p> tag indicates the starting of a new paragraph and </p> indicates the closing of that paragraph. Everything written between these two tags is part of the paragraph and web browsers display it as such.
Here’s a simple example to illustrate this:
<!DOCTYPE html>
<html>
<head>
<title>Paragraph Example</title>
</head>
<body>
<p>This is the first paragraph.</p>
<p>This is the second paragraph, which is separate from the first.</p>
</body>
</html>
In this example, there are two paragraphs. Each one starts with <p> and ends with </p>. The text between these tags is displayed as a distinct paragraph by the browser. This is the fundamental way to create paragraphs in HTML, ensuring that textual content is well-organized easy to read and understandable.
When a web browser, such as Google Chrome, Firefox, etc. renders this HTML code, it displays the text within the <p>…</p> tags as paragraphs. The browser will automatically apply default styling to the paragraph to improve readability. It adds default font-size, a line break, and a full line of white space after every paragraph i.e. margin space above and below it to separate it from other elements. However, we can change it using CSS. Look at the output of the above code.
[adinserter block=”5″]
Output:
This is the first paragraph.
This is the second paragraph, which is separate from the first.
The output in the web browser is shown in the below picture:
Space Inside HTML Paragraph
If you put a lot of spaces inside the HTML p tag, browser removes extra spaces and extra line while displaying the page. When we put multiple spaces or line breaks within the content of an HTML <p> tag (or almost anywhere in HTML content), the web browser automatically removes these extra spaces and extra line while displaying the web page.
The browser counts number of spaces and lines as a single space in the rendered page. However, this rule is not applicable in certain tags like <pre>, which preserves whitespace and formatting as it is.
For example, if we write the following HTML paragraph:
<p>This is an example of paragraph with multiple spaces.</pre>
The browser will display it as:
This is an example of paragraph with multiple spaces.
Similarly, if we try to add multiple line breaks in a row within a paragraph like this:
<p>This is an example of paragraph
with multiple line breaks.</p>
[adinserter block=”2″]
Then, the browser will still display it as a single line of text, because the web browser converts all these whitespace characters (spaces, line breaks, tabs, etc.) into a single space when displaying the content.
How to Use <br> tag within Paragraph?
You can use an HTML <br> tag for line break if you need to add actual line breaks in the HTML paragraphs that are preserved in the browser display. Here is an example to show how to use <br> tag with <p> element:
<!DOCTYPE html>
<html>
<head>
<title>Paragraph Example</title>
</head>
<body>
<h2> Use of line break within a paragraph element</h2>
<p><br>John is a good boy,
<br>He lives in USA,
<br>and does job in MNC company.
</p>
</body>
</html>
The following output will display on the browser:
Output:
Use of line break within a paragraph element
John is a good boy,
He lives in USA,
and does job in MNC company.
In this example, we have inserted the <br> tags are inserted to break lines within a paragraph. The <br> tag allows us to create a line break without the additional space. It is very useful for formatting addresses, poems, or any other content where the line breaks are significantly important for the readability.
How to Insert Multiple Spaces within a Paragraph in HTML?
To add multiple spaces within a paragraph in HTML, we can use the HTML entity “ ”. An HTML entity “ ” represents a non-breaking space character. It stands for “non-breaking space.”
Unlike regular spaces, which are converted into a single space when rendered by a browser, each non-breaking space “ ” is preserved in the output. This means that if we use multiple entities in a paragraph, the browser will display the paragraph with the same number of spaces and these spaces will not be converted into a single space.
The HTML “ ” entity is especially useful in a few specific scenarios, such as:
- Preventing automatic line breaks
- Creating indentations or specific spacing
- Aligning text
Here’s an example of how to use non-breaking space “ ” character to include multiple spaces in a paragraph:
<!DOCTYPE html>
<html>
<head>
<title>Multiple Spaces in Paragraph</title>
</head>
<body>
<h1>Multiple Spaces in a Paragraph</h1>
<p>This is a simple example of how to add multiple spaces within a paragraph using an HTML entity &nbsp;.</p>
</body>
</html>
In this example, we have used multiple times to create extra spaces between words within the paragraph. Each represents a single non-breaking space. We can create wider spaces by using multiple times together. The output will display on the web browser as shown below:
Use of <hr> tag within Paragraph in HTML
We can use an HTML <hr> tag to show a horizontal line between two statements or two paragraphs. We can also use it to create a separation in other block-level elements. Here’s a simple example of how to use the <hr> tag effectively to separate content or paragraphs:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Understanding the use of HR Tag</title>
</head>
<body>
<h1>Example to show a horizontal line between paragraphs</h1>
<p>This is a paragraph before the horizontal line.</p>
<!-- HR tag to show horizontal line -->
<hr>
<p>This is a new paragraph after the horizontal line.</p>
</body>
</html>
In this example, we have used the horizontal line <hr> tag between two <p> tags to visually separate the paragraphs. The output will look like this in the web browser.
Remember, the <hr> tag is a self-closing tag, meaning it does not need an ending tag. It is simply <hr> and not <hr></hr>. We can customize its appearance with CSS.
In this tutorial, we have discussed the HTML paragraph element, which is created by <p> tag. Paragraphs may contain text, links, images, and other inline elements (called phrasing content). They may not contain headings, lists, sectioning elements, or any other elements that typically create a new block of contents within the document by default. Hope that you will have understood the basic points of creating paragraphs and practiced all examples.
Thanks for reading!!!
