Topics

HTML Paragraphs

The <p> element in HTML denotes a paragraph.

A paragraph always begins on a new line, and browsers add white space (a margin) before and after each paragraph.

Example

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

Try with example

Output:

This is a paragraph.
This is another paragraph.

 

Display of HTML

You have no control over how HTML is rendered.

Different results will be generated by large or small displays, as well as resized windows.

You can't change the appearance of HTML by putting additional spaces or lines to the code.

When the page is displayed, the browser will manually eliminate any unnecessary spaces and lines:

Example :

<html>
<head>
<title>HTML paragraph example</title>
</head>
<body>
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>

<p>
This paragraph
contains         a lot of spaces
in the source         code,
but the        browser
ignores it.
</p>
<body>
</html>

Try with example

Output:

 

Horizontal rules of HTML

The <hr> tag is used to create a thematic break in an HTML page, and it's most commonly seen as a horizontal rule.

In an HTML page, the <hr> element is used to split material (or designate a change):

Example :

<html>
<head>
<title>HTML paragraph example</title>
</head>
<body>
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>

<p>
This paragraph
contains         a lot of spaces
in the source         code,
but the        browser
ignores it.
</p>
</body>
</html>

Try with example
 

Output :

 

Line breaks of HTML

A line break is defined by the HTML <br> element. If you want a line break (a new line) without having to start a new paragraph, use <br>:

Example:

<p>This is<br>a paragraph<br>with line breaks.</p>

Try with example

Output :

This is
a paragraph
with line breaks.

 

The Poem Problem

On a single line, this poetry will be displayed:

Example:

<!DOCTYPE html>
<html>
   <head>
      <title>Display Directions</title>
   </head>
   <body>
      <p>
        My Bonnie lies over the ocean.

        My Bonnie lies over the sea.

        My Bonnie lies over the ocean.

        Oh, bring back my Bonnie to me.
	</p>
   </body>
</html>

Try with example 
 

Output :

My Bonnie lies over the ocean. My Bonnie lies over the sea. My Bonnie lies over the ocean. Oh, bring back my Bonnie to me.

Solution - The HTML Element

Preformatted text is defined by the HTML <pre> element.

The text within a <pre> element is shown in a fixed-width font (typically Courier), with spaces and line breaks preserved:

Example:

<pre>
  My Bonnie lies over the ocean.

  My Bonnie lies over the sea.

  My Bonnie lies over the ocean.

  Oh, bring back my Bonnie to me.
</pre>

Try with example 
 

Output :

My Bonnie lies over the ocean.

My Bonnie lies over the sea.


My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.