HTML paragraph tags are used to define the HTML paragraph element. The paragraph element begins with the HTML <p> tag and ends with the HTML </p> tag. The HTML paragraph element should not contain tables and other block elements.
Example Explained
This is the HTML code for a paragraph demonstrating use of the STYLE attribute.
<body>
<p>This is a paragraph</p>
<p style="font-size:16px; color:blue">This is Another paragraph</p>
</body>
This is a paragraph
This is Another paragraph
In HTML Paragraph, we will follow the same structure of co-relating with real-world scenario. Just like out text-book, we write details in paragraph. In HTML we can also write details in paragraphs. HTML paragraph is represented by <p> tag. The paragraph in HTML is open with <p> tag and ends with </p> tag, between these two opening and closing tag we write all our require detail content.
Don't Forget the End Tag
Most browsers will display HTML correctly even if you forget the end tag
Example Explained -
<body>
<p>This is a paragraph
<p>This is another paragraph
</body>
Points to Know about HTML Paragraphs
- HTML Paragraph is always used 100% width of parent element.
- Closing tag </p> is not mandatory but always use it, otherwise you will see unexpected result in browser-window.
- In a browser window, at run time of web-page Paragraph creates a space from all by default.
- Paragraph does not allow more than one space between two words within content, if we are adding more than one space between words then <p> tag will ignore all space except one space.
- Paragraph does not allow more than one line in a single paragraph. In case we insert a new line then still <p> tag will render it in a single line.
- In browser window Paragraph automatically arranged according to browser window size, orientation. We don’t 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 about problem with paragraph and how to solve them. Let’s finish one by one
Extra Space Problem
- Problem: When browser-window renders HTML Paragraph element then there is a by-default space appears from all side of paragraph.
- Solutions: If we want to remove this extra space then we can use style attribute of <p> and pass value for padding as 0.
Example Explained
<p style="padding:0;">Paragraph with solving space problem</p>
Single Line problem
- Problem: If we write multiple line in HTML Paragraph still in browser window it appears in one line.
- Solutions: As we know HTML Paragraph element occupied 100% width by default, if we want to break line and some place in paragraph and wants new line the we can use <br/> tag. This tag is used to break a line at a point and start new line after it.
Example Explained
<p>I'm Paragraph content <br/> The Text will appear in two lines.</p>
Output
I'm Paragraph content
The Text will appear in two lines.
HTML Line Breaks <br />
- The HTML <br> element defines a line break.
- Use <br> if you want a line break without starting a new paragraph
- 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 we know <p> tag ignores all spaces between two words except one. Suppose in a such case if we want more space between two words like when we are solving math problem it’s requires more spaces and more lines in this situation what we will do.
- Solutions: In this condition we can use <pre> tag within <p> tag. The <pre> tags allows us to write in such a way how exactly we want to see in browser window.
Example Explained
<p>
<pre>I'm using pre tag to provide space </pre>
</p>
Output
I'm using pre tag to provide space
The HTML <pre> Element
The HTML <pre> element defines pre-formatted text.
The code tag surrounds the code being marked up. Browsers normally render pre text in a fixed-pitched font, with whitespace in tact, and without word wrap.
Use of Attributes in HTML Paragraphs
With HTML Paragraphs basically we use align attribute. It is very important HTML paragraph attribute, by default it’s value is absolute . There are more 4 value of align attribute listed below.
- Left: It is used to align all content of paragraph in left side.
- Right: It’s make content of paragraph aligned in right side.
- Center: It is used to make content of paragraph aligned in center of container.
- Justify: This value is used to make content aligned equally both left and right side, just like newspaper paragraph. If we require such kind of text then we can use the value of align attribute as justify
Example & Output
<p align="right">This paragraph is aligned in right side </p>
This paragraph is aligned in right side
Like above example we can use all value of align according to requirement.
Other Attributes of HTML Paragraph
There are several other attributes apart from discussed above, like id, class, style etc. we can use them according to requirement.
Styling HTML Paragraph in Professional way
Here we will use style attribute to decorate <p> tag, it is part of CSS, so don’t worry about code we will understand it in detail in CSS Tutorial.
Learn CSS Tutorials
Example & Output
<p style="font-size:17px;color:#222;line-height:23px;">Write a long paragraph, we will write in output </p>
This is example to understand how we can write paragraph using style attribute in a professional way, so here we are using CSS for styling this paragraph. You will learn it in proper way in CSS Tutorials, so don’t worry if you are not able to understand this example that how to use style attribute.
HTML Paragraph Tag Reference
| Tag |
Description |
| <p> |
A Paragraph starting tag |
| <br /> |
Inserts a single line break |
| <pre> |
Pre Tag use for formatting Text |