Over the next few weeks, I will be making theme changes to the overall design of this website.
It will be exciting!
Heading tags H1 through H6 are tags that are used for creating of headings on a web page. It is done in the same way as an informative book, think about a college book. Headings have a top-down hierarchy with the most important tag is the h1 heading tag and will usually be the title of a post.
There are two ways headings can structure content. In classic HTML, there would be one H1 heading tag on each page, a few of H2 headings and so on. These would all combine to form an outline of the page.
In HTML5, each sectioning tag, an article or section for example,
starts again with an H1. This was done to make it easier to combine several components onto one page and still have a good outline.
Structuring the Entire Page Using Headings
In the case of HTML4, it is logical to use one H1 per page where the H1 is the main title of that page. In most cases, The H1 is not a brand name or website name. The few exceptions are the home page or about page. This works because it makes sense to use a brand or website name on these pages.
On a category page that H1 would be the category name and on a product page the product name. It’s not that hard to understand this logic and it is recommended to use headings in this way.
H2 is for subheadings of an H1. Use it to divide content into scannable blocks; both Google and your visitor will like it. H3 is for subheadings of that H2, preferably. I want to mention that this all isn’t new. Over the last many years, not much has changed in the way it is recommended to use headers as best practices. This doesn’t mean that all websites or website designers follow this. There are some that may put the company or brand as the heading for all pages on a site. While every page is technically about the company or brand, but it is too vague and needs to be more specific. If a web developer follows the later, in my opinion, they are old-fashioned regarding best practices.
What I disagree with is when people use headings to style elements of a website such as Call Now. They use H1 to style the phone number. A web designer should know better. Google’s SEO Starter Guide mentions this. Second, when people just put an entire paragraph in an H2 or H3, because it is easier that putting it in the correct way with paragraph styling.
Using Uncommon Headings
Does a site use any H4, H5 or H6 as headings? Using an H4 could be useful if the text is longer than 1,000 words and you want to add an extra layer in the page structure or for scannable for mobility purposes. An H4 could be used for sidebar or footer headings that are sections within that particular section of a page. Using an H1 or H2 is the sidebar or footer headings seems like duplicated use of an H1 or H2 tag when used to structure the page.
Some WordPress themes do not pay that much attention to these headings, sometimes making H5 text smaller than paragraph text. If the lesser headings are used, just be aware of this design element. In this case, adjustments can be made within the theme’s coding pages.
Headings and SEO
What value do headings have for SEO? Well for one, headings help bots grasp the main topics of a long post when a website is crawled. Search engines scan your post, why not make it as easy as possible. Second and the most important reason is for the end user, the visitor of a site. If a page is detailed, use headings with the user in mind and make it easy to understand the content quickly.
It is always best to use headings from the perspective of the end user as well as the purpose of the page.
There are other things like text content and schema.org markup that will help page rankings more than a heading structure. Using a consistent heading structure isn’t hard. It only helps visitors.