Question

I have the following HTML problem.

Description

I’m building an ‘authors’ page, and each author has a tabbed system. In one tab I have the Bio and on the other I have Other Information.

HTML code:

<div class="author-container"><img src="author-1.jpg" alt="">
  <ul>
    <li><a href="#inner-tab1">Bio</a></li>
    <li><a href="#inner-tab2">Other Info</a></li>
  </ul>
  <div id="inner-tab1">Bio copy</div>
  <div id="inner-tab2">Other Info copy</div>
</div>

<div class="author-container"><img src="author-2.jpg" alt="">
  <ul>
    <li><a href="#inner-tab1">Bio</a></li>
    <li><a href="#inner-tab2">Other Info</a></li>
  </ul>
  <div id="inner-tab1">Bio copy</div>
  <div id="inner-tab2">Other Info copy</div>
</div>

<div class="author-container"><img src="author-3.jpg" alt="">
  <ul>
    <li><a href="#inner-tab1">Bio</a></li>
    <li><a href="#inner-tab2">Other Info</a></li>
  </ul>
  <div id="inner-tab1">Bio copy</div>
  <div id="inner-tab2">Other Info copy</div>
</div>

Yes, you’ve detected the issue: duplicate IDs (inner-tab1 and inner-tab2)

Although the tabs actually work fine and I could certainly leave these duplicate IDs as is, I know this is not the right way to do it.

Question

So my question is: Is there another HTML attribute that can replace the id tag but still have the tabs work?

Additional Information

To create the tabs I’m using the jQueryUI framework, and that framework uses id in the container a specific tab should display.

Thanks in advance.

Answer 1

Although this is already implemented as is, the only solution would’ve been to use a simpler tab system that wasn’t based on IDs.

Unfortunately I wasn’t able to implement simpler tabs and I had to bite the bullet and leave the duplicate IDs on the markup. It does work, but is far from ideal.

Lesson learned.

These tabs would’ve been the correct ones to use: http://nuevvo.com/labs/simpletabs/

Thanks all for your input.