Элемент a - это, по сути, «мост» между страницами. Именно он отвечает за гиперссылки, позволяя пользователю легко перемещаться от одного ресурса к другому. Текст внутри этого тега становится названием ссылки. Вы наверняка замечали, что ссылки выглядят иначе: они подчеркнуты, а при наведении курсор превращается в указательный палец. Это небольшой, но важный визуальный сигнал, подсказывающий вам: «Здесь можно кликнуть!».
Браузеры по умолчанию используют цветовую кодировку для лучшего восприятия:
- Не посещенная ссылка - текст синего цвета
- Посещенная ссылка - текст фиолетового цвета
- Активная (при клике (и удерживании) ЛКМ) - текст красного цвета
Думаете, что ссылкой может быть только текст? Ошибаетесь! Внутри тега a можно спрятать практически любой HTML-элемент - изображение, таблицу или даже блок кода. Главное, чтобы он находился в теле документа.
Одно из самых интересных свойств ссылок - их универсальность. Они могут вести не только на другие сайты, но и на файлы любого формата. Если браузер понимает тип файла (например, PDF или картинку), он откроет его прямо в окне. Если же нет, вы получите диалоговое окно с вопросом: открыть файл здесь или сохранить? Это защищает вас от случайного запуска неизвестных программ.
Обычно новая страница открывается там же, где вы нажали (в текущей вкладке). Однако бывает и так, что ссылка «ведет в никуда». В веб-разработке такие называют «мёртвыми» или «битыми» - это неприятно для пользователя и плохо влияет на SEO.
Ссылки внутри одной страницы А если вы хотите быстро перескочить к нужному разделу длинной статьи, не прокручивая всё вверх-вниз? Для этого используются якорные ссылки. Вы можете указать любой элемент на странице как «точку назначения». Чтобы браузер понял, куда именно прыгать, нужно добавить глобальный атрибут id к целевому элементу:
!-- значение атрибута может быть произвольным -- h2 id="a1"Заголовок/h2
Теперь, чтобы создать ссылку на этот заголовок, в атрибуте href тега a нужно указать значение id, поставив перед ним знак решетки (#). Если цель находится на той же странице, имя файла можно не писать:
a href="#a1"ссылка/a
А что если нужный раздел находится на другом сайте? Тогда после URL-адреса просто дописываем идентификатор через решетку:
a href="httр://www.example.com#a1"ссылка/a a href="example/page.html#a1"ссылка/a
Такой подход - настоящая находка для сайтов с большим количеством контента. Пользователь экономит время и нервы, мгновенно попадая в нужный раздел, а не «охотясь» по всей странице.
Ключевые атрибуты - href:
- Это сердце ссылки. Здесь указывается URL-адрес или путь к файлу (длина не должна превышать 255 символов). Поскольку сюда можно вписать адрес любого файла, то и результат перехода будет зависеть от того, что именно вы указали.
Примечание: в качестве URL может быть использован или адрес.
- hreflang:
- Сообщает браузеру и поисковикам, на каком языке написан документ по ссылке. Это полезно для многоязычных сайтов.
- media:
- Определяет тип устройства или носителя (например, экран, принтер), для которого предназначена ссылка.
- rel:
- Описывает отношение между текущей страницей и целевой. Вот основные варианты:
- alternate - альтернативная версия (например, мобильная или для печати)
- author - ссылка на автора контента
- bookmark - постоянный адрес для закладок
- help - справка или документация
- license - информация о лицензиях и правах
- next - следующий документ в серии
- nofollow - сигнал поисковым ботам (в частности, Google) не индексировать эту ссылку
- noreferrer - запрет браузеру отправлять заголовок реферера при переходе
- prefetch - подсказка браузеру заранее кэшировать документ для скорости
- prev - предыдущий документ в серии
- search - ссылка на форму поиска по документу
- tag - тег или ключевое слово, описывающее страницу
- target:
- Управляет тем, где откроется новая страница. По умолчанию это текущая вкладка, но можно выбрать другое:
- _blank - открыть в новой вкладке или окне (удобно для внешних ссылок)
- _parent - открыть в родительском фрейме
- _self - заменить текущую страницу (по умолчанию)
- _top - открыть во всю ширину окна, выходя из фреймов
- имя_фрейма - открыть в конкретном фрейме с указанным именем
- type:
- Указывает MIME-тип документа (например, text/html или application/pdf).
Примечание: Важно помнить: атрибуты hreflang, media, rel, target и type не будут работать, если вы не указали основной адрес в href.
Простой пример a href="some_document.html"Это ссылка/a