HTML - SPLessons

HTML Paragraph

Chapter 11

SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

HTML Paragraph

HTML Paragraph

shape Introduction

This chapter demonstrate about the HTML Paragraphs. The content in a html document are divided into paragraphs. Following are the concepts covered.

  • Paragraphs

Paragraphs

shape 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.

<!DOCTYPE html>
<html>
	<body>
		<p>1st paragraph.</p>
		<p>2nd paragraph.</p>
		<p>3rd paragraph.</p>
	</body>
</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.

<!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>

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.

<!DOCTYPE html>
<html>
	<body>
		<p>The<br>paragraph<br>with line<br>breaks</p>
	</body>
</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.

<!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>

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.

<!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>

Result
By running the above code in a preferred browser user can get the following output as shown in below image.

Summary

shape 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.