HTML Paragraphs

  • So this would be the most important to know that how a normal text should be written.
  • You may write the text without using any special tag for it but there will be a lot of problem while formatting it, setting its positions and other important functions.
  • <p> tag is used for enclosing a paragraph.
  • Keep in mind to close this tag when you have completed your paragraph. If not done, all the content after this paragraph may be disturbed.
  • <p> Doesn't preserve the spaces and line breaks. It considers all consecutive spaces and line changes, as a single space. It means no matter how many time space and enter are pressed between two words; it will show only a single space between those words in output.

Syntax:



<p>Text Here </p>


Example



<!DOCTYPE html >
<html>
<body>
<p>This is the first paragraph.</p>
<p>This is
the second
paragraph.</p>
</body>
</html>


To see live output : Visit Try Yourself Editor

Output





In above example, two paragraphs are written. Both are same in output though they are written differently in input. The fact is, <p> tag never notices how the text is written, it only shows it in a single line.



Always Use the End Tag



  • Always use the end tag.Forgetting the end tag can produce unexpected results or errors.
  • Most browsers will display HTML correctly even if you forget the end tag, but do not depend on it.

Example



<!DOCTYPE html >
<html>
<body>
<p>This is the first paragraph.
<p>This is the second paragraph
</body>
</html>


To see live output : Visit Try Yourself Editor

The example above will work in most browsers, but for better results do not use this.

Line Break tag



  • Line changing is not natural in HTML coding.
  • Use <br> if you want a line break (a new line) without starting a new paragraph.
  • Thus a particular tag is used for line breaking, that is <br>

  • This is used as single tag, not in pair.

Syntax:



<br />


Example



<!DOCTYPE html >
<html>
<body>
<p>This is the first paragraph.</p><br /><br />
<p>This is<br />the second
paragraph.</p>
</body>
</html>


To see live output : Visit Try Yourself Editor

Output





In above example-

As <p> tag doesn't changes line according to enters, so we have used <br> to change the line. And Two <br> tags are used between two <p> tags and in the output, second paragraph is displayed after two line breaks.

Preformatted Text (<pre> tag)



  • As described, <p> tag doesn't preserve spaces and line breaks.
  • <pre> tag is there for preformatted text i.e. to preserve your spaces and line breaks. It shows the text in output as it is written in input.
  • It has a common font always, normally "Courier".

Syntax:



<pre>Text Here </pre>


Example



<!DOCTYPE html>
<html>
<body>
<pre>This is    pre formatted text.
It has preseved
both the    spaces and line breaks.</pre>
</body>
</html>


To see live output : Visit Try Yourself Editor

Output