Кнопки и ссылки в дизайне и коде (HTML, PHP) сайтов


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

Только на две вещи на сайте можно нажать — и получить от этого какой-то результат: это именно кнопки и ссылки. Так в чём же их отличие? В возложенных на них функциях.

Ссылка (а точнее гиперссылка) — это часть документа (HTML или PHP страницы), при нажатии на которую пользователь переходит на другой документ, страницу, файл или директорию. Таким образом, ссылки являются элементом навигации по сайту, т.е. пользователь только просматривает страницы сайта в пассивном режиме. Например, ссылкой может быть фраза «перейти на форум»: в этом случае юзер просто перенаправляется в этот раздел сайта в качестве пассивного наблюдателя.

Кнопка — это в первую очередь элемент управления либо взаимодействия с сайтом. Нажатие на кнопку предполагает совершение пользователем какого-то активного действия. Это может быть, например, фраза «зарегистрироваться на форуме»: регистрация подразумевает занесение данных пользователя в базу данных сайта, что уже является активным взаимодействием с ресурсом.

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

В этом случае довольно полезно уметь верстать на HTML или уметь работать с PHP. Зная принципы этих технологий, определить как оформить данный элемент — как кнопку или как ссылку — довольно просто. Если в вёрстке вы бы сделали его тэгом <input> — это кнопка. Если тэгом <a href="" >ссылка.


Поделиться ссылочкой:

Чтобы ознакомиться со шрифтами html вам стоит посетить этот ресурс.