HTML Paragraph
Last Updated :
26 Mar, 2024
In HTML, a paragraph (<p>) element is used to define a block of text. It is a structural element that creates a new paragraph, typically displaying text with a line break before and after.
Syntax:
<p>This is the first paragraph.</p>
Example of HTML Paragraph
Example: Here HTML with three paragraphs. Each is enclosed in <p> tags, sequentially displaying “first,” “second,” and “third” paragraphs within a webpage.
html
<!DOCTYPE html>
<html>
<body>
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
<p>This is the third paragraph.</p>
</body>
</html>
Output :
1. Closing the HTML Paragraph Element
In HTML 4 and earlier versions, closing the paragraph tag wasn’t compulsory. A paragraph could be initiated by just using a new paragraph opening tag.
Syntax:
<p>This is the first paragraph.
<p>This is the second paragraph.
Example: In this example , three paragraphs are displayed, each enclosed in <p> tags, showing “first,” “second,” and “third” sequentially, formatted according to HTML rendering standards.
html
<!DOCTYPE html>
<html>
<body>
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
<p>This is the third paragraph.</p>
</body>
</html>
Output :
2. Line Breaks in Paragraph :
In HTML, line breaks within a paragraph can be achieved using the <br> tag. This tag inserts a single line break, allowing text to continue on the next line within the same paragraph without creating a new paragraph block.
Syntax:
<p>This is the first<br> paragraph<br>
with two line breaks.</p>
Example: In this example we are using paragraphs with line breaks using the `<br>` tag, ensuring proper structure. Each paragraph contains multiple line breaks, maintaining readability and adhering to HTML formatting standards.
html
<!DOCTYPE html>
<html>
<body>
<p>
This is the first<br />
paragraph<br />
with two line breaks.
</p>
<p>
This is the second <br />
paragraph<br />
with three<br />line breaks.
</p>
</body>
</html>
Output :
3. Comments in HTML
In HTML, comments are used to add notes or annotations that are not displayed in the web browser. They are enclosed within <!– and –> and ignored during rendering.
Syntax:
<p>This is the first paragraph.
<p>This is the second paragraph.
Example: In this example the HTML comments are marked by <!– and –>. They’re single-line or multiline for detailed explanations. In rendered webpages, comments don’t appear. They’re handy for documenting code and leaving notes.
html
<!DOCTYPE html>
<html>
<body>
<!-- This is a comment -->
<p>This is a paragraph.</p>
<!--
This is a multiline comment
used to provide detailed explanations
-->
<p>This is another paragraph.</p>
</body>
</html>
Output :
4. The PRE Element in HTML
The <pre> element in HTML is used to define preformatted text, preserving both spaces and line breaks. It’s commonly used for displaying code snippets or text with a specific formatting that needs to be maintained.
Syntax:
<pre> Contents... </pre>
Example: The example includes an <h3> heading for “Twinkle Twinkle Little Star”. Preformatted text <pre> preserves line breaks and spaces, displaying the lyrics without additional formatting.
html
<!DOCTYPE html>
<html>
<body>
<h3>Twinkle Twinkle Little Star</h3>
<pre>
Twinkle, twinkle, little star
How I wonder what you are
Up above the world so high
Like a diamond in the sky
</pre
>
</body>
</html>
Output :
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...