Markup pour les interfaces à onglets

Question

J'ai vérifié une des solutions de couple pour les interfaces à onglets (y compris jQuery UI), et le balisage suit toujours le même ul-li-un modèle:

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

Est-ce considéré comme une meilleure pratique, et pourquoi? Jusqu'à présent, j'ai toujours utilisé des balises span ou div, et tout a bien fonctionné. Aussi, pourquoi les balises "a"? Sont-ils juste là pour déclencher le hover et les états actifs sur les navigateurs plus anciens?

Answer 1

Il est un balisage sémantique pour plusieurs raisons:

1. Il est une liste non ordonnée de choses, à savoir Titre 1, Titre 2, etc.

2. Si JavaScript est désactivé, vous avez div éléments avec les ID de tab1 et tab2 dans votre balisage, les liens se comportent alors correctement et vous envoient vers la droite div.

3. Il rend les onglets accessibles.

Et il y a beaucoup de reasons for using semantic HTML.