multiple h1 tags
In the web development business many guidelines, best practices and rules have been created over the years. Ironically, to become better at what we do, it's often a good thing to question these rules from time to time. Simply living by them is not enough, as most rules are never that solid to apply in 100% of all circumstances. Today we'll take a look at multiple h1 tags on a single page, and how some rules could be bent in some particular circumstances, no matter how logical the basic rule might sound at first.
crappy headings
The html heading setup is pretty horrid, but since we're stuck with it we just have to make the best of it. In html, we have 6 hX tags to our disposal, each describing a different heading level. The weak point of this system is that there is no generic heading element, creating a setup that is often more rigid than asked for.
From these six heading tags, the h1 tag is without a doubt the most important one. It is supposed to contain the main heading of a page, describing what can be found on this exact page. It is typically nested as the first element inside the content area of the page.
only 1
Since the h1 tag is supposed to hold the title describing the content of a specific page, logically there is only one h1 tag needed per page. This quickly became a rule of thumb for us web developers. No matter how you structure the headings following the h1 tag or where you put your h1 tag in the structure (fe, h2 tags in the header might precede the h1 tag in the content), just as long as there is only one per page it's all good.
The importance of the h1 tag was soon picked up by search engines, which made the h1 tag a big deal in SEO too. The content within the h1 tag was considered important to filter keyword selection for finding a page within your site. To counter abuse, search engines soon limited themselves to the first X number of characters of the first h1 tag in the source (so no keyword stuffing or multiple h1 tags for SEO). For more detailed information about this subject, just search the web as it is filled with articles on the h1 tag in relation to search engine optimization.
more than 1
So far so good, until a few weeks ago, when I was started on this particular page. Without paying too much attention I ended up with three h1 tags on one single page. When I found out my first reaction was to remove them right away, but after taking another good look at the situation, I actually found that the structure as was made quite a lot of sense. So what had happened?
The page I was working on was a landing page. They've been out of fashion for some time, but in some situations they are still very much needed. Since I live in Belgium (which has three official native languages and a lot of political issues) the choice of language is often a delicate problem. Setting a default language often leads to a can of political nonsense you don't want to be involved in, so a language page is actually a pretty decent alternative.
I've said that each page should have one main title, which of course makes a lot of sense. But in the case of a language page we find ourselves in a unique situation. This page is meant to receive people that speak different languages. There is of course still one title, but for each existing language this title should be available in the corresponding language. So for each language, a separate h1 tag should be used. The net result is a page that holds multiple h1 tags, holding the same content but translated for each target audience.
conclusion
Of course this doesn't mean you should just forget about the initial rule, which is still very valid and a pretty definite guideline. What this article hopes to do is to give you a solid reminder that no rule is to be followed without critical consideration from time to time. In some cases, breaking a rule or guideline might actually result in a better setup.