Can I use more than one H1 tag per page? It depends.

Can I use more than one H1 tag per page? It depends.

A while back, Giovanna wrote about the general guidelines for using header tags (h1 through h6) on individual web pages. These guidelines go a long way toward keeping things organized. Treating page content as a self-contained document, and using different header grades to organize it, makes the page easier for a reader to parse. H1 tags clue the reader into what the main topic of the page is, and descending headers clue the reader into supporting sections. The guidelines also keep things simple for your website design: treat the header tags as you would headers for an outline. The page basically organizes itself.

HTML5 introduced content-specific tags that tell search engines and web developers how the page is organized, and so changed how we can best use header tags. Before I go any further, I want to advise you: if you are not using the content-specific HTML5 tags, it may be better to stick with the simple rules. Google’s algorithm has made progress, but keeping things simple minimizes the possibility of misinterpretation. If you are using a CMS (like WordPress), you are probably not taking advantage of the HTML5 elements, so sticking with the simple rules may be your best bet.

The HTML5 elements are <section>, <article>, <header>, <footer>, <hgroup>, <nav>, <aside>, and <video>. Each one designates a section of content, much like our very familiar <div>s. However, where a <div> is a Swiss Army Knife for content sectioning, the content-specific tags are designated for specific types of content. Hence the names like <article>, <header>, and <nav> (these were probably pulled from the most common names for divs that were used for each content type).

As far as page organization goes, <div>s and the HTML5 tags are functionally identical. They divide the page into sections for organizing, styling, and formatting. The most important thing that the content-specific tags do is tell search engines what type of content is in the section. And the search engines are smart enough to know that the main header for an <article> section may be different from the main header for a page. So there’s no getting mixed up.

The upshot? Header tags can be used to organize content sections of different types. But the simple rules don’t get thrown out completely. They just apply to individual sections, instead of the page at large. So just one h1, use h2s as the next level down, and so on. We get a little more design variation, but not necessarily “flexibility” with regard to header tags. There are still best practices!

When in doubt, keep it simple. The simple rules still work, and the search engines still like them. They keep things clean for the user, which should be your top concern. And, depending on your website’s design, the simple rules may be stylistically the best choice.

No Comments

Sorry, the comment form is closed at this time.