Используйте ссылки и кнопки правильно. Пожалуйста

[Jogger]

Я просто оставлю это здесь:

[Xtray]

И тут есть переход на другие страницы, поэтому тоже ссылки, всё правильно же…

[alfixer]

Когда браузер открывал пустую страницу с адресом файла, чтобы его скачать, эти времена давно прошли.

[mSnus]

Я, конечно, понял, что вы хотели сказать, но как вы сумели так построить фразу? Я в восхищении.

[eabrega]

Похоже на «инверсию зависимостей», но только в русском языке. :)

[Yoskaldyr]

Тут еще бы хорошо вспомнить новый дизайн фокса с кучей сомнительных решений с постоянной игрой угадай или найди :)

[Xtray]

А что тут не так? При нажатии «Читать далее» происходит переход на другую страницу, поэтому там и ссылка…

[evil_me]

Но выглядит она как кнопка.

[Xtray]

Так ведь речь в статье не о дизайне, а о тегах.. :)

[Pavel1114]

Оформить ссылку в виде кнопки это всё же не так страшно как если бы там действительно был тег .

[Dartess]

Пример, чтобы расставить всё по своим местам
На макете отрисована фраза «Войти». Если клик по ней должен открывать окно для ввода регистрационных данных на этой же странице, это кнопка. Если при нажатии должна открываться отдельная страница для входа, это ссылка.

Давайте всё немного запутаем. Если по макету вход — в окне, которое открывается поверх страницы, а к примеру в письмах мы хотим давать прямую ссылку на вход, то логичным вариантом будет сделать «Войти» ссылкой, которая вместо перехода на новую страницу при помощи JS будет открывать окно входа. Итого получается, что это вполне может быть ссылка, при клике по которой открывается окно для ввода данных.

[alex-khv]

Кажется автор забыл упомянуть ещё про accessibility.

[lovermann]

Моему сайту уже под 20 лет, и я до сих пор ссылки оставляю ссылками, с подчеркиванием. Мне по душе такой олдскульный формат, потому что мне кажется, что он более всего интуитивно понятен… даже молодому поколению! Ссылочка должна быть синенькой и подчёркнута! :)

[mSnus]

Изначально подразумевалось, что ссылка -- это ссылка на ресурс (сайт, страницу, якорь), а кнопка -- выполнение некоторого действия (отправка формы, открытие окна). Это было примерно тогда, когда создавался HTML.

Но эти понятия давно смешались из-за того, что броузеры не умели нормально стилизовать кнопки и обрабатывать события на них. Это было примерно тогда, когда создавался DHTML.

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

И теперь совершенно непонятно, зачем всегда "использовать правильно". Сейчас встречаются иногда даже забавные конструкции, где A служит оберткой вокруг BUTTON!!

Наоборот, можно было бы выкинуть тег A!Оставить только параметр onclick для любых элементов. Вместе с параметром rel это решило бы все возможные задачи по обработке кликов, что людьми, что поисковиками

[Iskin]

Хорошая статья. Но исправьте, что :focus это не нажатие состояние, а выбранное через таб-навигацию. Нажатие состояние ссылки/кнопки — это :active.

[kspshnik]

А ещё было бы круто, если бы таким «странным» использованиям прописывали грамотные aria-role… ;o)