HTML5: Should I use h2's or h3's for content inside of an aside element?

I've been poking around online but I can't seem to find a definitive answer on this. Given the following HTML5 structure below, should I be using h2's or h3's inside of my aside element for content titles?

I know it's okay to use multiple h1's as long as they are inside a section and/or article element. But i'm not sure what I should do within my aside? I think I should stay away from multiple h1's in an aside but im not sure about h2's and h3's.

Thanks!

<!DOCTYPE html>
<html>
<head>
<title>Heading Tags</title>
</head>
<body>
<section>
    <header>
        <h1>Main Section</h1>
    </header>

    <article>
        <h1>Article Title 1</h1>
        <div>Some Content Here</div>
    </article>

    <article>
        <h1>Article Title 2</h1>
        <div>Some Content Here</div>
    </article>

    <article>
        <h1>Article Title 3</h1>
        <div>Some Content Here</div>
    </article>
</section>

<aside>
    <header>
        <h1>Side Bar Heading</h1>
    </header>

    <div>
        <h2>Side Content Title 1</h2>
        <div>Some Content Here</div>
    </div>

    <div>
        <h2>Side Content Title 2</h2>
        <div>Some Content Here</div>
    </div>

    <div>
        <h2>Side Content Title 3</h2>
        <div>Some Content Here</div>
    </div>
</aside>
</body>
</html>

Solution

You really shouldn't be using multiple <h1>s on a page. The h tags are primarily used to dictate document structure. The Web Content Accessibility Guidelines (WCAG) 2.0 standard shows examples that the h1 tag should title the page. Most states (Illinois, for example) have their own outlines on Accessibility standards. Illinois' in specific outlines that there should only ever be one h1 tag on a page and that it's contents be similar to the <title> tag. While this can be, and probably will be, argued, it makes semantic sense to only use one h1 tag and let the other 5 layers sit nested correctly.

Really, common sense plays a big role in structuring your other h tags. Imagine looking at your site in an 'outline mode' when you're done. Does it make sense?

For example, say you want the outline of your site to look like this:

Page Title

Content
 - Article
   - Sub-article
 - Article

Sidebar
 - Weather
 - Local News

Then this is how your heading tags should be working:

<header>
  <h1>My News Website</h1>
  <nav></nav>
</header>
<section>
  <article>
    <h2>Article Title</h2>
    <p>Blah Blah Blah.</p>
    <h3>Sub-heading in Article</h3>
    <p>More blah blah blah.</p>
  </article>
  <article>
    <h2>Article Title</h2>
    <p>Blah Blah Blah.</p>
  </article>
</section>
<aside>
  <h2>Weather</h2>
  <p>Weather information.</p>
  <h2>Local News</h2>
  <ul>
    <li>News Item</li>
    <li>News Item</li>
  </ul>
</aside>

As long as things you want at the same level share the same heading number, then you're on the right track. Things that relate to a heading that contextually make sense to be "under" said heading should increment the heading number by one.

Lastly, you can have an outline of your completed site shown to you by using the HTLM 5 Outline. Check it out here: http://gsnedders.html5.org/outliner/