HTML Headings

HTML headings play an important role in organizing the content of a webpage.

These headings include <h1>, <h2> , <h3>, <h4> , <h5>, <h6>

These are defined using <h1> to <h6> tags.

<h1> is the most important HTML heading, whereas <h6> is the least important HTML heading.

<h1>It displays the heading 1</h1>

<h2>It displays the heading 2</h2>

<h3>It displays the heading 1</h3>

<h4>It displays the heading 1</h4>

<h5>It displays the heading 1</h5>

<h6>It displays the heading 1</h6>

Each time you use a heading tag, your web browser will automatically add some empty space before and after a heading.

Make sure to use these heading tags for displaying headings only. Never use them to display your text big, small or bold.

Importance of using HTML Headings

Search engines use the headings in your web page to index the structure and the content present in it. So, always keep in mind to use them wisely in your webpage.

The words used inside the heading tags help search engines to determine the important content of a page. If you want to rank your page for a specific word or phrase, make sure to include it into your heading tag.

Also, it helps users/visitors to scan what you have included in your webpage. Adding headings to your content is highly effective for the structure of your HTML document.

For better understanding, let’s have this example, like the main title of single page content can be displayed with <h1>, major sections of content can have <h2> followed by <h3> to define the sub-sections and so on.

Example:

<!DOCTYPE html>
<html>
<head>
<title>An Example of HTML Headings </title>
</head>
<body>

<h1>It displays the main heading of a page.</h1>
<p>The most important heading which must contain the main keyword of a webpage.</p>
<h2>It displays the sub-heading of a page.</h2>
<p>It contains the first sub-heading of a webpage.</p>
<h3>It displays the second sub-heading of a page.</h3>
<p>It contains the second sub-heading of a webpage.</p>

</body>
</html>

h1 to h6 tags can be used with paragraphs if required.

Change the size of HTML Headings

By default, each HTML heading has its own size. But, you can change the size of HTML headings using the style attribute along with CSS font-size property.

Example:

<h1 style="font-size:70px;"> It displays the heading 1</h1>