Geek Answers Handbook

Layout for tabbed interfaces

I checked a couple of 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>

This is considered best practice and why? So far, I have always used span or div tags, and everything worked fine. Also, why are the tags "a"? Are they only here to cause freezes and active states in older browsers?

+4
source share
1 answer

This is semantic markup for several reasons:

  • This is an unordered list of things, namely Title 1, Title 2, etc.

  • If JavaScript is disabled, then you will have div elements with the identifiers tab1 and tab2 in your markup, then the links will lead correctly and send you to the right div .

  • This makes tabs available.

And there are many reasons for using semantic HTML .

+5
source

More articles:


All Articles