Как работают ссылки и якоря на странице

Тег a — один из первых, с которым сталкивается любой, кто начинает разбираться в HTML, и при этом один из самых недооценённых. Кажется, что там и разбирать нечего: указал href, получил ссылку. Но у ссылок гораздо больше нюансов, чем видно на первый взгляд.

Абсолютные ссылки ведут на полный адрес с протоколом — https и доменом, относительные указывают путь внутри текущего сайта. Для внешних ресурсов почти всегда используют абсолютные ссылки, а для переходов между страницами одного проекта чаще удобнее относительные, потому что при переносе сайта на другой домен их не придётся переписывать.

Отдельная история — якорные ссылки, которые ведут не на другую страницу, а на конкретное место текущей. Для этого элементу назначают id, а в ссылке указывают решётку с этим идентификатором. Это удобно для длинных статей с оглавлением или для перехода к форме обратной связи внизу страницы.

Атрибут target со значением _blank открывает ссылку в новой вкладке — полезно для внешних ресурсов, но злоупотреблять этим не стоит, потому что пользователю не всегда приятно, когда решение открывать новую вкладку принимают за него. Ещё стоит помнить про атрибут rel со значением noopener при открытии внешних ссылок в новой вкладке — это вопрос безопасности.

Полный список атрибутов тега a и примеры разных сценариев использования есть в статье про тег a на MDN.

Ещё один момент, о котором часто забывают, — текст самой ссылки. Формулировка вроде "нажмите сюда" ничего не говорит человеку, который просматривает страницу со скринридером и слышит список ссылок вне контекста абзаца. Куда полезнее писать текст ссылки так, чтобы он был понятен сам по себе, например "перейти к разделу цен" вместо безликого "подробнее".

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

Категория
Поделиться в социальных сетях

Отправить комментарий

0 Комментарии

Отправить комментарий (0)

#buttons=(Хорошо) #days=(20)

Мы используем файлы cookie для улучшения работы сайта. Подробнее
Хорошо
×