06 - HTML Paragraphs

To improve readability, the text in a web page is usually structured using paragraphs. In HTML we use “ p ” element to organize the text into paragraphs.

  • The “ p ” element is one of the most popular & basic structural element of HTML. If you have noticed, we used <p> tag almost in all our examples.
  • <p> tag is a block level element i.e. It is always included in the <body> tag.
  • The browser adds a white space at the beginning & ending of each paragraph.
  •  

Syntax for Paragraph tag:

     <p>Content</p>

The browser will display the result even if we omit the ending tag, but sometimes it may also show unexpected results.

So, it is always advised to use the ending tag.

A Simple Program using Paragraph tag:

<html>
 <head>
  <title>
   Paragraph tag
  </title>
 </head>
 <body>
   <p > Remember the times when a visit to the book store was no less than a treat?
        The rows and rows of neatly stacked books always held the promise of an untold mystery or transported you into a world of fantasy</p>
 </body>
</html>

The output of the above program would be:

Attributes of Paragraph tag:

Paragraph tag supports all the global attributes.

Attributes

Value

Description

id

Any text

Document wide identifier

class

Any text

Document wide identifier

Lang

Any ISO-639 language code

Sets language option for heading

Dir

rtl, ltr

Sets the direction of text for heading

Title

Any title

Gives the title for the HTML heading

Style

Style rules

Defines the presentation of heading

align

Left, right, center, justify

Defines the alignment of the heading

 

Align attribute:

This attributes defines the position of the paragraph in the document. The default alignment is left.

An example using paragraph tag with align attribute:

<html>
 <head>
  <title>
   Paragraph tag
  </title>
 </head>
 <body>
   <p align=right> Remember the times when a visit to the book store was no less than a treat?
   The rows and rows of neatly stacked books always held the promise of an untold mystery or transported you into a world of fantasy</p>
   <p align=center>People still prefer to come to a book store to pick up books that are not online</p>.
 </body>
</html>

 

The output of the program will be:

The align attribute for <p> tag is deprecated in HTML5. Though its use is no longer recommended, it will probably produce the expected output. Nice isn’t?

 

Event attributes for paragraphs:

The events on paragraphs will be triggered when the user interacts with the paragraph displayed in a web page. The events for the paragraph tag are applied using JavaScript which we will learn in further chapters. For now, Please take a look at the different types of events that may be triggered by Paragraph tags.

Mouse events for Paragraphs

will be activated when the user moves, clicks or release the mouse.

  • onclick – activates when the user clicks on paragraph
  • ondblclick – activates when the user double-clicks on the paragraph.
  • onmousedown – activates when the mouse button is pressed down over the paragraph.
  • onmouseup - activates when the mouse button is released over the paragraph.
  • onmouseover – activates when the cursor is hovered on the paragraph.
  • onmousemove – activates when the cursor is moved
  • onmouseout - activates when the cursor is not over the paragraph.

 

Keyboard events for Paragraphs

will be activated when the user interacts with the keyboard.

 

  • onkeypress – activates when the user presses a key.
  • onkeydown - activates when a key is pressed down.
  • onkeyup - activates when a key is released.

An example:

<!DOCTYPE html>
<html>
 <head>
  <title>
   Illustration of Paragraph tag
  </title>
 </head>
 <body>
   <p> This paragraph is     used as an example        to show you how
      a paragraph tag
     Actually               works </p>
   <p> You may observe that the above paragraph is displayed normally even though we have inserted many spaces & line breaks </p>
 </body>
</html>

The output of the above program would be:

Please do remember:

  • The output width of the paragraph depends on the width of the browser window. You get a different result when you resize your browser window.
  • The browser ignores any line breaks in the paragraph.
  • It also ignores extra spaces in the paragraph.
  • To insert extra spaces into the output paragraph , you can use

<p> </p>

  • We advise you to use style sheets instead of , because its usage may result in unexpected spacing.
  • Since <p> tag is a block level element, it cannot include any other block-level elements( the elements that are included in <body> tag )
  •  

In the next chapter, we will learn about formatting in HTML.

Like us on Facebook