In this tutorial, we will discuss HTML headings, including their importance, how to use them correctly, and best practices to optimize them for SEO.
A Heading or h tag is a feature in HTML that we use to add a title or a subtitle to sections of a page. It helps to organize content into a hierarchy of sections on the webpage.
HTML Heading tags use the format <hx> where x is an integer 1, 2, 3, 4, 5, or 6. The smaller the number, the larger the heading tag.
These tags have an opening and closing tag. The general syntax to define header or heading tag is as:
<hx>Content here . . .</hx>
For example:
<h1>Hello World</h1>
Look at the below complete HTML code to understand better.
<!DOCTYPE html>
<html>
<head>
<title>Heading Element</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>When you will execute this code, you will see the result in the bold format on the web browser.
As you can see, the text within the heading tags <h1>. . . . .</h1> is displayed in the bold format on the web browser. However, the size of text within the heading tags depends on the number of heading.
Types of Heading tags in HTML
Headings are an important part of structuring and organizing the content of a web page. HTML defines six levels of headings that we define with the <h1> to <h6> tags. Here, h1 represents the most important (i.e. main heading) of the web page and h6 represents the least important heading.
In other words, h1 is the largest heading tag, while h6 is the smallest one. The lower level headings (h2, h3, etc.) are subheadings. Look at the h1 to h6 tags in the below example.
<h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6>
Look at the following example code below to understand the heading structures from h1 to h6.
<!DOCTYPE html>
<html>
<head>
<title>HTML Headings</title>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>When you will run this code, you will see the following output on the default web browser.
As you see in the above figure, HTML headings displayed on the browser are in the bold text and the sizes of the text are decreasing when going from h1 to h6.
Nested Heading Tags in HTML
We can also nest one heading tag into other heading tags on the web page. Nested headings in HTML are a useful way for structuring content with multiple levels of hierarchy.
To construct nested headings in HTML, simply use a lower level heading tag (e.g. h2) within a higher level heading tag (e.g. h1). Here’s an example of nested headings in HTML:
<!DOCTYPE html>
<html>
<head>
<title>Nested HTML Headings Example</title>
</head>
<body>
<h1>Main Heading</h1>
<h2>Subheading 1</h2>
<h3>Subheading 1.1</h3>
<h3>Subheading 1.2</h3>
<h3>Subheading 1.3</h3>
<h3>Subheading 1.4</h3>
<h2>Subheading 2</h2>
<h3>Subheading 2.1</h3>
<h3>Subheading 2.2</h3>
<h2>Subheading 3</h2>
<h3>Subheading 3.1</h3>
<h3>Subheading 3.2</h3>
<h3>Subheading 3.3</h3>
<h2>Subheading 4</h2>
</body>
</html>
Note that while using nested headings, it’s important to maintain the proper hierarchy of heading and not skip heading levels. Skipping heading levels can lead to confusion and make it harder for users to navigate the content.
Hence, by properly using heading tags and maintaining the correct hierarchy, we can make our content more accessible and easier to understand the organization of a page for users.
How to use HTML Headings Correctly?
While using HTML headings, it is important to follow these guidelines:
1. Use H1 for the Main Heading:
We should use the <h1> tag for the main heading of a web page. It should be descriptive and relevant to the page content. It should also include the main targeting keyword that the page is targeting.
2. Use H2 to H6 for Subheadings:
We must organize subheadings hierarchically, with the most important subheading using the <h2> tag, followed by <h3>, <h4>, <h5>, and <h6>. Each subheading should be descriptive and relevant to the content of the section it is presenting.
3. Don’t Skip Headings:
It is a very important to use all six heading tags, even if some sections of the content don’t have subheadings. This is because it helps to maintain the hierarchy of the content and makes it easier for search engines to understand the structure of the web page.
5. Don’t Overuse Headings:
We should use sparingly headings and only to denote the main topics of a web page. Overusing heading tags can lead to a confusing hierarchy and make it harder for users and search engines to understand the content.
Best Practices to use HTML Headings for SEO
Headings in HTML help the search engine to understand and index the structure of a web page. Proper use of headings can help to improve the accessibility, usability, and SEO of a web page. Here are some best practices to follow:
1. Include Targeting Keywords in Headings:
You must include the main keyword in the <h1> tag and use variations of the keyword in the subheadings. It helps to signal to search engines what the page is about and can improve its relevance for specific search queries.
2. Use Descriptive and Relevant Headings:
Make sure that the headings accurately reflect the content of the section and are relevant to the topic of the web page. Always avoid using clickbait-style headings that are misleading or irrelevant to the content.
3. Use Consistent Formatting:
Consistent formatting of headings helps to improve the readability and organization of a web page. Use the same font size, color, and style for all html headings on the web page.
4. Avoid Using Images as Headings:
Search engines cannot read images, so using images as headings can negatively affect the SEO of a page. Instead, use text-based headings and format them using HTML tags.
5. Test Your Headings:
Make sure that your headings are perfectly formatted and visible on all devices, including desktop, tablet, and mobile.
In this way, by following the guidelines and best practices outlined in this section, we can optimize our headings for both users and search engines.
Google Search FAQs
Q. What is the difference between H1 and H2 headings?
A: We use the heading h1 for the main heading of a page, while we use h2 heading for subheading that is less important than the main heading.
Q. How many h1 headings can we use on a web page?
A: It is recommended using only one h1 heading per page, as it helps to clearly signal the main topic of the page.
Q. Can we skip heading levels?
A: It is generally not recommended to skip heading levels, as it can lead to confusion in the hierarchy of the content.
Q. Can we use images as headings?
A: While it is possible to use images as headings, but we do not recommend it because search engines cannot read images and this negatively impact the SEO of a page.
In this tutorial, we have discussed HTML heading with various important examples. Hope that you will have understood the basic points of headings and practiced the coding.
Thanks for reading!!!