HTML Headings

HTML Headings are brief descriptions, generally in very few words, about a page or sub-section of a page. HTML headings are the visible titles on a web page.

HTML has six elements (<h1> to <h6>) to specify headings in a web document.

The element <h1> defines the most important heading of the page. The importance decreases from <h1> to <h6> gradually.

The <h6> defines the least important heading.

Headings

This is a h1 Heading

This is a h2 Heading

This is a h3 Heading

This is a h4 Heading

This is a h5 Heading
This is a h6 Heading
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Headings Example</title> </head>
<body>

<h1>This is a h1 Heading</h1>
<h2>This is a h2 Heading</h2>
<h3>This is a h3 Heading</h3>
<h4>This is a h4 Heading</h4>
<h5>This is a h5 Heading</h5>
<h6>This is a h6 Heading</h6>

</body>
</html>

Web browsers display each HTML heading differently on the screen. For example, the default font size of the <h1> element is the biggest. The default font size of the <h6> element is the smallest.

HTML Heading Tags

Web browsers display each HTML heading differently on the screen. For example, the default font size of the <h1> element is the biggest. The default font size of the <h6> element is the smallest.

Headings Size Description
<h1> Biggest Most important heading
<h2> Smaller than <h1>
Bigger than <h3>, <h4>, <h5> and <h6>
Less important than <h1>
More important than<h3>, <h4>, <h5> and <h6>
<h3> Smaller than <h1> and <h2>
Bigger than <h4>, <h5> and <h6>
Less important than <h1> and <h2>
More important than <h4>, <h5> and <h6>
<h4> Smaller than <h1>, <h2> and <h3>
Bigger than <h5>, and <h6>
Less important than <h1>, <h2> and <h3>
More important than <h5>, and <h6>
<h5> Smaller than <h1>, <h2>, <h3> and <h4>
Bigger than <h6>
Less important than <h1>, <h2>, <h3> and <h4>
More important than <h6>
<h6> Smallest Least Important Heading

HTML Heading Font Size

Browsers have a default font size for headings. For example, the chrome browser has the following default sizes, which may change for future versions.

Heading Default Size
<h1> 2em
<h2> 1.5em
<h3> 1.3em
<h4> 1em
<h5> 0.8em
<h6> 0.7em

Don't worry if you don't understand 'em'. We will explain them later in the tutorial.

One can modify the default font size of any headings. To change the font size, we can use the HTML style attribute.

Code
<h1 style="font-size:70px;">This is a h1 heading</h1>

Here we have used the CSS font-size property to display the content of <h1> element of size 70 pixels.

Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Headings Font Size Example</title> </head>
<body>

<h1 style="font-size:40px;">h1 Heading with font size 40px</h1>
<h2 style="font-size:30px;">h2 Heading with font size 30px</h2>
<h3 style="font-size:20px;">h3 Heading with font size 20px</h3>
<h4 style="font-size:15px;">h4 Heading with font size 15px</h4>
<h5 style="font-size:12px;">h5 Heading with font size 12px</h5>
<h6 style="font-size:8px;">h6 Heading with font size 8px</h6>

</body>
</html>

HTML Heading Color

The browser defines a default color for the HTML heading. We can change the color of the content of the heading with the style attribute, using the CSS color property:

Code
<h1 style="color:red;">This is a h1 heading</h1>
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Headings Color Example</title> </head>
<body>

<h1 style="color:red;">h1 heading in red color</h1>
<h2 style="color:blue;">h2 heading in blue color</h2>
<h3 style="color:green;">h3 heading in green color</h3>
<h4 style="color:yellow;">h4 heading in yellow color</h4>
<h5 style="color:black;">h5 heading in black color</h5>
<h6 style="color:magenta;">h6 heading in magenta color</h6>

</body>
</html>

HTML Heading Center

HTML heading can be aligned to the center by using the style attribute. For this CSS text-align property can be used.

Code
<h1 style="text-align:center;">This is a h1 heading</h1>
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Headings Center Alignment Example</title> </head>
<body>

<h1>Default Heading</h1>
<h1 style="text-align:center;">Center Heading</h1>
<h1 style="text-align:right;">Right Heading</h1>
<h1 style="text-align:left;">Left Heading</h1>

</body>
</html>

Notes

1. It is important to add headings to the HTML documents. Because users get a brief idea about the kind of content the web page holds. It increases users' engagement with the website.

2. The main heading of the web page should be defined with the <h1> tag.

3. For the sub-heading, you can use <h2> element. If the content is further sub-sectioned, their heading can be <h3> and so on.

4. Headings are an important parameter in search engine indexing. Your heading can help you get a better ranking in search results if they are well defined in HTML documents.


  • Disclaimer: ResultUniversity.com is an independent private website and it is in no way affiliated to any Indian Government official website. The sole purpose of this website is to provide notifications regarding the latest results published. Though utmost care is being taken, we can not guarantee 100% correctness of information. Using this website confirms that you agree to all the terms and conditions.