Browse cities

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!

Recommended Stories

What Are Some of the Most Popular Websites Built on Drupal in North America?
Let's say that you're considering using Drupal for your next web project. You've read about its unmatched… (Read more)
Adriana Cacoveanu / Feb 25 '2020
Apigee Developer Portal Kickstart or Apigee’s Integrated Portal? What’s the Best Developer Portal Solution for You?
Here you are, facing an impossible dilemma: is the Apigee Developer Portal Kickstart on Drupal 8 the best solution… (Read more)
Adriana Cacoveanu / Feb 13 '2020
Is It a Good Idea to Go with Drupal 8 Commerce? Why Yes, Why Not?
How viable is it to have your online store running on Drupal 8 Commerce? Why not go with... Magento 2 or Shopify… (Read more)
Adriana Cacoveanu / Feb 11 '2020