Headings are for SEO

One way Google’s algorithms determine the context of content on a page is by looking at the page’sheadings. The way semantic markup is used throughout a site, including h1, h2, and h3 tags, helps us to understand the priorities of a site’s content. One should not fret, though, about every single H tag. Using common sense is the way to go.

Google linked to the W3C specification, part of which reads

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.

Use Headings to Give Your Pages Structure

Headings, also known as h-tags, are the h1, h2, h3, h4, h5 and h6 that you see inside the HTML of many pages. Their purpose is to give structure to a story, much like an outline gives structure to a report or term paper. If it helps, think if this as your page’s skeleton.

H1 – The page headline. It should contain the main them of the page and most important keyword or keywords. There should be only one.

Nearly all pages should include an h1. Most pages never go beyond the h3. Just use the outlines that makes sense on your pages and you will be fine.

Headings are Not for Design

Nowhere in the W3C specification does it suggest using headings as design hooks. Unfortunately, many designers persist in using h tags to define how text should appear. Here is an example from a CSS file.

Every time the designer of this page wants extra-large maroon text with small caps he encloses those words in an h1 tag. The h2 has its own look too, as does the h3 and h4 and so one. You often find these types of headings in menus and sidebars, outside of the page’s main content.

Using headings for design destroys a page’s outline. It withholds the easiest way for you to share with search engines what’s important on your page.

Designers have an alternative. They can use class and id tags in their HTML.

<p class="side-nav-header">This is the Page Headline</p>

Your designer can format the appearance of the class side-nav-header in the CSS file…