HTML Basics

HTML Heading Tags H1, H2, H3, H4, H5, H6

Reader finds a content is easy to understand when the content is arranged in a proper structure. That is, content should begin with a heading text, and the rest content is divided into multiple sub heading texts.

In a web page, we share a content with the reader. If the content is not well structured, then the reader is going to lose interest soon.

Look at the example code below.

Example

<html>
<head>
</head>
<body>
Cricket. Cricket is one of the popular game in India. Teenagers or retired old man prefer to play and watch cricket. In a cricket game, there are four important parts: batting, fielding, bowling, and score. Batting. A player runs and bowls the ball which a batsman need to hit the ball with the bat in his hand. This is known as batting. Fielding. There are players spread around the field, and their job is to stop the ball after the batsman hits the ball, from reaching to the boundary. This is known as fielding. Bowling. A player runs and throws the ball towards the other player waiting to hit the ball. This is known as bowling. Score. Once the batsman hits the ball, then the batsman needs to run in between the wickets before other players get the ball and hit at the wicket. Each run is known as score and it is calculated in the unit of run.
</body>
</html>

(Copy the above code into a blank document, save with .html extension, open the file in any browser)

If you read above web page data, reader needs to read multiple times to understand the data. This is a small paragraph text, so a reader might not need much time. Imagine, what would happen if the webpage had 10000 word data. The reader is not going to spend even ten seconds on such webpage.

So we must arrange the webpage content in a more meaningful, easy to read and understand manner. And we achieve this kind of result, by defining heading and sub heading texts.

So how do we define heading text in HTML?

By using heading tags. There are six types of heading tags available in html.

  • h1 tag
  • h2 tag
  • h3 tag
  • h4 tag
  • h5 tag
  • h6 tag

Each heading tag has opening heading tag and closing heading tag. (<h1></h1>,<h2></h2>,<h3></h3>,<h4></h4>,<h5></h5>,<h6></h6>)

What are the difference among these heading tags?

h1 tag stylises the text in 2em font size. (em is the unit used to measure font size). h2 tag stylises the text in 1.5em font size. h3 tag stylises the text in 1.17em font size. h4 tag stylises the text in 1em font size. h5 tag stylises the text in .83em font size. h6 tag sylises the text in .67em font size.

In simple language, h1 tag wrapped text is going to appear bigger compared to h2 tag wrapped text. Similarly h2 tag wrapped text is going to appear bigger than h3 tag wrapped text. And so on, h4 tag text appear biggger than h5 tag text and h5 tag text appear bigger than h6 tag text.

Lets understand this with an example.

Example

<html>
<head>
<title></title>
</head>
<body>
<h1>Orange Apple Guava Grape</h1>
<h2>Orange Apple Guava Grape</h2>
<h3>Orange Apple Guava Grape</h3>
<h4>Orange Apple Guava Grape</h4>
<h5>Orange Apple Guava Grape</h5>
<h6>Orange Apple Guava Grape</h6>
</body>
</html>

Copy the above html code in to blank document, save with .html extension and open with any browser. You will get following result.

Orange Apple Guava Grape

Orange Apple Guava Grape

Orange Apple Guava Grape

Orange Apple Guava Grape

Orange Apple Guava Grape
Orange Apple Guava Grape

 

So here the point, to set heading text of the webpage use h1 tag and to set sub heading we use h2 tag, to set sub heading of a sub heading we use h3 tag and so on.

Now lets rearrange the content about cricket from the first example mentioned in this webpage.

<html>
<head>
</head>
<body>
<h1>Cricket<h1>
Cricket is one of the popular game in India. Teenagers or retired old man prefer to play and watch cricket. In a cricket game, there are four important parts: batting, fielding, bowling, and score.
<h2>Batting</h2>
A player runs and bowls the ball which a batsman need to hit the ball with the bat in his hand. This is known as batting.
<h2>Fielding</h2>
There are players spread around the field, and their job is to stop the ball after the batsman hits the ball, from reaching to the boundary. This is known as fielding.
<h2>Bowling</h2>
A player runs and throws the ball towards the other player waiting to hit the ball. This is known as bowling.
<h2>Score</h2>
Once the batsman hits the ball, then the batsman needs to run in between the wickets before other players get the ball and hit at the wicket. Each run is known as score and it is calculated in the unit of run.
</body>
</html>

The output of the above html code will be.

Cricket

Cricket is one of the popular game in India. Teenagers or retired old man prefer to play and watch cricket. In a cricket game, there are four important parts: batting, fielding, bowling, and score.

Batting

A player runs and bowls the ball which a batsman need to hit the ball with the bat in his hand. This is known as batting.

Fielding

There are players spread around the field, and their job is to stop the ball after the batsman hits the ball, from reaching to the boundary. This is known as fielding.

Bowling

A player runs and throws the ball towards the other player waiting to hit the ball. This is known as bowling.

Score

Once the batsman hits the ball, then the batsman needs to run in between the wickets before other players get the ball and hit at the wicket. Each run is known as score and it is calculated in the unit of run.

Now looking at the above webpage, any reader can easily understand the webpage is about cricket.

So this way we use heading tags to define heading and sub headings in a webpage.