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

Question

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

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

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

Answer 1

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

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

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

3. Обеспечивает доступ к вкладкам.

И существует множество причин для использования семантического HTML .