HTML Heading - Block Element

Heading is very important in every page. All pages include heading part. For example if you want to write an essay about games and sports in examination, you give heading first as "Games and Sports" before start writing essay. Apart from examination, any web-pages necessary heading section.

In HTML Language, Six(6) Levels of Heading are supported.

1. <h1> heading

This is the biggest heading which means it has biggest font-size than the rest by default.

Default CSS values of <h1> element

h1 {
display:block;
font-size:2em;
margin:0.67em 0;
font-weight:bold;
}

2. <h2> heading

This is the second-biggest heading by default.

Default CSS values of <h2> element

h2 {
display:block;
font-size:1.5em;
margin:0.83em 0;
font-weight:bold;
}

3. <h3> heading

This is the third biggest heading by default.

Default CSS values of <h3> element

h3 {
display:block;
font-size:1.17em;
margin:1em 0;
font-weight:bold;
}

4. <h4> heading

This is the third smallest heading by default.

Default CSS values of <h4> element

h4 {
display:block;
font-size:1em;
margin:1.33em 0;
font-weight:bold;
}

5. <h5> heading

This is the second smallest heading by default.

Default CSS values of <h5> element

h5 {
display:block;
font-size:.83em;
margin:1.67em 0;
font-weight:bold;
}

6. <h6> heading

This is the smallest heading which means it has smallest font-size than the rest by default.

Default CSS values of <h6> element

h6 {
display:block;
font-size:.67em;
margin:2.33em 0;
font-weight:bold;
}

From the above example, we know that <h1> is the biggest heading while the <h6> is the smallest heading by default.
But we can modify the size of each heading by using either HTML attribute (style) or CSS properties.
      Lets discuss one by one

1. By using style attribute

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> HTML Heading Learning </title>
</head>
<body>
<h1 style="font-size:2.5em"> HTML Heading1 </h1>
<h2 style="font-size:2.3em"> HTML Heading2 </h2>
<h3 style="font-size:2.1em"> HTML Heading3 </h3>
<h4 style="font-size:1.9em"> HTML Heading4 </h4>
<h5 style="font-size:1.7em"> HTML Heading5 </h5>
<h6 style="font-size:1.5em"> HTML Heading6 </h6>
</body>
</html>

Output

HTML Heading1

HTML Heading2

HTML Heading3

HTML Heading4

HTML Heading5
HTML Heading6

2. By using CSS property

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> HTML Heading Learning </title>
<style>
h1 {
font-size:2.5em;
}
h2 {
font-size:2.3em;
}
h3 {
font-size:2.1em;
}
h4 {
font-size:1.9em;
}
h5 {
font-size:1.7em;
}
h6 {
font-size:1.5em;
}
</style>
</head>
<body>
<h1> HTML Heading1 </h1>
<h2> HTML Heading2 </h2>
<h3> HTML Heading3 </h3>
<h4> HTML Heading4 </h4>
<h5> HTML Heading5 </h5>
<h6> HTML Heading6 </h6>
</body>
</html>

Output

HTML Heading1

HTML Heading2

HTML Heading3

HTML Heading4

HTML Heading5
HTML Heading6

See more Reference

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> HTML Heading Learning </title>
</head>
<body>
<h1 style= "font-size:2.0em; text-align:center" > Games and Sports </h1>
<p style="color:red;text-align:justify"> Sports have been evolved through a long of history. There is no discrimination in games and sports on the ground of sex, religion, race, language etc. It is in the field of games & sports that we could make a chance to show our extraordinary talents else, no more. It makes our body a fit and healthy. Knowing the importance of games, many people in the localities mostly in rural areas endeavour to concentrate in the games rather than in education.
</p>
</body>
</html>

Games and Sports

Sports have been evolved through a long of history. There is no discrimination in games and sports on the ground of sex, religion, race, language etc. It is in the field of games & sports that we could make a chance to show our extraordinary talents else, no more. It makes our body a fit and healthy. Knowing the importance of games, many people in the localities mostly in rural areas endeavour to concentrate in the games rather than in education.



Some important questions of this page

1. Why is heading section is important in HTML language?

See Answer

Please refer to the above explanation.

2. Name the largest and smallest heading.

See Answer

Please refer to the above explanation.

3. Can you make H6 font-size larger than H1? If you could, illustrate with an example.

See Answer

Please refer to the above explanation.