Don’t use HTML headings for styling purposes

This is a very, very common mistake – in fact, I wouldn’t be surprised if the majority of web designers are doing it wrong.

Websites, whether they’re hand-coded or use a CMS like WordPress, use “tags” to define pieces of content on the webpage, whether it be a paragraph, image, heading, or various other types. If you’ve published a page before, you’ve doubtless seen a dropdown menu where you can select the various text formatting options.

The title of this post, for example, is an <h1> tag, i.e. a first-level heading.

This is an <h2> tag, a second-level heading.

And this is an <h3>.

HTML goes all the way down to <h6>.

You may notice that the font size gets progressively smaller by default. This is where SEO problems arise, due to a difference between how Google analyzes the code of a page, and how humans design the page visually.

Google, as it crawls a web page, looks at the heading tags to get a feel for the hierarchy of content on that page. The <h1> is interpreted as the subject of the page, <h2> are sections within that topic, <h3> are subsections of the <h2>, and so on.

On the other hand, people who are designing a website and want “big” text will often use an <h1> tag to do so. It’s a perfectly understandable choice, because it gives you the biggest font size. However, often times the biggest text on a website won’t be the main subject of the page – it’s often a slogan or tagline, for example. They’ve solved a design problem (the font is now the size they wanted) but introduced a major SEO problem (Google now thinks their tagline is the subject of the page).

How can those two different sides be reconciled?

The solution is to make font size work independently of heading level. HTML doesn’t work this way by default, though. Some CSS will be required to remedy the issue. That’s probably why this mistake is so common – it’s quite a bit more work to do it “right”.