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.
