Web Developers: Please Stop Using the Hx Tag as a Design Element

Lately I’ve been seeing a lot of sites where the designers were a bit lazy on the coding of the visual elements. Especially when it comes to creating new styles for the style sheet. In CSS, it’s pretty easy to develop a style that allows you to have certain portions of text display exactly how you want. But apparently, coming up with a unique style and name is just. too. difficult. So instead of naming a new style, the developers just style an Hx tag and then plaster it throughout the site.

One site that we’ve been working with has just come from a fresh re-design. Once we started digging into the code, we’ve found that the designers have taken some pretty extreme liberties with the Hx tags.

Using the H1 for the title is an abuse I’ve seen many times before. It’s easy to slip an image into the H1 tag, so designers do this to display the company logo. But by doing so you’ve taken a great piece of SEO real estate out of play. Every page now has the exact same H1 tag: an image.

Don’t get me wrong, I don’t think that the Hx tags are near as important as many people think. But I do believe they play an important role in putting the page hierarchy into expression. It’s like the outline for a term paper. The way you use Hx tags should outline the importance of various elements on the page. The H1 tag would be the equivalent of the title of the term paper. (For the sake of this conversation, let’s leave out the < title > tag.) At the very least you want the H1 tag to be unique on every page. It’s the first thing that visitors read, let them know what they’ll expect.

Continuing with our example above, you see that the “Quick Search” is wrapped in an H3. Is the search really a part of the outline of the page? Of course not. In fact I’ll go so far as to say that nothing in the navigation (top, side bottom or otherwise) should be in an Hx tag. Navigation is really nothing more than the table of contents for the site. OK, it’s a bit more than than, but you get my meaning.

Finally, look at the products. Each product, which here includes the product name and number, is wrapped in an H2. Like the Search above, this was done just for the simplicity of styling how the text looks. The problem with using the Hx tag on 10-30 products on each page creates a pretty severe case of Hx-bloat. At this point the hx tag loses all meaning. This is a case using the < strong > tags would be sufficient at separating the products from the rest of the information without over-using the Hx tags.

This is more closely aligned to how we would lay out the page architecture:

You’ll see that we have cut down the use of the Hx tags pretty significantly. By using the H2 twice, we’re saying from a structural standpoint, that the top portion is just as relevant as the product portion. But an H3 could work well here too.

Like anything, too much of a good thing is bad. Hx tags are not a magic SEO solution and play only a minor role in the overall optimization of a page, but it’s valuable enough to take the time to get right. Make sure your web developers are not styling the Hx tags as a shortcut to creating unique style elements.