Is there any reason for using tag instead of tag in html

Question

I am a beginner in HTML and haven't started learning CSS yet. Is there any reason where one would prefer to use <p> tag instead of <pre> tag? I mean since <pre> covers everything <p> does and more.

Answer 1

I would use <p> for paragraphs and <pre> for pre-formatted text.

They are nothing like each other other than sharing the first letter :-)

From those links:

A paragraph is typically a run of phrasing content that forms a block of text with one or more sentences that discuss a particular topic, as in typography, but can also be used for more general thematic grouping. For instance, an address is also a paragraph, as is a part of a form, a byline, or a stanza in a poem.

The pre element represents a block of preformatted text, in which structure is represented by typographic conventions rather than by elements.

Answer 2

Both tags are different i.e. <p> and <pre> they consist of there few pre-defined properties. You will find more use of <p> tag than <pre>.

You could try that, no use of css for now as you are working with HTML pre and p tags, css is used for styling that tag.

<pre> - is a pre-formated text, so you get same output as you have assigned to your text, i.e. if there is space in text than same output will be seen on webpage.

<p>
This is Demo Text. This is Demo Text. This is Demo Text. This is Demo Text. This is Demo Text.
</p>

<pre>  
This is Demo Text. This is Demo Text.
This is Demo Text. This is Demo Text. This is Demo Text.
</pre>

Default p and pre css properties,

p {
display: block;
margin-before: 1em;
margin-after: 1em;
margin-start: 0;
margin-end: 0; 
}
pre {
display: block;
font-family: monospace;
white-space: pre;
margin: 1em 0;
}

Answer 3

The <p> tag defines a paragraph.

Browsers automatically add some space (margin) before and after each <p> element while, the <pre> tag defines pre-formatted text.

Text in a <pre> element is displayed in a font (usually Courier), and it preserves both spaces and line breaks.

<p> tag takes the whole space available while <pre> is usually displayed in fixed width.

Answer 4

The most noticeable visual distinction between <p>..</p> and <pre>..</pre> elements is that when a browser displays text content written inside <pre> tags the text formatting of the HTML file itself will affect how that text is displayed in the browser.
i.e. when text is wrapped in <pre> tags newlines and white space from the HTML file will be displayed in the final rendered result.
When a browser parses HTML white space and newlines outside, or inside tags (which includes <p> tags) will be ignored by the parser (well the first space character between words will be recognised - then subsequent spaces ignored).
<pre> is an exception to this normal parsing behaviour.
I.e. to show a new line in a <p> you would need to specifically add a <br> tag.

As mentioned in the comments below, the primary job of markup tags (HTML is markup) is to describe or classify the content inside, for example how much white space is contained in a HTML file would not necessarily be important to a text to speech screen reader, however whether text is contained inside <p> tags is meaningful - it tells the screen reader this is part of the main body of text.
Therefore it is important that the tag used is appropriate and matched to its content, visual styling and other "downstream" processing should be considered secondary.
This is because these downstream processing tasks such visual styling, text-to-speech, search engine crawling and indexing etc, rely on the markup to be accurate.
All of these downstream processing tasks will be less reliable and problematic if the markup was not properly formed in the first place.