How To Use H1-H6 HTML Elements Properly

Proper Use Of H1, H2, H3, H4, H5, H6 header elements

The six heading elements, H1 through H6, denote section headings. Although the order and occurrence of headings is not constrained by the HTML DTD, documents should not skip levels (for example, from H1 to H3), as converting such documents to other representations is often problematic. W3C

However you do not need to use all six elements to structure your pages.
For example:

Website Design Basics

Here is some text

HTML

Here is some text

CSS

Here is some text

Use Only One H1 Element on any page

At Hobo we aim to use the header elements as explained above, and generally only reach level H3 as each page is a concise investigation of one topic. We only use one H1 element per page on most pages.
However the following is also semantically correct:
For example, here is where I live:

Earth

Europe

UK

Scotland

Renfrewshire
Greenock

You can use any number of H2, H3, H4, H5, H6 Elements on any page

You can use any number of H2-H6 elements on any one page, but this might be a bit cumbersome for the typical web designer.
So as you can see there is a few definitive ways to implement these elements. We would recommend that possibly you keep your pages specific about one topic and use

One H1 Element (tag as it is commonly talked about)
As many as required H2 elements to denote sections on the page (you should really only need one or two or 3 if you are keeping your page concise.
Consider using H3 Elements for useful link groups to other relevant sources, or for information not immediately relevant to the page and so “3rd” in the pecking order.

Search Engines Love H1 Elements – We Think!

It has been argued that the main search engines pay more attention to H1 elements these days, so you might want to consider this when creating your pages, and include your best keywords in it. While the THEORY is sound, there is little actual evidence that H1-H6 headings improve SEO (For Google).
Use H1 for top-level heading

H1 is the HTML element for the first level heading of a web document:
If the document is basically stand-alone, for example Things to See and Do in Scotland, the top-level heading is probably the same as the title.
If it is part of a collection, for example a section on Dogs in a collection of pages about pets, then the top level heading should assume a certain amount of context; just write

Dogs

while the title should work in any context: Dogs – Your Guide to Pets.

Unlike the title, this element can include links, emphasis and other HTML phrase elements.

Source: (Link)

Leave a Reply

Your email address will not be published. Required fields are marked *