Head

Form

Lower Head

EBLOG

E-Marketing Performance Blog

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.

Overusing Heading 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:

Overusing Heading Tags

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.

Stoney G deGeyter

Stoney deGeyter is the author of The Best Damn Web Marketing Checklist, Period!. He is the founder and CEO of Pole Position Marketing, a web presence optimization firm whose pit crew has been velocitizing websites since 1998. In his free time Stoney gets involved in community services and ministries with his “bride enjoy” and his children. Read Stoney’s full bio.

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

  1. Cameron Clark says:

    I agree. Hx tags, along with many other HTML tags, are abused and used out of context by way too many designers (with the table tag being perhaps the most abused tag of all time…poor thing). Thankfully, that’s slowly changing as designers learn to use semantically correct code—meaning that tags are used for what they MEAN, not just how they LOOK. <em> means emphasis, not simply italics. <table> means a grid or table of data, rather than just being an aesthetic layout device.

    In your post, you said:

    “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…”

    You seem to be implying that styling existing HTML tags, like Hx tags, is usually just a case of laziness.

    One of the beautiful things about CSS is that–besides styling existing HTML tags–it’s also possible to create any a unique class or ID for any object in a webpage that can then by independently styled by CSS. And while this is very often appropriate, it should be clarified that web designers SHOULD use standard HTML tags, like Hx tags, whenever appropriate and meaningful in their layouts.

    Too often, I see designers who’ve just picked up CSS running to the opposite end of the spectrum, littering their layouts with <div> & <span> tags that have no meaning whatsoever (both are just generic containers), when they could use used standard HTML tags with meaning attached to them instead (like Hx tags). A classic case is something like <div class=’title’> being used where a <h1> would have actually been more appropriate and meaningful.

    In short, when creating webpages, every element should considered in terms of its meaning and hierarchy in the page. The tag you use for something should have everything to do with its meaning and as little as possible (ideally nothing) to do with how you’re going to make it appear with CSS.

    And if you can’t figure out how to get it to appear how you want with CSS…well then, you need to learn more CSS, because virtually anything is possible.