More Than One H1 Tag On A Single Web Page

Posted on

With the introduction of HTML5 comes some new concepts that weren’t previously available in HTML 4. If you aren’t designing your new websites with HTML5 currently, I think you should start, and this is one of the reasons why. With the new specs, you are now allowed to have as many H1 header tags on your page as you wish. This is because in HTML5, certain elements create new “sections” in the document outline. If you have an article, you can nest a header inside creating a new section allowing the use of another H1 tag.

Let me explain for you. Previously, in HTML 4 the document outline worked differently because there were no sectioning elements. When you created your document, everything inside the body tag was basically a child of that document – as so in HTML5, but not we can create sort of “sub documents (sections)” with the new elements. Each article creates a section which has their own context and as such are siblings of one another. Each article and section is now entitled to its own H1 tag.

Example:
Say we have a blog and each post is its own article. Many people would list these separate posts in an ul. Now, we can safely use the more semantic article. See Below:

HTML 4:

<ul>
	<li>
                  <h3>Post 2</h3>
                  <p>This is the second post.</p>
        </li>
        <li>
                  <h3>Post 1</h3>
                  <p>This is the first post.</p>
        </li>
</ul>

HTML5:

<article>
         <header>
                  <h1>Post 2</h1>
         </header>
                  <p>This is the second post.</p>
</article>
<article>
         <header>
                  <h1>Post 1</h1>
         </header>
                  <p>This is the first post.</p>
</article>

If you are scared to use HTML5, you shouldn’t be. Yes, there are old browsers, but those are being phased out quicker and quicker with how cheap personal computers are becoming in the recent years.

Here are some resources to help you ease into using HTML 5 and multiple H1 tags.

HTML5 Shiv for Internet Explorder 8 and below.

<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->

HTML5 Document Outline Checker:
http://gsnedders.html5.org/outliner/