Introduction
This chapter demonstrate about the HTML Paragraphs. The content in a html document are divided into paragraphs. Following are the concepts covered.
- Paragraphs
Description
In order to define the paragraph user need to use <p> tag. Whatever the content written in <p> tag that get displayed on the web page and by default the browser add some space in between the paragraphs. The code below demonstrate the paragraph tags in HTML.
[html]
<!DOCTYPE html>
<html>
<body>
<p>1st paragraph.</p>
<p>2nd paragraph.</p>
<p>3rd paragraph.</p>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
If html document have some extra spaces and extra lines browser will remove all those things and get displayed in a single line as shown in below code.
[html]
<!DOCTYPE html>
<html>
<body>
<p>
The paragraph contains
several lines
but the browser ignored these lines
and get displayed
in single line.
</p>
<p>
The paragraph contain
many blank spaces
browser will ignored these
spaces and get displayed in
single line.
</p>
<p>
The number of lines in a paragraph depends on the size of the browser window. If you resize the browser window, the number of lines in this paragraph will change.
</p>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Line Breaks
Line breaks is represented with <br> tag. By using the <br> tag the line get break and get continue in next line in the same paragraph as shown in the below code.
[html]
<!DOCTYPE html>
<html>
<body>
<p>The<br>paragraph<br>with line<br>breaks</p>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
The browser display several lines in a single line even though given in different lines, but output get displayed without proper width and font as shown in the below code.
[html]
<!DOCTYPE html>
<html>
<body>
<p>The pre tag preserves both spaces and line breaks:</p>
Splessons HTML Tutotial.
Splessons HTML5 Tutotial.
Splessons Java Tutotial.
Splessons c++ Tutotial.
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
In order to overcome the above problem and to display the content with fixed width and font, use the preformatted tag i.e <pre> tags as shown in below code.
[html]
<!DOCTYPE html>
<html>
<body>
<p>The pre tag preserves both spaces and line breaks:</p>
<pre>
Splessons HTML Tutotial.
Splessons HTML5 Tutotial.
Splessons Java Tutotial.
Splessons c++ Tutotial.
</pre>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Key Points
- <br> element does not have the end tag.
- Don’t forget to put the end tags.
- User cannot change the output by adding the extra spaces it depends on the screen size.