HTML Paragraph Tag
If you have ever written any article or blog post then you know that paragraphs are the main component or building block for structuring your content. In HTML we have a tag that is just there to help us out. So, let's get started by learning about HTML paragraph tag.
What is HTML paragraph tag?
One of the most important tag in HTML is the <p> tag which is used to mark the text as paragraph. So, if you ever want to create a website or blog then <p> tag is the fundamental element you must know about.
HTML paragraph tag belongs from a group of "block-level" elements. Don't worry if you are unfamiliar with the term "block-level" elements because you will thoroughly learn it in our future lessons. But for now just keep in mind that "block-level" elements are those elements which takes the full width of their parent element and they always starts from a new line.
How to use it?
It is very simple and easy to use HTML paragraph tag, just put the opening paragraph tag <p> and closing paragraph tag </p> and then place your content between these tags. It's that simple!
Check out the example below.
Optional end tag
Remember that in HTML the paragraph element has an optional end tag. It means the paragraph will still display without any issues if you omit the closing paragraph tag </p>. But we recommend that you should always use it to prevent any unexpected results as the code gets complex.
Example
<!DOCTYPE html>
<html>
<body>
<p>This is my first paragraph
<p>This is my second paragraph
</body>
</html>Extra spaces removed
The most interesting thing about the HTML paragraph tag is that if you ever type fast and mistakenly left multiple spaces in between the words then you don't have to worry because the web browser will automatically eliminate the additional spaces and return the plain text without any extra spaces.
Example
<p>
In this paragraph
we have a lot of extra spaces
in source code,
but the web browser
will remove it automatically.
</p>Line break inside paragraph
What if you want to break the lines of a paragraph? This can only be done using a single and most useful tag named as line break tag <br />. Note that this tag does not have any end tag because it is only there to move the cursor to the next line.
Just put this tag after the word from where you want to break the line. Let's take a look at the example below.
HTML paragraph tag is responsive in its nature
As the screen size varies widely (e.g. mobile, tablet or desktop screens), the words in the paragraph tag adjust automatically according to those screen sizes.
You may be thinking about the term "Responsive" which I have used in the heading. It simply means the response from a tag on specific screens. As we are teaching you some amazing professional practices so these terms are necessary for you to know. So, that you will never face any difficulty in your career.
Issues with the paragraph tag
As there are some astonishing benefits of the paragraph tag, there also exists a slight issue with this tag that is if any poet wants to publish his poem online and write his creation in the paragraph tag like the example below.
Example
<p>
Twinkle, twinkle, little star,
How I wonder what you are.
Up above the world so high,
Like a diamond in the sky
</p>Then the <p> tag will combine all text spread across multiple lines and make it display as a single line. This will in turn ruin the beauty of the poetry. So, to fix this issue a hero comes into action, another tag that retains the beauty of the content as it is written and that tag is called the preformatted tag <pre>.
How to use <pre> tag?
Example
<pre>
Twinkle, twinkle, little star,
How I wonder what you are.
Up above the world so high,
Like a diamond in the sky
</pre>This will not disturb the format of the content and will be shown as it is written.
Styling the paragraph tag
You can easily style the HTML paragraph tag by simply applying the inline CSS (Cascading Style Sheet) like the example below.
As you have successfully learned the use of paragraph, line break and pre tag. Now make sure you practice it frequently to enhance your skills. You can use our free Try HTML Online editor for that purpose.
