Where to place HTML 5 elements when using SPRY?

I'm building a website using HTML 5 markup, but have hit a problem regarding where to place the the NAV element - because I'm using a SPRY 'Tabbed Panel' for both the navigation and the content:

<header>
 <div id="TabbedPanels1" class="TabbedPanels">
  <ul class="TabbedPanelsTabGroup">
   <li class="TabbedPanelsTab" tabindex="0">Home</li>
   <li class="TabbedPanelsTab" tabindex="0">Profile/li>
   <li class="TabbedPanelsTab" tabindex="0">Contact</li>
  </ul>
 <div class="TabbedPanelsContentGroup">
  <div class="TabbedPanelsContent">Content 1</div>
  <div class="TabbedPanelsContent">Content 2</div>
  <div class="TabbedPanelsContent">Content 3</div>
 </div>
 </div>

I thought the best place to insert the NAV element would be by wrapping the UL element, but this breaks the SPRY Tabbed panel (maybe I can just fix this by changing some file paths in the CSS?).

Also, seeming as the main content of the site will be held in the 'Content' areas of the tabbed panel, I'm wondering what the best approach is for building this site, with regards to NAV and ARTICLE etc, so that is semantically correct?

Perhaps I am going about this the wrong way?

Solution

I'm not familiar with SPRY, but you are probably correct in that you will need to edit the CSS if you wish to have more semantic markup.

Assuming each "tab" is it's own article, here is how I would mark this up:

<div id="TabbedPanels1" class="TabbedPanels">
    <nav>
        <ul class="TabbedPanelsTabGroup">
            <li class="TabbedPanelsTab" tabindex="0">Home</li>
            <li class="TabbedPanelsTab" tabindex="0">Profile/li>
            <li class="TabbedPanelsTab" tabindex="0">Contact</li>
        </ul>
    </nav>
    <div class="TabbedPanelsContentGroup">
        <article class="TabbedPanelsContent">Content 1</article>
        <article class="TabbedPanelsContent">Content 2</article>
        <article class="TabbedPanelsContent">Content 3</article>
    </div>
</div>

It isn't a big change, but it adds at least some better semantics to the markup while still leaving the majority of the structure intact so that there don't need to be MASIVE changes to the SPRY framework code.