Every web page on the internet can have proper HTML headings. These headings are identified by the following heading tags <h1> <h1> <h2> <h3> <h4> <h5> and <h6> where the „h” stands for heading.

HTML Headings – Why use them?

Heading tags are used for two important things:

Firstly, headings are a great way of making titles and subtitles visible for your visitors or users. It can also be used to summarize the next paragraphs and help your visitors understand what they will read under the heading.

Secondly, headings are used to indicate the most important pieces information on your page to search engines. Some SEO experts seem to think headings are not that important when it comes to optimization but every little bit helps.

 

Here are the rules

HTML headings on a page need to follow certain rules, as follows:

Each HTML page can contain one or more H1 to H6 tags

Each HTML tag needs an opening tag and a closing tag - <h>yourheading</h>

There are six possible levels of tags in total: h1, h2, h3, h4, h5 and of course h6, h1 being the first level heading and most important one and h2 being the second level heading, h3, the third level heading and so on.

 

HTML Headings – Best Practices

Here are two examples of properly used HTML headings for a test page:

<h1>Your-title<h1>

<h2>Your-subtitle<h2>

<h3>Your-sub-subtitle<h3>

<h4>Your-sub-sub-subtitle<h4>..etc.

This page example now has the main title in H1 and less important but still relevant titles or summaries in tags such as H2, H3, H4, etc. Keep in mind that this template can only be used on certain types of content. If your content doesn’t allow H1, H2, H3, H4 splitting, you can opt for a different approach and still use headings properly.

 

Another way you can properly use HTML headings is as follows:

<h1>Your-title<h1>

<h2>subtitle-1 <h2>

<h2>subtitle-2 <h2>

<h2>subtitle-3 <h2>

<h2>subtitle-4 <h2>

In the example above subtitle 4 is just as important as subtitle 2, but not as important as the title. With this template you are telling search engines that all sub titles on your page are equally important – this heading template maintains good readability and structure.

 

HTML Headings – The wrong way

Sometimes people make mistakes when it comes to their proper use of HTML headings. It can happen when you are trying to make a subtitle text bigger with a heading – don’t do it, just increase the font size. Here is an example of poorly used HTML headings:

<h1>Your-title<h1>

<h3>subtitle-1 <h3>

<h4>subtitle-2 <h4>

<h2>subtitle-3 <h2>

<h3>subtitle-4 <h3>

In this example, we start with H1 and then H3, H4, back to H2 and back to H3. Always keep in mind that HTML headings need to be logical – imagine it as a book where H1 is the title and H2 can either be a chapter or a sub-chapter.

 

Development

We do Web development

Go to our Web development page!

Visit page!

Browse cities

Recommended Stories

How OPTASY Creates Client-Centric Drupal Experiences
Agile methodology has revolutionized the way web development projects are executed, particularly for complex… (Read more)
10 minutes /
Drupal Security: Best Practices for Protecting Your Website
In 2024, cyberattacks are becoming increasingly sophisticated, so safeguarding your Drupal website is paramount.… (Read more)
10 minutes /
Drupal Community: The Power of Collaboration and Open Source
In the dynamic landscape of web development, the strength and vibrancy of a community often define the success of… (Read more)
10 Minutes /