Paragraphs in HTML are essential tags for structuring and displaying text content on a webpage. They are created using the <p> tag. HTML paragraphs assist in dividing content into logical sections, improving readability and layout. Being block-level elements, paragraphs inherently start on a new line and come with default spacing both above and below.
Syntax
<p>This is a paragraph.</p>
The content between the tags, which is supposed to be a paragraph, is enclosed in the <p> element. It is a paired tag, which implies that it has opening <p> and closing </p> tags.
Note: If we are using various <p> tags in one HTML file, then the browser automatically adds a single blank line between the two paragraphs.
Example
<p>This is first paragraph.</p>
<p>This is second paragraph.</p>
<p>This is third paragraph.</p>
Output:
This is first paragraph.
This is second paragraph.
This is third paragraph.
Explanation
Each paragraph begins on a new line, allowing the browser to insert vertical space between them, thereby creating a visual distinction.
Space inside HTML Paragraph
When excessive spaces are inserted within the HTML paragraph tag, the browser eliminates additional spaces and lines when rendering the content. Instead, the browser interprets multiple spaces and lines as a single space.
Example
<p>
I am
going to provide
you a tutorial on HTML
and hope that it will
be very beneficial for you.
</p>
<p>
Look, I put here a lot
of spaces but I know, Browser will ignore it.
</p>
<p>
You cannot determine the display of HTML</p>
<p>because resized windows may create different result.
</p>
Output:
I am going to provide you a tutorial on HTML and hope that it will be very beneficial for you.
Look, I put here a lot of spaces but I know, Browser will ignore it.
You cannot determine the display of HTML
because resized windows may create different result.
The browser eliminates any additional lines and unnecessary spaces, as demonstrated here.
How to Use <p> and <br> tag with paragraph?
An HTML <br> tag is used for line break and it can be used with paragraph elements. Following is the example to show how to use <br> with <p> element.
Example using <br> tag
Example
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2> Use of line break with paragraph tag</h2>
<p><br>Papa and mama, and baby and Dot,
<br>Willie and me?the whole of the lot
<br>Of us all went over in Bimberlie's sleigh,
<br>To grandmama's house on Christmas day.
</p>
</body>
</html>
Output:
Use of line breaks with a paragraph tag
Papa and mama, and baby and Dot,
Willie and me?the whole of the lot
Of us all went over in Bimberlie's sleigh,
To grandmama's house on Christmas day.
The HTML <hr> element is utilized to insert a horizontal line between two sections or paragraphs. Below is a demonstration illustrating the application of the <hr> tag within a paragraph.
Example using <hr> tag
Example
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2> Example to show a horizontal line with paragraphs</h2>
<p> An HTML hr tag draw a horizontal line and separate two paragraphs with that line <hr> it will start a new paragraph.
</p>
</body>
</html>
Output:
Example to show a horizontal line with paragraphs
An HTML hr tag draw a horizontal line and separate two paragraphs with that line.
________________________________________
It will start a new paragraph.
<pre> Tag for Preformatted Text
The <pre> element assists in encoding various formatting elements such as multiple spaces, line breaks, and other formatting elements.
Example
<pre>
My C# Tutorial lies over the ocean.
My C# Tutorial lies over the sea.
Oh, bring back my C# Tutorial to me.
</pre>
Output:
My C# Tutorial lies over the ocean.
My C# Tutorial lies over the sea.
Oh, bring back my C# Tutorial to me.
Explanation
The <pre> tag is designed to retain the exact formatting of text, including spaces and line breaks. It is particularly useful for preserving the structure of poetry, code snippets, or any content that requires a specific layout to be maintained.
Paragraph alignment (CSS recommended)
Alignment of text refers to its horizontal positioning within a paragraph. While the align attribute was utilized in earlier versions of HTML, contemporary HTML relies on CSS for enhanced flexibility and cleaner code organization.
Deprecated HTML Method
In previous iterations of HTML, the align attribute was utilized to define text alignment. However, in HTML5, this attribute has been marked as deprecated.
Example
<p align="center">Centered text</p>
Preferred CSS Method
Utilizing inline CSS is the current recommended approach for aligning text within a paragraph. Options such as left, right, center, or justify can be applied for text alignment.
Example
<p style="text-align: center;">Centered text</p>
Embedding elements within paragraphs
Within HTML paragraphs, inline elements can be incorporated to enhance content. These elements allow for the inclusion of formatting tags, hyperlinks, images, or the emphasis of specific words, all while maintaining the integrity of the paragraph's layout.
Emphasis Tags
Using the <em> tag in HTML adds emphasis to text by italicizing it, whereas the <strong> tag emphasizes text by making it bold. These tags offer a meaningful method to highlight importance or emphasis in web content.
Example
<p>This is a <em>paragraph</em> with <strong>emphasized</strong> text.</p>
Links
Integrating an anchor tag within a paragraph enables the creation of a clickable link within the text of the paragraph.
Example
<p>Visit <a href="https://logic-practice.com">our website</a>.</p>
Images
The tag <img> enables the embedding of images within paragraphs on a webpage.
Example
<p>Here is an image: <img src="https://placehold.co/400x300/34495e/ffffff?text=Logo" alt="Logo"></p>
Superscript and Subscript
<sub> is used for displaying text in a subscript format, such as chemical formulas, while <sup> is utilized for displaying text in a superscript format, like exponents.
Example
<p>H<sub>2</sub>O and 2<sup>3</sup> = 8</p>
Abbreviations
The <abbr> tag provides readers with the full text of an acronym when they hover over it, aiding in better understanding of the abbreviation.
Example
<p><abbr title="HyperText Markup Language">HTML</abbr> is used for web development.</p>
Citations
The <cite> tag is typically used to denote the title of a piece of creative work, often styled in italics.
Example
<p>The novel <cite>War and Peace</cite> is a classic.</p>
Styling Paragraphs with CSS
Cascading Style Sheets (CSS) are utilized to control the appearance of HTML elements. Text blocks can be styled using inline styling, embedded stylesheets, or external stylesheets to enhance their appearance and maintain uniformity.
Inline Styling
Applies formatting directly to a paragraph, adjusting both the color and size of the font within the paragraph.
Example
<p style="color: red; font-size: 20px;">Styled paragraph</p>
Internal CSS
Apply consistent styling to all paragraphs throughout the document using the formatting specified within the <style> section located in the <head>.
Example
<style>
p {
font-size: 18px;
color: navy;
}
</style>
Using CSS Classes
The class attribute enables the application of customized styles to specific paragraphs by using CSS classes.
Example
<style>
.highlight {
background-color: yellow;
}
</style>
<p class="highlight">This paragraph is highlighted.</p>
Best practices
Nesting paragraphs should not be nested inside other paragraphs because HTML does not permit one <p> tag to be contained within another. Paragraphs may consist of text or inline elements such as <span>, <a> or <em>, but not block elements such as <div> or <table>. Also, avoid enclosing non-textual content that includes images or forms in <p> tags. Rather, more suitable semantic tags should be used. To position and arrange, use CSS rather than deprecated attributes such as align.
Supporting Browsers
| Element | Chrome | IE | Firefox | Opera | Safari |
|---|---|---|---|---|---|
<p> |
Yes | Yes | Yes | Yes | Yes |
Conclusion
HTML <p> tag is an essential device used to structure text information on a web page. Whether typing plain text, inserting multimedia, or using styles, knowing the paragraph behaviour in HTML can make your content organized, easy to read and pleasurable to the eye. Paragraphs can be even more powerful when used with other tags such as <br> and <hr>, as well as CSS styling to produce clean and professional web layouts.