Разметка для закладок интерфейсов

Question

Я проверил пару решений для закладок интерфейсов (в том числе JQuery UI), а разметка всегда следует тому же ули-ли-шаблон:

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

Является ли это считается наилучшей практикой, и почему? До сих пор я всегда использовал теги span или div, и все работало нормально. Кроме того, почему теги «a»? Они только здесь, чтобы вызвать зависание и активные состояния в старых браузерах?

Answer 1

Это семантическая разметка по нескольким причинам:

1. Это неупорядоченный список вещей, а именно: Название 1, Название 2 и т.д.

2. Если JavaScript отключен, то вы будете иметь div элементы с идентификаторами tab1 и tab2 в вашей разметке, ссылки будут корректно вести себя и отправят вас вправо div.

3. Это делает вкладки доступными.

И есть много reasons for using semantic HTML.