Странный вопрос

5-10 элементов

Как угодно.

кнопки

Если ссылки — <a>, если кнопки — <button>, если кнопки, но достало спорить с браузерами — <div>.

https://benfrain.com/we-need-a-better-button-its-too-slow-and-wont-behave/

div модный и пожалуй нет причин его не использовать, раз уж есть css

Какая нафиг производительность для 10-ки кнопок? Вы издеваетесь?

В реальности таких кнопок надо вывести более 100. Интересно что тратит меньше ресурсов

делай div потому что в div можно сделать на css кнопку с подсветкой на hover и нажатие. плюс divы можно через css менять местами для разных размеров и ориентаций экрана:

всю верстку оборачиваешь в <div id=«wrapper»> и на js по событию ориентации экрана/размера добавляешь wrapperу подходящий класс. а затем в разных css-файлах(vertical.css, horizontal.css, smartphone.css, desktop.css и т.д. можно отдельно сверстать для каждого варианта).

а вот с <a> придется потрахаться, он злее и не всегда визуально хорошо выглядит.

Ребят, вы чего пишете то, какие div... Если это «кнопка» значит button, если ссылка значит a, если блок то div. Если вдруг отпадут стили, что юзер увидит?

Я надеюсь ты просто троллишь

Сам ты модный:)

Если вдруг отпадут стили, что юзер увидит?

Если вдруг отпадут стили, то надо что бы не отпадали. Регрессивность сейчас уже никого не волнует.

Не имеет значение. ИМХО разница если и будет, то минимальная.
Но я бы действовал согласно семантике, если JS - то <button>, если ссылка - то <a>, в некоторых вариантах возможен и div.

Нет слов :-D

Хорошо, другой пример, ты видел когда нибудь не семантичную верстку с медленным соединением? А еще бывают слепые люди которые используют скрин ридер и если у тебя верстка див на диве и дивом погоняет.. ты сам понимаешь

В реальности таких кнопок надо вывести более 100

Ты что-то делаешь не так.

Я к тому что семантику не дебилы придумывали

и на js по событию ориентации экрана/размера

Потому-что media queries ещё не изобрели

div уже не модный, нынче в моде section и article. Чёткие пацаны делают кнопки на них. Правда некоторые дебилы считают что это не семантично, но это очевидный бред, ведь section и article дофига семантичные и каждый такой тег даёт +3 к семантичности страницы.

а вот с <a> придется потрахаться, он злее и не всегда визуально хорошо выглядит.

Но ссылки div'ами делают только мудаки.

Ссылки — это то, что меняет URL, если что.

и если у тебя верстка див на диве и дивом погоняет

aria-role.

Нет, я не отрицаю, что button часто лучше, но всё же.

А еще бывают слепые люди которые используют скрин ридер и если у тебя верстка див на диве и дивом погоняет.. ты сам понимаешь

Бывают, но в реальности это прописывается в требованиях, ты же не будешь оптимизировать «верстку» под 99.9% юзкейсов годами?

Url меняется через history api. Я так делал чтоб не перезагружать общую для всех страниц часть и УМВР.

https://benfrain.com/we-need-a-better-button-its-too-slow-and-wont-behave/

https://benfrain.com/we-need-a-better-button-its-too-slow-and-wont-behave/

Они не работают, я проверял. На андроиде4.0 например игнорируется размер экрана. Жирнолис тоже не очень дружит с ними, хотя казалось бы на десктопе то должно работать.но нет

http://img.aucland.ru/market-photos/mrUrTj.jpg

А у меня всё работает. И у остального человечества работает. Может проблема не в media queries, а в тебе?

Url меняется через history api. Я так делал чтоб не перезагружать общую для всех страниц часть и УМВР.

Только ты ломаешь средний клик и букмарки по правому клику.

Не надо оптимизировать:) можно же просто правильно написать сразу и везде у тебя будет все оптимизировано сразу:)

man семантическая вёрстка

Зачем использовать <a href='/somepage.html'> если можно использовать прогрессивные JS фрэймворки с shadow DOM, history API и web elements?

Ах да, ещё man преждевременная оптимизация.

А при чем тут клик? В доке на history api про это не сказано. Может быть вы наблюдали баг браузера?

Если учитывать то, что семантически правильный button в среднем на странице используется в 2-3 экземплярах, то я не понимаю о чем статья, я понимаю если у тебя их на странице 100500, но как часто такие кейсы?

Да это все понятно, но просто не находишь обсурдным брать стол и делать из него стул, если изначально можно просто взять стул?)

Нет, уж точно не во мне. У меня не работал пример из mozilla developer network. Возможно я просто что то сделал не так как хотел браузер но у меня нет друзей-телепатов чтоб узнать чего это браузер не слушается

