Summary -

In this topic, we described about the below sections -

Paragraphs plays important role to create the web page with content. HTML supports two ways to represent the paragraphs in web page.

  1. <p> tag
  2. <pre> tag

<p>

Paragraph. HTML paragraphs are defined by using <p> tag. <p> tag can be used to create different paragraphs in wed document.

The paragraph content will go in between opening <p> tag and closing </p> tag. Browsers automatically add a line in between the each paragraph.

The closing tag can be ignored if the <p> element is immediately followed by an <address>, <article>, <aside>, <blockquote>, <div>, <dl>, <fieldset>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hgroup>, <hr>, <main>, <nav>, <ol>, <p>, <pre>, <section>, <table>, or <ul>, element.

If any other tag is following except the above, then end tag is mandatory.

Syntax -

<p>.. text here.. </p>

Example -

<!DOCTYPE html>
<html>
	<head>
		<title>Paragraph tag example..</title>
	</head>
	<body>
		<p>First paragraph text here…</p>
		<p>Second paragraph text here…</p>
		<p>Third paragraph text here…</p>
	</body>
</html>

Output -

First paragraph text here…

Second paragraph text here…

Third paragraph text here…

<pre>

Preformatted text in HTML document. HTML paragraphs are defined by using <pre> tag. But the paragraph will display as how it is formatted in HTML document.

For these cases, the paragraph content will go in between opening <pre> tag and closing </pre> tag. Browsers normally extract <pre> text in a fixed-pitched font with whitespace together and without word wrap.

The tag can be specified like <pre></pre> with the text inserted in between the opening and closing tags.

Syntax -

<pre>..text here.. </pre>

Optional Attributes -

AttributeDescriptionValues
WidthSpecifies the max number of char per line.Not supported in HTML5number

Example -

<!DOCTYPE html>
<html>
	<head>
		<title>Preserve formatting tag example..</title>
	</head>
	<body>
		<pre>First paragraph text here…
			Second paragraph text here…
			Third paragraph text here…</pre>
	</body>
</html>

Output -

First paragraph text here…
Second paragraph text here…
Third paragraph text here…