What is an HTML heading?
Let’s start with the basics. A web page is written in a markup language and one of the most basic markup elements is a hierarchy of headings. The top heading being H1 followed by H2, H3 and all the way down. The headings are used to create a page structure, sort of a page outline.
Most common html heading mistakes.
Using headings out of order
The error that we see most often on websites is that the headings are listed on the page out of order. You might have an h1 followed by h6. A correctly formatted page will have ONLY one h1 heading, a number of h2 subheadings and some h3 under each h2. The structure of the heading should resemble a tree. You can check your page structure in the browser by installing an extension like Headings Map.
Using headings as a page design element.
Each WordPress theme comes with pre-formatted font size, style and color for each heading level. It could be tempting to use the heading tag just to quickly adjust the font size of a specific text on the page. If, from a design perspective you want a particular sentence to appear in large font you will just tag it as h1. If this text is not part of your hierarchical structure, this technique will create a lot of chaos on the page. The font size and style in this case should be adjusted directly in the text, not via h1/2/3 settings.
Using generic text in the heading
Another common mistake when it comes to headings is naming the sections of your page with generic words that do not aid in understanding of the content. Words like “More”, “Here”, or “About” make a poor choice for a heading because they do not provide any context of what message your page is trying to communicate, or what the following section of the page will be about. Try to replace the generic words with keywords and expressions specific to your page.
Why are the headings so important?
The heading structure is used by search engines to index your site. If your headings are out of order the site might be ranked lower because of the poor structure and design. The message of your site will also not get communicated clearly and your domain might not rank high for the keywords you are trying to target.
The second reason to keep your heading structure organized is accessibility. Clearly defined structure allows visitors with any type of impairment to quickly locate the section of the page they are interested in.
Not sure if your page has the proper heading structure? The developers from the Watermelon team can review your website and provide you with recommendations.
Photo by Ann H: https://www.pexels.com/photo/wooden-figurines-in-rows-7422276/