4

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?

Christophe
  • 27,383
  • 28
  • 97
  • 140

1 Answers1

5

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.

Residuum
  • 11,878
  • 7
  • 40
  • 70
  • i think 2nd point is a bit inaccurate. you still need to add `` inside the `div` for the link to work – Lukman Nov 16 '10 at 02:07
  • @Lukman - No you don't. The `DIV` will have a corresponding `ID` attribute. – Gert Grenander Nov 16 '10 at 02:10
  • I think Lukman's point is that the hashtag will look for a name attribute, not an id. – Christophe Nov 16 '10 at 02:15
  • 1
    @Christophe - The `ID` is unique and acts as an anchor as well. From http://www.w3.org/TR/html401/struct/global.html#h-7.5.2: "The id attribute has several roles in HTML: ... As a target anchor for hypertext links." – Gert Grenander Nov 16 '10 at 02:23
  • thx! I've found more details about anchors here: http://stackoverflow.com/questions/484719/html-anchors-with-name-or-id – Christophe Nov 16 '10 at 02:31