title: Using jQuery UI Tabs with a custom HTML Layout
body: <p>The markup required by <strong>jQuery UI Tabs</strong> is like following...</p>
  
  <pre><code>&lt;ul&gt;
    &lt;li&gt;Tab1&lt;/li&gt;
    &lt;li&gt;Tab2&lt;/li&gt;
    &lt;li&gt;Tab3&lt;/li&gt;
  &lt;/ul&gt;
  &lt;div&gt;
    Panel 1
  &lt;/div&gt;
  &lt;div&gt;
    Panel 2
  &lt;/div&gt;
  &lt;div&gt;
    Panel 3
  &lt;/div&gt;
  </code></pre>
  
  <p>That is good enough in some cases, but in other cases where <strong>SEO</strong> and <strong>usability</strong> are top priorities, this markup is not the better. I would have working jQuery UI Tabs with the following markup...</p>
  
  <pre><code>&lt;div id="tabs"&gt;
    &lt;div class="panel"&gt;
      &lt;h3&gt;Tab1&lt;/h3&gt;
       Panel content 1
    &lt;/div&gt;
    &lt;div class="panel"&gt;
      &lt;h3&gt;Tab2&lt;/h3&gt;
       Panel content 2
    &lt;/div&gt;
    &lt;div class="panel"&gt;
      &lt;h3&gt;Tab3&lt;/h3&gt;
       Panel content 3
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>It is that possible?</p>
  
  <p>I found here (<a href="http://christianyates.com/blog/semantic-tabs/semantic-tabs-jquery" rel="nofollow noreferrer">http://christianyates.com/blog/semantic-tabs/semantic-tabs-jquery</a>) another plugin that solve this problem, but I would use the jQuery UI Tabs plugin.</p>