А при чем тут клик? В доке на history api про это не сказано. Может быть вы наблюдали баг браузера?

Когда ты делаешь ссылку через <a href=...> и пользуешь свой history api — она ведёт себя как ссылка, выдаёт URL цели по наведению, открывается в новой вкладке по средней кнопке мыши, сохраняется/копируется/букмаркается из контекстного меню.

Когда мудаки пользуют history api из обработчика button или div — ничего не работает.

Когда не умеющие в веб люди пользуют <a href=«javascript:void(0)» для кнопок просто потому, что не открыли для себя cursor: pointer — ну что с них взять.

Это не семантика, а банальная юзабельность. Вот эти вещи не делаются CSS/aria/чем угодно и именно из-за них нам ещё нужен тег <a>, тем более что

а вот с <a> придется потрахаться, он злее и не всегда визуально хорошо выглядит.

миф.

Зачем использовать <a href='/somepage.html'> если можно использовать прогрессивные JS фрэймворки с shadow DOM, history API и web elements?

Все прогрессивные фреймворки могут отрисовать этот ваш <a href> и заставить его работать с history API.

С точки зрения производительности разницы совершенно никакой. Если это кнопки, то <button>, если ссылки, то <a>, если лишь бы извратиться, то <div>.

Что мешает прилепить ко всем <a> обработчик onclick, который сделает всё, что вы хотите (вам всё равно придётся лепить onclick к <div>)? Если что это можно сделать массово, сразу ко всем <a> или с определённым классом, а определять куда переходить по параметру href. Отличие в том, что браузер будет понимать, что это ссылка и корректно обработает средний клик, закладки и т. д.

Более того, нормальные фреймворки именно так и делают из коробки. На том же Meteor я пишу <a href=«some-page»>, а по факту если ссылка не внешняя происходит переход с помощью history API и динамической подгрузки контента.

Ну да, у всех работает, у тебя не работает, проблема очевидно не у тебя.

Отличие в том, что браузер будет понимать, что это ссылка и корректно обработает средний клик, закладки и т. д.

Это же отвратительно! Возникает ощущение что ты находишься на какой-то вшивой странице, а не используешь продвинутое single page application! Фу таким быть.

Семантически, кнопки правильно использовать только внутри форм. А теперь представь, что ты не только говно-сайты клепаешь, а еще и различные web-морды в стиле программ для крупных систем. Недавно реализовывали такую для системы остатков поставщиков крупной фирмы, дак вот там юзабилити-специалисты еще и пытались минимизировать количество различных кнопок на странице. В итоге различных элементов (не только кнопок) больше 500 на одной странице (по сути все страницы состояли из одних элементов для работы с функционалом), и скриптами постоянно добавлялись/удалялись. Вот там, это было бы актуально, если бы кто-нибудь из хтмээльников додумался бы до button[type=«submit»] вне формы. А так да, если у тебя на странице одна форма, то внутри (чисто семантически) лучше использовать button, опять же, учитывая то, что он стилизуется гораздо хуже чем тот же пресловутый div. Как-то так.

Семантически, кнопки правильно использовать только внутри форм.

Может мы говорим о разных семантиках, но той семантике которую знаю я ни чуть не мешает кнопка вне формы.

Да, изначально в HTML button рассматривался только как элемент формы, но на сколько мне известно сейчас это это представление закопали.

но той семантике которую знаю я ни чуть не мешает кнопка вне формы.

Я об этом написал.

если бы кто-нибудь из хтмээльников додумался бы до button[type=«submit»] вне формы

Опять же, это лишняя трата в плане производительности (смотрите тесты выше) и жертва стилизации в противовес тем же a или div. Но в плане семантики button[type="submit"] вне формы тоже валидно, согласен. Тогда скажу по другому: я бы советовал использовать button только внутри форм.

Чёт не пойму. А зачем сабмит вне формы?

Ну и сотни кнопок на одной странице это что-то странное, мне трудно такое представить. Или оно там было разделено на несколько (много) независимых вьюшек (табов или чего-то такого) которые отображались по очереди?

Скажи это людям с мобилок, лол.

Задолбаешься прописывать и потом ещё реализовывать поведение, идентичное кнопке. Это тебе сейчас кажется «а что такого, клик и клик», а потом пользователи тебя четвертовать захотят.

Нокия 3310? окай

Тогда скажу по другому: я бы советовал использовать button только внутри форм.

Contexts in which this element can be used:
Where phrasing content is expected.

https://developers.whatwg.org/the-button-element.html#the-button-element https://developers.whatwg.org/content-models.html#phrasing-content

Шёл бы ты со своими советами.

если бы кто-нибудь из хтмээльников додумался бы до button[type=«submit»] вне формы

The form attribute is used to explicitly associate the button element with its form owner.

https://developers.whatwg.org/the-button-element.html#the-button-element