8 HTML and CSS Tutorial – Paragraphs and Headings

Last updated on October 31st, 2020 at 08:07 am.

8 Learn about Paragraph and Heading tags in HTML

8 HTML and CSS Tutorial – Paragraphs and Headings

In this post let’s look at the Paragraph (P Tag) and the Heading Tags.

<p> – Paragraph Tag

This is used to represent blocks of Text in HTML.  The <p> tag is used to represent paragraphs. Paragraphs can be a group of text content which is separated by horizontal space or indentation .

Like most HTML tags, the p tag needs to be closed as follows .

<p> This is a paragraph Text block</p>

<p> This is a another paragraph Text block in HTML</p>

In the above two lines of code, we have two different paragraphs.

The <p> represents the opening Tag.

Then the text to be placed in the web page, must be put after this first P tag .

And then the </p> represents the closing Tag. Which ends the paragraph.

Most attributes for the P tag are obsolete. Actually most display and alignment attributes in html are obsolete. This is because CSS should be used to style the appearance of Web Page elements and not HTML.

Just a side note, we also have the following tags, close by for you to use with your <p> tag .

<br> Tag : This creates a line break wherever it is placed. If you want to write every line of text in a new line you may use the <br> tag. It does not have a closing tag. Eg:

254 <br>

Nairobi <br>

Kenya <br>

The above will put everything on it’s own line

<hr> Tag : Based on MDN , this represents a thematic  break between paragraphs. Traditionally, the hr  Tag represents a horizontal line. It also does not have a closing tag

Headings in HTML

The heading Tag in HTML goes six levels deep. This is as shown below:

<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>

You should use them to nest Headings and sub headings into each other.

Note that, h1  is the highest level whereas h6 is the lowest.

Small simple sample thanks to MDN :

<h1>Heading elements</h1>

<h2>Summary</h2>

<p>Some text here...</p>


<h2>Examples</h2>

<h3>Example 1</h3>

<p>Some text here...</p>


<h3>Example 2</h3>

<p>Some text here...</p>


<h2>See also</h2>

<p>Some text here...</p>

Test this code like I showed you in the previous tutorials.

All h1 to h6 Tags must have a matching closing Tag. This is because, if you don’t close it, all the html Text and elements that follow will be headings. Close the tag, for instance for <h2>, there must be a matching </h2>

To watch this FULL HTML and CSS Tutorial, click the button below :

Comment Here

Need WordPress help? Linux Server help? Talk to us.

  • We are your own WordPress customer service.
  • We set up Linux servers and install or migrate WordPress. Learn more here.
  • We support WooCommerce too.
  • Check out our WordPress customer support plans here or contact us below .

If you have any questions regarding WordPress support, Linux server support or any of our services, feel free to reach out or read more on our services page.

Join this free course:

How to host multiple WordPress
websites on a VPS

Close me!