EBizInsider

Why should you use heading tags and what exactly are they for? — Heading Tags have been around since the very beginning of HTML. Their semantic value has always been present, but only recently did it become an important device for driving website traffic and assisting website navigation.

What Are Heading Tags — Heading Tags are valid HTML code that help structurally organize your website content into meaningful sections. There are currently only six levels of Headings: H1 through H6. H1 is used for the primary headline of the article within a section or page. H6 is merely a sub-section about 5 levels beneath the main headline of the article. It is important to note that Heading Tags should never be used as design devices. Often Website Browser makers will make the H1 tag gargantuan and bold to assert the headline�s importance. The true value of the H1 tag is in its default meaning. The presentation of the H1 tag is only beneficial during the design phase and in relation to the overall design layout.

Recently, Heading Tags have become a navigational device that facilitates website browsing. Modern Website Browsers, accessibility-focused Website Browsers and Online Screen Readers are built to recognize Heading Tags as meaningful headlines and allow the site visitor to quickly skim over each heading on a long page in order to find the article they seek.

Perhaps most important, Heading Tags have quickly become a crucial Search Engine Optimization device. Search Engines have always been focused on delivering the most relevant content to their users. A search engine has no way of determining the most relevant article or content when comparing similar text from one article to the next. When the Search Engine is able to compare a succinct �overview� of that article, that is the headline, the relevance becomes clear. By stating the headline of an article, Search Engines are able to narrow down search results and offer your site�s contents to the appropriate visitor.

How to Use Heading Tags — There are many opinions on the proper use of headings on a website. You can review books, websites, and blogs and still not be 100% sure of the correct use of Heading Tags. That is primarily because their proper use is quickly summarized by the World Wide Web Consortium (www.w3c.org) as such: �A heading element briefly describes the topic of the section it introduces. Heading information may be used by user agents, for example, to construct a table of contents for a document automatically.� Reference: http://www.w3.org/TR/html401/struct/global.html#h-7.5.5.

This explanation of a Heading Tag is purposefully simple so that developers and content managers have flexibility when organizing their content.

One way of using Heading Tags is to think of them in the context of newspaper design.

Newspapers usually draw attention to a story with an easily understandable headline. This headline would be your H1 tag. The page of the newspaper may have sub-sections under the main story to help support the main story. These would be your H2-H6 tags. Here�s where it gets a bit more complicated. Newspapers will very rarely feature only one article on the front page. There will often be auxiliary articles of lesser importance (but still attention-worthy) on the front page. This is done in order to use as much available page space as possible. The main headline for these lesser articles would still technically be H1 tags. Remember that the Heading Tags are about meaning and not presentation. The presentation is an added layer that occurs later in the content delivery process.

One Heading Per Page or Multiple? — Obviously, the web is not bound by the same limitations as a printed newspaper. Why would anyone cram so many articles onto a homepage when additional pages are readily available and better yet, free? If you have 3 separate articles and one of them has sub-sections, it would seem obvious that using 3 H1 tags and one H2 beneath it would be acceptable. Ask 3 �experts� and you might hear 3 different opinions on the �proper� use of Heading Tags for this scenario. The �best practice� and �standard� of Heading Tags use is in the eye of the user. We�ll leave it at this: your content should dictate your use of Heading Tags. Until a standard is in place that strictly defines the proper method of organizing your content, your website�s success will have the final say in what is the best practice.

Should Headings Be Used for Navigation? — It�s a new source of debate: should you use Heading Tags for your Navigation bar? Logically, A Table of Contents or Navigation area could be seen as sections but how exactly would the navigation section relate to the overall article? Technically it wouldn�t. A larger concern is that if you structure your pages with the navigation area as a section, with a heading, you would most likely want to hide the heading from view on your website. This tactic of �cloaking� text onscreen could be seen as a black-hat SEO technique and you could be penalized for it. There is currently no right or wrong answer, but I would lean away from assigning Navigation as a section with a heading.

What Not to Do! — Jumping back and forth with what you can do but might not want to do can be maddening. It is significantly easier to tell you how not to use an H1 tag.

You may be tempted to us the H1 tags throughout your website in order to fool a search engine into associating keywords from your body copy. This means that you are dumping in every keyword you know in an attempt to get a better page rank for your product. Never, I repeat never do this. You will eventually be caught and your page rank or possibly site rank will suffer. Remember, headings should be tied to stories or sections beneath them. If you need to emphasize a keyword, use the “em” tag for emphasis or “strong” for more emphasis.

Don�t skip around. This isn�t an unbreakable rule but there is no point in moving from an H1 tag to an H3 tag. The point of Heading Tags is their meaning. If you only have one headline and one subheading on your page, your second tag really should be H2.

Don�t use Heading Tags to make your page text large/small/bold. Heading tags are all about structure and meaning, not aesthetics.

Don�t embed HTML Headings within other HTML Headings. The proper use of an H1-H6 tag, per the W3C specification is to have text or �inline� elements within the tag. This means no paragraphs “p”, block quotes “blockquote”, block containers “div”, or other block level elements.

Don�t place your company name and/or logo in the H1 tag. This is a common mistake when using Heading Tags. If your homepage is focused mainly on your company name and tagline, using an H1 could be acceptable. It all comes down to what you are trying to say to your visitors. Imagine a newspaper with a headline that only reads �NEW YORK TIMES September 5th, 2007.� You see the point.

Where Do We Go From Here? — The Web is ever-growing and the Standards that code purists and Search Engines cling to are changing. It�s no exaggeration to say that by the time you read this, a �better� method for organizing and using Heading Tags will be in hot debate. The one constant is the purpose behind the Heading Tags. By using Heading Tags you are guaranteeing that your articles and content will be organized and readily understood by web technologies today and probably tomorrow as well.

---

Goodies — Read more about the standards driving the web today at this link. W3C Spec This handy tool will show you if your site is well structured and offers a formatted outline view of the content!this link.

Name (required)

E-Mail (required)

(Will not be published)

Website

Comments

Security Code

Enter the code above into this box. There's no letters, only numbers. We just want to make sure you're human.