Last updated on October 31st, 2020 at 08:07 am.
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 :