HTML – Heading Tags

HTML Heading tag is used to set the name of the webpage. (Don’t confuse with head tag). Heading tag is used to set text of webpage as heading.

HEADING TAG

Heading tag – ‘<h1></h1>’. Heading tag too has closing tag. If you notice unlike bold tag, italic tag and underline tag, heading tag contains number. The number 1 says, heading type 1 tag.

Example:

<h1>I am heading text</h1>

When to use heading tag in a HTML Webpage?

In a webpage, we may want our webpage may start with a heading. In such case we can wrap the heading text with heading tag. Heading text helps reader to understand the webpage focused around which topic.

What does heading tag do in a HTML Webpage?

When browser encounters heading tag (‘<h1>’,'</h1>’) around a text or texts, it renders the wrapped text as heading text. Default font size of heading tag(‘<h1>’,'</h1>’) is 24pt or 1.5em or 32px. In simple language, if we want certain text of a webpage to set larger than other text (24pt or 1.5em or 32px text size) then we use heading tag of type 1.

How to use heading tag (<h1>,</h1>) in a HTML Webpage?

Lets see how to use heading tag ‘<h1></h1>’:

Open the webpage which we have created in one of the previous chapter.

<html>

<head>

<title>This is a sample webpage</title>

<meta name=”content” description=”this is a sample webpage for practice purpose.”/>

</head>

<body>

This is a sample webpage. This webpage is for practice purpose. I have successfully developed the webpage.

</body>

</html>

Lets  stylise “sample webpage” as heading text.

Steps to use heading Tag in HTML Webpage:

<body>

This is a <h1>sample webpage. This webpage is for practice purpose. I have successfully developed the webpage.

</body>

<body>

This is a <h1>sample webpage</h1>. This webpage is for practice purpose. I have successfully developed the webpage.

</body>

Heading Tag HTML Webpage

If you notice, then the result is different then previous all other tags we have used so far.

Here you can notice, sample webpage is appearing as heading text (32px text size) and it is appearing single line text. By default heading tag wrapped texts appear as individual. It can not appear inside paragraph. As the name says, heading, it appears as heading. Separate from rest of text.

How many types of heading tags are present in HTML?

Total of 6 types of heading tags are present in HTML.

<h1></h1> (Heading tag of type 1) (Default text size: 32px)

<h2></h2>(Heading tag of type 2) (Default text size: 24px)

<h3></h3>(Heading tag of type 3) (Default text size: 18px)

<h4></h4>(Heading tag of type 4) (Default text size: 16px)

<h5></h5> (Heading tag of type 5) (Default text size: 14px)

<h6></h6> (Heading tag of type 6) (Default text size: 10px)

If our webpage is having only one heading text, then we need to use once h1 tag. But if our webpage is having one heading text and two sub heading text. Then we need to use h1 tag and h2 tag.

ASSIGNMENT:

Open the webpage which we have created in one of the previous chapter. Now remove the text which we have written previously. Now add the following text with tag as below. 

<html>

<head>

<title>This is a sample webpage</title>

<meta name=”content” description=”this is a sample webpage for practice purpose.”/>

</head>

<body>

<h1>Popular Fruits Among children</h1>

The following information provides the names of popular fruits among children.

<h2>Apple</h2>

An apple keeps doctor away. Children love apple. Apples are of two types:

<h3>Green Apple</h3>

Children love green apple. Because its bit sour and sweet too.

<h3>Red Apple</h3>

Adult love red apple. Its sweet and very tasty.

<h2>Banana</h2>

Children, adult, old people love banana. Banana are also of two types:

<h3>Green Banana</h3>

Green banana are also loved heavily among banana lovers.

<h3>Yellow banana</h3>

Yellow banana is widely loved around the globe

</body>

</html>

Save the file. Open in a browser. A result below would appear.

HTML TAGS Example HTML Webpage

If you see the result, you can notice text size difference between h1, h2 and h3 tag. Clearly we can identify heading text, sub heading text and sub sub heading text. Right? Experiment yourself. Use other type of heading tags and see the result.