I try to make semantic site based on that concept: I have normal nav:
<nav>
<ul>
<li><a/></li>
...
<li><a/></li>
</nav>
And content in tabs which work together as same as in liteaccordion.
How it works in litecordion(#2):
Content have to be inside <li>
but it's not valid. So the pure HTML, before js start has normal:
<div class="content"/>
...
<div class="content"/>
<nav/>
structure. On load, JS move every content to the right li tab:
<nav>
<ul>
<li class="foo content">
<a/>
<div class="foo content"/>
</li>
...
<li class="bar content">
<a/>
<div class="bar content"/>
</li>
</nav>
And then litecordion starts...
But I made some piece of job (#1 on image) to make it 100% semantic even after JS manipulation. Navigation in there is just on another layer than content div. It detects actual position of tab and set position of appropriate content. But there's a lot of events to calculate.
Live example, It's complicated and slow and buggy.
So I'm asking is it worth time to create semantic separate navigation and content for users with JS? Do I need to detect some search bots etc. ? The example will use ajax, but for persons/bots without js it will be full semantic.