Есть ли какой-то best practice создания HTML (JS) табов?

Question

[Aristotel Paskalov]

Посмотрел несколько уроков на ютубе по разработке табов.

Некоторые делают их на чистом HTML + CSS при помощи псевдокласса :target, некоторые пишут их на чистом JS, а некоторые при помощи jQuery.

Каждый вариант по своему хорош, но я так и не знаю, какой вариант является best practice, чтобы использовать его в дальнейших проектах.

Что вы думаете по этому поводу, как вы пишете табы?

Answer 1

[Алексей Уколов]

Пожалуйте: https://inclusive-components.design/tabbed-interfaces/

Comments

[Aristotel Paskalov]

Спасибо большое, обязательно ознакомлюсь

[Fedor Vlasenko]

Лучше не знакомьтесь ибо автор не знает, что для семантики табов нужно использовать
dl, dt, dd

[Алексей Уколов]

Fedor Vlasenko, кому нужно?

[Fedor Vlasenko]

Алексей Уколов, прочтите значения приведенных мной тегов
Наверное и Вам, чтоб не давали ссылки на забугорные статьи Аля индусов с неправильной семантикой

[Алексей Уколов]

Этот элемент служит контейнером для списка пар терминов

Fedor Vlasenko, я прочитал, там ничего про табы нет и по смыслу они не подходят. Жду ссылки. Или хотя бы теорию, на что может повлиять использование именно definition list в данном случае. Я серьёзно отношусь к семантике, но это не точная наука в вебе.

Пока что я больше склонен доверять автору из Smashing Magazine (среди прочего).

[Fedor Vlasenko]

табы html dd dt пользуемся поиском Google
Алексей Уколов,

[Алексей Уколов]

Fedor Vlasenko, то есть доказательств нет? Ну, тогда прошу проследовать на выход из ответа.

В статье, кстати, автор свой выбор тегов чётко объясняет.

[Fedor Vlasenko]

Какие тебе нужны доказательства? То что не используешь тебе доказывать?
Есть семантика, ты можешь хоть абзацами с кнопками писать и стилизовать
Но есть специальные теги созданные для семантики, парcинга поисковыми роботами твоих данных. А так може вовсе без тегов писать зачём надо этот огрызок xml

[Алексей Уколов]

Fedor Vlasenko, я хочу, чтобы вы привели какие-то ссылки на сторонние уважаемые источники, которые поддерживают ваши слова. Где написано, что семантика табов — это обязательно dl+dt+dd?

[Алексей Уколов]

Вот вам ещё один пример использования такой семантики из другого уважаемого источника: https://css-tricks.com/tabs-its-complicated

[Алексей Уколов]

Fedor Vlasenko, вчера я отвечал с телефона, поэтому не очень подробно. Сегодня отвечу дательне. Итак.
Смысл этого сайта - в накоплении знаний. Поэтому, если вы пришли писать уточнения или комментарии к ответу, они должны быть а) полезными и б) обоснованными.
С полезностью тут трудо спорить - семантика действительно очень важна и если с ней что-то не так, следует обращать на это внимание.
А вот в плане обоснованности пока что всё грустно. Вы только безапеляционно заявили, что нужно делать так, кто так не делает - индусы, а почему нужно делать именно так нам предлагается найти в поисковике.

Так вот, повторюсь - я очень уважительно отношусь к семантике и после первого же вашего комментария пошёл читать описание тега на MDN. Там на тему табов нет ничего и то определение, которое дано назначению тега, под табы тоже не очень подходит. В других источниках с репутацией я тоже ничего не нашёл. И, судя по вашему молчанию, вы тоже.

Когда мы что-то делаем, полезно понимать с чего мы взяли, что нужно делать именно так, и к каким последствиям наши действия приведут. Я попытался вести диалог в ключе этих двух факторов, вы же ни по одному из них ничего существенного не ответили. Похоже, что вы участник карго-культа, т.е. производите какие-то действия как ритуал, не вникая в их историю и смысл.

Подчеркну - я не говорю, что вы не правы и для табов никогда нельзя использовать dl+dt+dd. Я говорю давайте разберёмся. Давайте даже оставим за скобками историю вопроса - кто сказал, что надо делать именно так и подумаем самостоятельно. Зачем нужна семантика? Она помогает программам разбирать содержимое страницы. Здесь можно выделить два контекста - поисковые роботы и экранные читалки. Под первый контекст, на мой взгляд, не подходит формальное определение тега - табы, это не список определений. Под второй, на мой взгляд, лучше подходит навигация, потому что табы - это навигация и есть, как правило. Автор статьи, на которую я дал ссылку, является признанным экспертом в области доступности сайтов и свой выбор в статье обосновывает.
Но, уверен, что может быть ситуация, когда уместно делать табы именно через definition list, если их содержимое к этому располагает.

Так что вы, пожалуйста, либо начните предметную дискуссию, подкреплённую какими-то фактами, либо, как уже было сказано выше, проследуйте из ответа в неизвестном направлении. Особенно я буду благодарен, если вы не будете подменять мои слова своими, как вы это делали выше - я нигде не предлагал отказываться от семантики, я предлагал подумать.

Answer 2

[Павел]

jQuery к моему сожалению, а может и не только моему, уже устарел(
нативный js хорош но если есть вариант использовать css , это будет быстрее и легче для браузера

Comments

[Aristotel Paskalov]

Согласен, как-то не хочу использовать jQuery для подобных задач

Answer 3

[profesor08]

Есть несколько правил.

1. Реализация переключения табов не должна быть связана с дизайном этих табов. Ты должен иметь возможнось использовать любой html в качестве элементов интерфейса, кнопки, контент и тд.
   
2. Элементов может быть сколь угодно, причем они могут повторяться. Как элементы табов, так и сами блоки.
   

Из этого следует то, что ни html элементы, ни css, не способны в полной мере покрыть эти задачи. А значит придется писать реализацию на js, навешивая дата атрибуты на элементы, чтоб определить их назначение и отделить одни табы от других.