What is HTML Paragraph Tutorial and styles

  • Post category:HTML
  • Post author:
  • Post last modified:June 14, 2021
  • Reading time:4 mins read
You are currently viewing What is HTML Paragraph Tutorial and styles

Well, HTML paragraphs are one or more text lines together which represent your content. In HTML <p> tag represents a paragraph.

Be sure when you write any content it must be under <p> tag

Example 1

<p> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>

Results

paragraph

Example 2

<p> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod 
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>

Results

paragraph

Important

If you notice, we add line breaking in Example 2 but the result page does not showing the line breaking it shows the same result as Example 1.

Why This?

As the rule of the HTML, browser removes all the extra spaces from a document structure. If you want to add line breaks use the <br> tag. If you wish more line breaks using the <br> tag two or more times.

Paragraph Line Breaking

<p> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
<br>
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<br> <br>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
<br>
nisi ut aliquip ex ea commodo consequat
</p>

Result

parabr

The <pre> Tag For Customize Text

Here we replace the <p> tag with <pre>tag. If you want to add your customize spaces or line breaks use the <pre> tag, it solve all the problems in <p> tag.

Example

<pre> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod 
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</pre>

Result

pre

Paragraph With Different Color

<p style="color:green;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod 
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
</p>

Ashim Khatua

Professionally Web Developer since 2015, And also a Blogger. I am the founder of SiteCodings.com. I love to share my knowledge, which I earned the past few years. I want to share my knowledge with you through my Blog. Keep Reading.

Leave a Reply