Paragraph <p> tag and Pre tag in HTML

This post “Paragraph tag and <pre> tag” explains clearly about formatted text, Unformatted text and preformatted text in HTML pages using <p> tag and <pre> tags with suitable examples.


 

UN formatted text:

  • When we run the above document, it will not display the information how we formatted.
  • HTML collapses white space, which means that all our text will collapse into a single
    paragraph.

<html>
<head> <title>Conversation </title> </head>
<body>
Syam: Hi, this is Syam.
Sidhu: Hi, I’m Sidhu…
Syam: How is the tutorial channel?
Sidhu: java2python.com website and java tutorial blog channel for videos. I didn’t go through
well.
Syam: It seems to be good
Sidhu: I wil check out myself.
</body>
</html>

 

Note : Here we can use paragraph tag <p> to arrange the conversation instructions in a proper way.

<html>
<head> <title>Conversation </title> </head>
<body>
<p>Syam: Hi, this is Syam.</p>
<p>Sidhu: Hi, I’m Sidhu. </p>
<p>Syam: How is the tutorial channel ?</p>
<p>Sidhu: java2python.com website and java tutorial blog channel for videos. I didn’t go
through well.</p>
<p>Syam: It seems to be good</p>
<p>Sidhu: I wil check out myself.</p>
</body>
</html>

 

  • Most of the people will think that instead of using <p> tag, it is better to use <br/> to send the control to new line.
  • <p> tag is the non-empty element, we need to use start tag & end tag.
  • <br> tag is empty element.
  • but <br/> tag send the control to immediate line to display the next instruction information where as <p> tag provides a line gap.

<html>
<head> <title>Conversation </title> </head>
<body>
<p>Syam: Hi, this is Syam<br/>
<p>Sidhu: Hi, I’m Sidhu.<br/>
<p>Syam: How is the tutorial channel ?<br/>
<p>Sidhu: java2python.com website and java tutorial blog channel for videos. I didn’t go
through well<br/>
<p>Syam: It seems to be good<br/><p>S
idhu: I wil check out myself<br/>
</body>
</html>

 

HTML <pre> Tag :Pre formatted text.

  • Pre-formatted text.
  • Text in a <pre> element is displayed with pre-defined format.
  • It is in a fixed-width and font (usually Courier), and it preserves both spaces and line breaks.

<!DOCTYPE html>
<html>
<body>
<pre>
Text displaying with pre
tag will be displayed on
web page with a fixed width,
font, spaces and line breaks.
</pre>
</body>
</html>

Default CSS Settings for <pre> tag :
  • Most browsers will display the <pre> element with the following default values.
    display: block;
    font-family: monospace;
    white-space: pre;
    margin: 1em 0;

> DOCTYPE Tag in HTML <

Share this