1. What are HTML Paragraphs?
Firstly, HTML paragraphs are important for any page, since the content of a web-page comprises of headings, paragraphs, tables, and many more html elements. Also we do not have a tendency to use only headings, tables and other elements to display our all content, there is a necessity of HTML paragraphs. Subsequently an html paragraph uses <p> tag to define its content. Also it is not sure how a paragraph will behave on different screen, we have to do formatting of any paragraph. See the following example for instance:
Example
<!Doctype html> <html> <head> <title>HTML Head</title> </head> <body> <h1>The HTML Paragraph</h1> <p>This is a HTML Paragraph.</p> </body> </html>
2. HTML Paragraphs Clue Points
- First of all browser will separate an HTML paragraph from above and below content with space.
- Also we are not sure of the rendering of HTML paragraph in different browsers and on different screen sizes. As different screen sizes will produce different results.
- Meanwhile different lines and spaces you add in a paragraph will not be rendered and avoided by browsers. Therefore we cannot just style our document in such way.
- Unlike HTML headings, if you forgot to add the closing tag of html paragraph, then there is a possibility that some browsers may display your content correctly. However it is not a good practice. So always close all of your tags correctly and properly. Because it may produce content display error, so avoid such practice.
- Also, all the browsers support this html paragraph element
Example
<h4>What is HTML Paragraph</h4> <p>HTML paragraph is used to display the content of a web-page. You cannot write your HTML paragraph like this. And this is a very bad way of writing a paragraph. </p>
Certainly the browser will diminish these empty spaces and line brakes, Instead it will show us our paragraph in a continuous manner like shown below.
Output
What is HTML Paragraph
HTML paragraph is used to display the content of a web-page. You cannot write your HTML paragraph like this. And this is a very bad way of writing a paragraph.
3. HTML Paragraph Attributes
| Attribute | Attribute Values | Description |
| align | align:left, align:right, align:center, align:justify | A paragraph uses align attribute to specify text alignment according to our need. |
Example
<style>
p {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
}
</style>
Above is the css representation of the default HTML paragraphs formatting. In next courses you will learn more about the paragraphs formatting in HTML Formatting. Following are Some of HTML paragraph plugins you can say, that we can incorporate within paragraphs to achieve more of it.
Note:
- Importantly, an HTML paragraph can not have block level elements, like div, including p itself.
- W3C discourage the use of empty p elements.
- Also user agents should ignore empty paragraph elements.
- Also ending tag of paragraph is optional, any parser will add this tag itself. Meanwhile it will consider any next paragraph's strating tag as ending tag of previous paragraph.
4. HTML Line Breaks <br>
Similarly HTML line breaks are the beauty of html paragraphs. Importantly, whenever after certain instances, you need to display your content on next line, a line break come in handy. Not only HTML line break just cut off the content at the current position, also it moves the content to below line. It uses <br> singleton tag to do its job. Similarly you can also use <wbr> to achieve this property. Just look at the below example.
Example
<!Doctype HTML> <html> <head> <title>HTML Line breaks</title> </head> <body> <h4>Morning Exercise</h4> <p>Morning exercise is very important for us<br> it keeps us healthy<br> and gives required energy to our body.<br> Also it has lasting impacts on our health<br> we should make a habit of doing exercise properly and daily. </p> </body> </html>
As you can see in the above example, we have incorporated <br> tag within paragraph, it will show the following output on the browser.
Output
Morning Exercise
Morning exercise is very important for us <br> it keeps us healthy <br> and gives required energy to our body. <br> Also it has lasting impacts on our health <br> we should make a habit of doing exercise properly and daily.
Note:
Certainly the <br> tag is supported by all browser and it has same use in HTML 4.01 and HTML5. But in XHTML it needs to be closed with </br> properly as a must. Also Don't use <br> tag to separate HTML paragraphs, instead it may be used to write content on different lines, like a poem.
5. HTML Horizontal Rule <hr>
Unlike <br> tag, HTML horizontal rule is a way of adding a line break along with a horizontal line below the text. That is to say HTML horizontal rule just separates the content with a horizontal line in between. Therefore it is a good tool for formatting of a document. Check the following example.
Example
<!Doctype HTML> <html> <head> <title>HTML Horizontal Rule</title> </head> <body> <h4>Morning Exercise</h4><hr /> <p>Morning exercise is very important for us<hr /> it keeps us healthy it gives required energy to our body<hr /> also it has lasting impacts on our health we should make a habit of doing exercise properly and daily. </p> </body> </html>
Output
Morning Exercise <hr />
Morning exercise is very important for us it keeps us healthy it gives required energy to our body. Also it has lasting impacts on our health, so we should make a habit of doing exercise properly and daily.
As you can see horizontal rule is a good way to create a visual separation on the screen, which is noticeable by the users. Also it is supported by all browsers.
One thing to note is that, we should not use <hr /> as child element in headings or paragraphs, etc. This will create validation errors and is not its right usage.
6. HTML Preformatted Text <pre>
The <pre> tag works like a paragraph, but also it has some special features and styling.
- First of all it displays text in a special font-style, usually Cournier.
- Also it displays the text as it is written between the <pre>Your Text</pre> tags.
- Importantly it counts for spaces in between the tags.
- Also it counts for line breaks by default.
To understand it clearly, look at the following example for instance.
Example
<!Doctype HTML> <html> <head> <title>HTML Preformatted Text</title> </head> <body> <h4>Morning Exercise</h4> <pre> Morning exercise is very important for us it keeps us healthy and gives required energy to our body also it has lasting impacts on our health we should make a habit of doing exercise properly and daily. </pre> </body> </html>
Output
Morning Exercise
Morning exercise is very important for us. Also it keeps us healthy it gives required energy to our body also it has lasting impacts on our health we should make a habit of doing exercise properly and daily.
In conclusion, HTML paragraphs are the backbone of HTML markup. In other words they play a vital role alongside HTML headings and other HTML elements.