Question

I checked out a couple solutions for tabbed interfaces (including jQuery UI), and the markup always follows the same ul-li-a pattern:

<ul class="tabs">
<li><a href="#tab1">Title 1</a></li>
<li><a href="#tab2">Title 2</a></li>
</ul>

Is this considered a best practice, and why? So far I have always used span or div tags, and everything worked fine. Also, why the “a” tags? Are they just here to trigger the hover and active states on older browsers?

Answer 1

It’s semantic markup for several reasons:

1. It is an unordered list of stuff, namely Title 1, Title 2 etc.

2. If JavaScript is disabled, then you will have div elements with IDs of tab1 and tab2 in your markup, the links will then behave correctly and send you to the right div.

3. It makes the tabs accessible.

And there are a lot of reasons for using semantic HTML.