TRENDING TOPICS

×

HTML Paragraph

The HTML paragraph tag is used to define the HTML paragraph element on the HTML web page. Actually, the paragraph element begins & ends with the HTML tag. The paragraph element should not contain tables and other block elements.

Example Explained

In the below, you can see the HTML code to define a paragraph demonstrating also the use of the STYLE attribute within the 2nd paragraph tag:

<body>
  <p>This is the normal paragraph.</p>
  <p style="font-size:16px; color:blue">This is the styled paragraph.</p>
</body>

This is the normal paragraph.

This is the styled paragraph.

In the HTML paragraph, you will need to follow the same structure of co-relating with real-world scenarios, for example, in a text-book, write details in paragraphs. The HTML paragraph tag is represented by <p> tag. Write the all one paragraph contents between the paragraph open <p> & close </p> tag.

Don't Forget the Close Tag

Mostly, all modern browsers will display HTML correctly even if you forget the closing tag BUT some browsers react differently if you forget to close the tag that's why need to close all tag properly sometime it will apply all attribute property to display on below-mentioned tags too.

Example Explained

<body>
  <p>This is fist paragraph.
  <p>This is another paragraph.
</body>

Points to know about HTML Paragraphs

  • By default, the HTML paragraph is always used 100% width of the parent element.
  • The closing tag </p> is not mandatory but try to use it always, otherwise, maybe you will see unexpected results in the browser-window.
  • In the browser window, At the run time of the web-page of paragraph creates a space from all by default.
  • The paragraph does not allow more than one space between two words within the content, if we are adding more than one space between words then p> tag will ignore all space except one space.
  • The paragraph does not allow more than one line in a single paragraph. In case you insert a new line then still <p> tag will render it in a single line.
  • In browser window of paragraph automatically arranged according to browser window size, orientation. You do not have any control over it.
  • A HTML paragraph does not allow block-level HTML element within <p> and </p> tag.

Problems with HTML Paragraph

Here we will discuss problems with paragraphs and how to solve them. Let’s finish one by one:

Extra Space Problem

  • Problem: When the browser-window renders an HTML paragraph element then that time by default it creates one space appears from all side of a paragraph.
  • Solutions: If you want to remove this extra space then you can use the style attribute within the <p> and pass the value of padding as 0.

Example Explained

<p style="padding:0;">Paragraph with solving the space problem.</p>

Single Line problem

  • Problem: If you write multiple lines in an HTML paragraph still in the browser window it appears in one line.
  • Solutions:As we know HTML paragraph element occupied 100% width by default but in case if you want to break the line and someplace in the paragraph and you want to start it in a new line then you can use the <br/> tag. Actually, <br/> tag is an empty tag it is used to break a line at a point and start a new line after it.

Example Explained

<p>This is paragraph content<br/>"The text will appear in two lines".</p>

Output

This is paragraph content
"The text will appear in two lines".

HTML Line Breaks <br />

  • The HTML <br> element used to defines a line break.
  • If you want a line break without starting a new paragraph then use <br> tag.
  • The <br> tag is an empty tag, which means that it has no end tag.

Line Breaks Example

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

Space between two words problem

  • Problem: As you know <p> tag ignores all spaces between two words except one. Suppose in such case if you want more space between two words like when you are solving math problem it requires more spaces and more lines in this situation what you will do.
  • Solutions: In this condition you can use <pre> tag within <p> tag. Actually, the <pre> tags allow us to write in such a way how exactly you want to see in the browser window.

Example Explained

<p>
  <pre>Using pre tag     extra space within the paragraph</pre>
</p>

Output

Using pre tag     to provide extra space within the paragraph.

The HTML <pre> Element

The HTML <pre> element defines pre-formatted text.

The <pre> tag surrounds the code being marked up. Normally, the browsers render pre tag text in a fixed-pitched font, with whitespace intact, and without word wrap.

Use of Attributes in HTML Paragraphs

Basically, with HTML paragraphs you use the align attribute. The align attribute is a very important HTML attribute, by default its value is absolute. BUT there are 4 values used to aligning attributes:

  • Left: The align: left is used to align all content of the paragraph on the left side.
  • Right: The align: right is used to align the content of the paragraph content aligned on the right side.
  • Center: The align: center is used to make the content of the paragraph content aligned in the center of the container.
  • Justify: The align: justify value is used to make paragraph content aligned equally both left and right side, just like newspaper paragraph. If you want to display the paragraph in such kind of text then you can use the value of the align attribute to .

Example & Output

<p align="right">This paragraph is aligned in right side.</p>

This paragraph is aligned in right side.

Like the above example, you can use all the values to align the paragraph content according to the requirement.

Other Attributes of HTML Paragraph

There are several other attributes apart from discussed above such as id, class, style, etc. You can also use them according to the requirement.

Styling HTML Paragraph in Professional way

Here, you will use style attribute to decorate p tag, it is part of CSS, so don’t worry about CSS code you can learn it in the CSS tutorial one by one and apply CSS code with more understanding.

CSS tutorial for beginners

Example & Output

<p style="font-size:17px; color:#222; line-height:23px;">Write a long paragraph here, you can see the output</p>

This is an example to understand how you can write paragraphs by using the style attribute in a professional way, so here we are using CSS code to styling this paragraph. You will learn it in the proper way in CSS Tutorials, so don’t worry if you are not able to understand this example that how to style attribute will work then visit on CSS tutorial once.

HTML Paragraph Tag Reference

Tag Description
<p> A Paragraph starting tag
<br /> Inserts a single line break
<pre> Pre Tag use for formatting Text

Advertise With Us

We offer sponsored posts and guest posts with do-follow links, back-links, and other advertising services, To advertise email us at "advertise@gdatamart.com"

© 2021 GDATAMART.COM (All Rights Reserved)