Heading Tags

Probably one of the easiest things you  can do to insure better search results for your Web pages is to make sure that heading tags have been used properly. If you look at the top of this page, you will see “Heading Tags” in large, bold print. This helps users and search engine figure out what this page is about; heading tags.

Heading Tags Explained

Heading tags are used to make the print larger and bolder in HTML web pages just as headings are used in newspapers and other forms of print. Headings help the reader scan the page quickly for the information they are looking for. Search engines are getting smarter every day but they still need guidance in finding what makes a page relevant.  Search engines use heading tags as a way to better understand what the page, section, or subsection is about.

The HTML code for a heading is fairly straightforward. Headings use an opening tag (no backslash) and a closing tag (with backslash). The text to be used as the heading goes between those two tags.

H1 heading tag code

Headings Summarize

Think of a heading as a summary. It is declaring a few words that are basically more important than the text that follows. For example, if a page consists of only paragraphs, how is the search engine going to determine what is the most relevant subject on that page when classifying what page should be returned in a search?

Usually, we try to write so that the most important information is near the beginning of the page and near the beginning of a paragraph. This will help with determining relevancy but still leaves the subject wide open. How else will it be categorized? Repeated words; if you say “dogs” several times, the search engines will make the assumption that your page is about dogs.  At the same time, if you repeat your keywords too much, you will begin to look like “spam” to the search engines. Maybe we don’t need headings? We are overlooking one factor; user experience. Search engines want to return the best content possible, and the best content includes a way for users to rapidly and accurately find what they are looking for and that means sub dividing pages into sections that are easy to find, outlined by headings.

Heading Hierarchy

Web page heading tags come in 6 sizes; H1 to H6. Backwards of the way one would think, H1 is the most important and usually the largest (depending on styles and fonts). The importance and size drops off as the number is increased to 6.

One H1 Per Page

Typically, H1 should describe the entire page. If this cannot be accomplished in a few words then you are probably using too wide of a subject to start with. In this case divide your subjects into 2 or more pages to get them close on topic. If for some reason you have no other choice, then go ahead and subdivide your page with 2 or more headings however this process can confuse readers and search engines alike. Think about what ONE newspaper article would look like if there was three headings inside it. “Dog Bytes Man”, “Salon Closes No Clients”, “Growing Your Own Vegetables”, imagine the confusion.

Once you have a precise main heading, you can use H2 subheading tags to describe sections on the page. Sometimes you may find that you will need H3 heading tags for sub sections on the page.  An example of heading hierarchy is:

Heading tags for HTML

HTML Heading Hierarchy using H1, H2 and H3 tag

If for some reason you find yourself trying to use H4 through  h6 heading sizes, you probably have again started out with too wide of a subject and it’s probably a good time to reassess your content and maybe split it off into two or more pages.

Graphic Headers

Using images in your webpage is a great way to demonstrate your idea; however, using an image for your page header is not so great. Search engines cannot read images so any text that is in that image never gets indexed. Many use an alternate method involving CSS that moves the HTML H1 tag far off the page so that only the image will be seen. This is a little more work, but far better than having no H1 tag at all.