Heading and Paragraph in HTML

Heading and Paragraph in HTML with Examples

In this article, I am going to discuss Heading and Paragraph in HTML with Examples. Please read our previous article where we discussed Attributes in HTML with Examples. At the end of this article, you will learn everything about HTML Heading and Paragraph with Examples.

Heading in HTML

Heading tags are used in HTML to define a heading. There are six heading tags in total: H1, H2, H3, H4, H5, and H6. H1 is considered as the most important heading, whereas H6 is considered as the least important heading.

Browsers generally display the various headings in different sizes, with <h1> being the largest and <h6> being the smallest. The default value for each heading tag is different.

<h1> Welcome to Dot Net Tutorials </h1>
<h2> Welcome to Dot Net Tutorials </h2>
<h3> Welcome to Dot Net Tutorials </h3>
<h4> Welcome to Dot Net Tutorials </h4>
<h5> Welcome to Dot Net Tutorials </h5>
<h6> Welcome to Dot Net Tutorials </h6>

The heading element is a block-level element. Every new heading element starts on a new line.

Heading in HTML with Examples

HTML Heading Tags Default Size

HTML Heading Tags Default Size

Changing the size of HTML Headings

Using the style attribute, we can modify the default size of HTML headings. We can specify the size of headings using the CSS font-size property. We can also increase or decrease the heading size according to our requirements.

<h1 style=”font-size: 60px;”> Dot Net Tutorials </h1>

Changing the size of HTML Headings

<h1 style=”font-size: 20px;”> Dot Net Tutorials </h1>

Heading and Paragraph in HTML with Examples

Note: Headings are used by search engines to index the structure and content of a webpage. Headings are used to draw attention to important topics.

Paragraph in HTML

Paragraph tags are used in Html to define a paragraph. A paragraph tag is a paired tag, which means it has both an opening and a closing tag. Anything between <p> and </p> is considered as a paragraph by browser.

<p> This is a paragraph </p>
<p> This is another paragraph </p>

Paragraph in HTML with Examples

Paragraphs in HTML Without Closing Tags

Closing tags are very important in Html. Closing tags indicate the end of an element. But there are some elements that work fine without closing tags and a paragraph is one of them. But it’s best practice to close tags to avoid browser incompatibilities.

<p>This is a paragraph </p>
<p>This is a paragraph without a closing tag.

Paragraphs in HTML Without Closing Tags

Spaces in HTML Paragraphs

In Html blank spaces are ignored. So, if we add blank spaces between text it will be ignored by the browser. Have a look at the example below. In the second paragraph element, we have added some blank spaces but, in the output, you can clearly see all blank spaces are ignored by the browser.

<p> This is a paragraph with no spacing</p>
<p> This is another paragraph with spacing </p>

Spaces in HTML Paragraphs

If you want to add spacing in paragraphs you can use &nbsp; to add spaces between text in paragraphs. nbsp stands for nonbreaking space. It will appear like “ ” in the browser.&nbsp; adds one blank space in the document.

<p> This is a paragraph with no spacing</p>
<p> This is a paragraph with &nbsp; spacing </p>

Heading and Paragraph in HTML with Examples

Multiline Paragraph in HTML

When we add multiple lines inside the paragraph element in HTML, they are considered as a single line only. Observe the following example.

<p>  
   This is 
   a 
   paragraph with
   multiple line
</p>

Multiline Paragraph in HTML

We need to use line breaks within the element to display them on different lines. In the example below we have used the <br> tag to display text on different lines.

<p>  
   This is <br>
   a <br>
   paragraph with <br>
   multiple line 
</p>

Heading and Paragraph in HTML with Examples

The <pre> Element in HTML

The above problem is solved using the pre-element. <pre> element makes it easier to add multiline texts in an Html document. <pre> stands for preformatted text. <pre> tag automatically adds spaces and line breaks between each line.

<p>
One, two, three, four, five,
Once I caught a fish alive,
Six, seven, eight, nine, ten,
Then I let go again. 

Why did you let it go?
Because it bit my finger so.
Which finger did it bite?
This little finger on the right
</p>

The <pre> Element in HTML

<pre>
One, two, three, four, five,
Once I caught a fish alive,
Six, seven, eight, nine, ten,
Then I let go again. 

Why did you let it go?
Because it bit my finger so.
Which finger did it bite?
This little finger on the right
</pre>

The <pre> Element in HTML

In the next article, I am going to discuss Classes in HTML with Examples. Here, in this article, I try to explain Headings and Paragraphs in HTML with Examples and I hope you enjoy this Heading and Paragraph in HTML with Examples article.

Leave a Reply

Your email address will not be published.