Привет! Это первая статья из серии разборов элементов веб-вёрстки для дизайнеров интерфейсов (и немного аналитиков). Разберём атрибуты разных тегов, свойства, которые можно к ним применить, поведение в разных обстоятельствах. А главное – как они влияют на то, что видит пользователь на экране (и слышит), и какие неочевидные моменты можно продумать в дизайне заранее.
Начнём со ссылок, которые обозначаются в HTML тегом <a></a>
.
Материал будет лучше усваиваться, если вы уже понимаете, как устроены в целом HTML и CSS и заглядывали мельком в DevTools (консоль разработчика). Я использую обобщения и опускаю технические моменты, которые могут не влиять на видимое пользователями, но остаются критичными для разработки и экранного «закулисья». Приглашаю вас вооружиться знаниями, но всегда советоваться с разработчиками и заранее проверять с ними дизайн-решения.
![](https://webcf.waybackmachine.org/web/20240311162202/https://habrastorage.org/getpro/habr/upload_files/e9a/18b/7c7/e9a18b7c765502ab7b5d554751446bdc.jpg)
Ссылка в вёрстке не обязательно текстовая. Внутри тега <a></a>
может быть картинка, иконка, список, контейнер, таблица и многое другое. Единственное ограничение – в ссылку не вкладывают интерактивные элементы, в том числе другие ссылки, кнопки, контролы.
Атрибут href
Это, собственно, сама ссылка. Если просто задать значение атрибуту, например:<a href="https://www.ozon.ru/"></a>
, то пользователь пока ничего не увидит, ведь между открывающим и закрывающим тегом ничего нет. А вот так:<a href="https://www.ozon.ru/">Перейти на Озон</a>
– на странице появится кликабельная ссылка «Перейти на Озон».
При наведении на ссылку многие популярные браузеры отображают в левом нижнем углу адрес из атрибута href. Например, это все браузеры на базе движка Blink: Yandex, Chrome, Opera, Edge и др.
![Отображение адреса в левом нижнем углу браузера при наведении на ссылку Отображение адреса в левом нижнем углу браузера при наведении на ссылку](https://webcf.waybackmachine.org/web/20240311162202/https://habrastorage.org/getpro/habr/upload_files/c6b/2d4/268/c6b2d42680fb9ce04acff3842029d245.jpg)
А скажем, Safari не показывает ссылку при наведении. В сообществах иногда просят помощь с тем, чтобы «отключить» это отображение. Но так делать не стоит: безопаснее, когда пользователь может без специальных знаний увидеть, по какому адресу переходит. С мобильных устройств его, кстати, можно увидеть в контекстном меню по долгому нажатию.
![Контекстное меню ссылки на десктопном и мобильном устройстве Контекстное меню ссылки на десктопном и мобильном устройстве](https://webcf.waybackmachine.org/web/20240311162202/https://habrastorage.org/getpro/habr/upload_files/1ee/bcf/013/1eebcf0132de355fd4e538faa8fed8e9.jpg)
Якорную ссылку можно узнать по решётке перед id элемента, например:href="/#services"
. Кстати, чтобы отправить пользователя по клику вверх страницы, id не нужен. Для этого пишут href="#top"
или href="#"
. Так и работают на сайтах кнопки «Вверх».
По умолчанию переброс пользователя по якорной ссылке выглядит резко. Чтобы сделать скролл плавным, ссылке назначают CSS-свойство scroll-behavior: smooth
. А чтобы точнее настроить итоговое положение скролла, назначают CSS-свойство scroll-margin
и указывают, на сколько пикселей сместить скролл вверх или вниз относительно блока.
![Пример перехода по якорной ссылке «Услуги», расстояние от шапки до заголовка Пример перехода по якорной ссылке «Услуги», расстояние от шапки до заголовка](https://webcf.waybackmachine.org/web/20240311162202/https://habrastorage.org/getpro/habr/upload_files/d56/121/fb9/d56121fb940be5e15856cd3d09421107.jpg)
В качестве значения может быть не только URL, путь или id элемента, но и телефон или почта:
href="tel:+79996009060"
href="mailto:[email protected]"
По клику на номер телефона устройство пользователя предложит совершить звонок или другое возможное действие с номером телефона в установленных приложениях (набор действий зависит также и от ОС).
![Что происходит по нажатию на ссылку-телефон на десктопном и мобильном устройстве Что происходит по нажатию на ссылку-телефон на десктопном и мобильном устройстве](https://webcf.waybackmachine.org/web/20240311162202/https://habrastorage.org/getpro/habr/upload_files/938/80a/3d5/93880a3d56bedb6d8cdf928f5d109cd2.jpg)
По клику на почту устройство предложит открыть почтовую программу по умолчанию в данной ОС или ту, которую пользователь сам настроил, как предпочтительную для подобных ссылок.
![Что происходит по нажатию на ссылку-почту на десктопном и мобильном устройстве Что происходит по нажатию на ссылку-почту на десктопном и мобильном устройстве](https://webcf.waybackmachine.org/web/20240311162202/https://habrastorage.org/getpro/habr/upload_files/0ec/0be/2ab/0ec0be2abad9b887a7ab7bea8cb78dd7.jpg)
Кроме того, с помощью дополнительных параметров можно предустановить:
тему письма
текст письма
и даже почтовые адреса получателей копии (и явной, и скрытой)
Атрибуты title и aria-label
Title
хранит в себе текст, который нужно отобразить при наведении на ссылку в нативной всплывающей подсказке. Её внешний вид зависит от операционной системы, а сам текст не обязательно делать таким же, как название ссылки.
![Пример отображения title на MacOS Пример отображения title на MacOS](https://webcf.waybackmachine.org/web/20240311162202/https://habrastorage.org/getpro/habr/upload_files/5cb/cbc/6b7/5cbcbc6b75461f7cc5790f30cc6373aa.jpg)
Aria-label
тоже хранит в себе описательный текст для ссылки. Но он не отображается визуально, а служит для инструментов доступности. Это текст, который будет озвучен скринридером при фокусировании на элементе. Aria-label
обязателен для ссылок в виде картинок и иконок. Например, для иконки-крестика закрытия окна, иконки-карандаша редактирования параметров.
Атрибут target
Определяет, где откроется указанная ссылка:target="_self"
– на той же вкладке взамен текущей страницыtarget="_blank"
– в новой вкладке или в новом окне браузера (зависит от его настроек, но чаще всего в новой вкладке)
По умолчанию все ссылки открываются в той же вкладке, даже если не указать атрибут target.
Есть ещё два значения: "_parent" и "_top". Они встречаются там, где используются фреймы (как бы «страницы внутри страницы»). По сути, они позволяют сделать так, чтобы кликнутая во фрейме ссылка открылась целиком во всей вкладке, а не внутри своего фрейма. И для пользователя всё выглядело так, будто он просто перешёл на другую страницу. Обычно дизайнеру достаточно уточнить для разработчика, открыть ссылку в той же вкладке или в новой.
Атрибут download
Если добавить ссылке атрибут download:<a href="documents/example.pdf" download></a>
, то браузер предложит пользователю скачать файл, указанный по ссылке. Файл может быть любого формата.
По умолчанию скачается файл с тем названием, которое у него уже есть. Но можно задать другое название при скачивании, и это не изменит изначальное название файла. Например, благодаря:download="Мой пример договора"
, указанное значение отобразится как предустановленное в окне сохранения файла. Лучше не использовать специальные знаки, т.к. вероятнее всего, они будут автоматически конвертированы в нижние подчёркивания. К тому же, у файловых систем есть ограничения на использование специальных знаков в названиях файлов.
![Название файла при скачивании изменено относительно оригинала Название файла при скачивании изменено относительно оригинала](https://webcf.waybackmachine.org/web/20240311162202/https://habrastorage.org/getpro/habr/upload_files/c8b/38a/ad6/c8b38aad6818ad4391f80193a9851a8b.jpg)
Можно также настроить настроить разные названия для разных условий. Скажем, при скачивании документа в личном кабинете мы хотим добавить к названию договора фамилию пользователя, месяц или год. Тогда одними средствами HTML не обойтись: разработчик подключит Javascript, который обработает условия и подставит в HTML нужное значение.
Атрибут disabled
Если добавить тегу ссылки этот атрибут, она станет неактивной, некликабельной («задизейбленной»). В CSS-свойствах такой ссылки можно прописать параметры, по которым она будет отличаться от активной ссылки. Например, изменить цвет или добавить прозрачность.
Атрибут disabled можно назначить не только ссылке, а любому интерактивному элементу: кнопке, чекбоксу и т.д. Чаще всего неактивные элементы не меняются внешне при наведении или клике, чтобы дополнительно «подчеркнуть» визуально их недоступность. Однако ориентируйтесь на особенности вашего интерфейса.
Состояния активной ссылки
Активная ссылка, в свою очередь, бывает в разных состояниях. Их можно дифференцировать визуально. Давайте посмотрим в консоли разработчика, какие состояния могут быть у ссылки:
![Состояния ссылки в DevTools Состояния ссылки в DevTools](https://webcf.waybackmachine.org/web/20240311162202/https://habrastorage.org/getpro/habr/upload_files/38f/abd/c3f/38fabdc3fbef619728ceb1de11c51a5c.jpg)
В CSS-файле эти состояния прописываются при помощи одноимённых псевдоклассов. Грубо говоря, это выглядит, например так:a:hover {
и значит: "текст ссылки при наведении становится розовым".
color: #ff35eb;
}
Состояния в дизайне удобно называть так же, как в коде. Разработчикам понятнее, дизайнеры не путаются. Рассмотрим состояния ссылок (у других интерактивных элементов их бывает больше).
Active – элемент в момент тапа пальцем, клика мышью или нажатия клавиши выбора с клавиатуры (при работе с инструментами доступности).
Hover – элемент при наведении на неё курсора. На мобильных устройствах свойство проявляется, если на ссылку тапнуть и не отпускать.
Visited – «посещённая» ссылка (при этом пользователь не взаимодействует с ней прямо сейчас).
Focus и focus-visible. Давайте поэкспериментируем. Предположим, мы хотим заказать плитку, но у нас есть возможность работать только на десктопном устройстве и только с клавиатуры. Посмотрим несколько первых ответов в гугле на «купить плитку». Переходите по ссылкам и нажимайте клавишу Tab:
https://www.keramogranit.ru/
https://petrovich.ru/catalog/10042/
https://santehnika-online.ru/plitka/keramika/
Хм. Ничего не происходит. Хотя... меняется ссылка в левом нижнем углу браузера (если это Chrome, Yandex и что-то ещё на базе Blink).
Посмотрим ещё, переходите и нажимайте Tab:
https://shop.kerama-marazzi.ru/
https://www.maxidom.ru/catalog/plitka/
https://stroytorg812.ru/catalog/keramicheskaya_plitka/
О, выделяются по порядку все интерактивные элементы. Причём, обводка одинаковая на всех сайтах. Это срабатывает браузерный дефолтный фокус на интерактивных элементах при переходе по клавише Tab. Если при этом включить какой-нибудь скринридер, то названия элементов будут озвучиваться.
![Пример дефолтного фокуса на интерактивных элементах Пример дефолтного фокуса на интерактивных элементах](https://webcf.waybackmachine.org/web/20240311162202/https://habrastorage.org/getpro/habr/upload_files/245/04d/af2/24504daf201639027b4ff1db6c457362.jpg)
В первой подборке, где ничего не происходит, вероятно, дефолтный фокус отключили визуально. Это можно сделать, прописав в CSS нулевую обводку для псевдокласса :focus
. Таким образом, фокус на интерактивных элементах происходит (это заметно по меняющимся ссылкам слева внизу), но не видимо. С точки зрения доступности это плохо.
Во второй подборке дефолтный фокус сохранён. Но вы могли заметить, что в полях ввода он другой и вписывается в остальной дизайн. Это значит, что в них дефолтный фокус отключили визуально, но прописали новые стили для фокуса с помощью псевдокласса :focus-visible
. Его используют для того, чтобы сделать задуманный дизайнерами фокус в таких элементах, как поля ввода, где «сфокусироваться» можно не только с клавиатуры, но и мышью или тачпадом. Таким образом можно сохранить единство стилей сайта для большинства пользователей.
Обычно дизайнерам достаточно показать в библиотеке состояние фокуса для полей ввода и проверить, чтобы в реализации не отключили дефолтный браузерный фокус для остальных интерактивных элементов. Но есть сайты, где изменён и дефолтный фокус под дизайн сайта:
https://spb.leroymerlin.ru/catalogue/plitka/ – жёлтый фокус
https://www.apple.com/macbook-air/ – голубой фокус
Focus-within – состояние элемента, когда в фокус берётся связанный с ним другой элемент. Например, так можно выделить лейбл поля, в котором фокусируется пользователь, или вообще весь блок с формой. Посмотреть примеры
Target – элемент, у которого есть id, в момент, когда к нему перешли по якорной ссылке. Например, вот так:
![Ссылка с псевдоклассом :target приобрела жёлтый фон в момент перехода к ней Ссылка с псевдоклассом :target приобрела жёлтый фон в момент перехода к ней](https://webcf.waybackmachine.org/web/20240311162202/https://habrastorage.org/getpro/habr/upload_files/655/6a4/ebf/6556a4ebf66fea3c591a7190a9bf4b0f.jpg)
:target
приобрела жёлтый фон в момент перехода к нейСостояние элемента «в изначальном спокойствии», когда с ним не взаимодействуют, дизайнеры обычно называют default или enabled. Но будьте внимательны: существует псевдокласс :default
, который обозначает изначально выбранный из списка элемент. Например:
![Пример элемента с применёнными стилями для псевдокласса :default Пример элемента с применёнными стилями для псевдокласса :default](https://webcf.waybackmachine.org/web/20240311162202/https://habrastorage.org/getpro/habr/upload_files/f6b/880/ec4/f6b880ec4049669e902d260e3a24550c.jpg)
:default
Главное – договориться в команде и заонбордить разработчиков в дизайн-библиотеку.
Другие примеры стилизации текстовых ссылок
Какие визуальные свойства можно задать ссылке, помимо базовых цвета, подчёркивания, отступов?
Можно добавит элемент, обозначающий переход по «внешней» ссылке (ведущей на другой веб-ресурс). Скорее всего, вам чаще встречались элементы в конце ссылки, но можно добавить и в начало.
![Элемент внешней ссылки в конце и в начале Элемент внешней ссылки в конце и в начале](https://webcf.waybackmachine.org/web/20240311162202/https://habrastorage.org/getpro/habr/upload_files/8d5/66d/0e9/8d566d0e934f3a90d766574a51134b6c.jpg)
Это делается с помощью псевдоэлементов ::after
и ::before
соответственно. Они прописываются в CSS, узнать их можно по такой конструкции:
a::after {
content: ...;
}
В параметр content
можно прописать изображение (лучше отдавать в разработку svg). Таким образом, визуал и размер элемента может быть каким угодно. А ещё можно использовать не изображение, а символ из иконочного шрифта – так не будет посылаться дополнительный запрос на сервер (который был бы нужен для получения изображения).
Ссылке можно задать любое подчёркивание и анимировать его при наведении. Посмотреть примеры.
Можно стилизовать ссылку под кнопку, когда нужно добавить действию визуальный вес на странице. Например:
![Пример стилизации ссылки под кнопку Пример стилизации ссылки под кнопку](https://webcf.waybackmachine.org/web/20240311162202/https://habrastorage.org/getpro/habr/upload_files/9cc/b16/b8a/9ccb16b8a069995afe6dbdc6a1eb9983.jpg)
Скорее всего, в дизайн-макете вы используете для подобного макета элемент кнопки из дизайн-библиотеки. Но разработчики всё равно сделают её ссылкой, стилизованной под кнопку. Это связано с семантикой элементов вёрстки: важно правильно употребить определённые элементы под определённые задачи. Ссылка <a></a>
– это элемент навигации. Он ведёт на другую страницу или к другому блоку на странице. У кнопки <button></button>
другое назначение. Она получает, обрабатывает и отправляет данные. В примере выше «Купить билет» – это именно ссылка, которая ведёт на другую страницу покупки билета. Она не обрабатывает и не отправляет никакие данные. А если бы это была такая же кнопка на странице покупки билета после заполнения данных покупателя – она была бы именно кнопкой <button></button>
. Вот так.
Делать в дизайн-библиотеке отдельную ссылку-кнопку не стоит, используйте в макетах просто кнопку. Ведь внешний вид элемента – это про стили CSS, а не HTML-тег. В коде ссылке можно просто добавить класс, который содержит визуальные параметры кнопки.
<a href="https://www.ozon.ru/">Купить на Озоне</a>
– визуально будет ссылка.<a href="https://www.ozon.ru/" class="button">Купить на Озоне</a>
– визуально будет кнопка, т.к. применятся стили класса button
.
А ещё ссылке при наведении можно задать нестандартный курсор. Их внешний вид в разных операционных системах отличается, но значение одинаковое. Посмотреть примеры
Заключение
В заключение ещё раз подчеркну: всегда советуйтесь с разработчиками. Атрибуты и свойства часто меняются, появляются новые, а другие устаревают. Изучайте больше про HTML и CSS – это облегчит общение с техническими командами и расширит понимание возможностей вёрстки. Например, доступно и легко об этом пишут в Доке.
На этом всё. Желаю дизайнерских успехов и гармонии с разработчиками! 🌿