HTML тег <a>
Поддержка браузерами
Описание
HTML тег <a>
определяет гиперссылку (её также называют просто "ссылка"), которая используется для перехода с одной страницы на другую. Текстовое содержимое тега <a>
выступает в качестве названия ссылки. Внешне ссылку легко отличить от обычного текста, так как по умолчанию она отображается в виде подчеркнутого текста, а при наведении на нее курсора мыши, он принимает вид руки с указательным пальцем, как бы показывающим, что этот текст является активным и по нему можно кликнуть ЛКМ.
По умолчанию во всех браузерах ссылки выглядят следующим образом:
- Непосещённая ссылка - текст синего цвета
- Посещенная ссылка - текст фиолетового цвета
- Активная (при клике (и удерживании) ЛКМ) - текст красного цвета
В качестве ссылки может выступать не только текст, но и любой другой HTML-элемент, который может быть расположен в теле документа, если его разместить внутри элемента <a>
.
Особенность ссылок состоит в том, что сама ссылка может вести не только на другую веб-страницу, но и на файл любого типа. Файл на который ведёт ссылка, открывается в окне браузера только в тех случаях, когда браузер знает тип документа, в других случаях выводится сообщение, как следует обработать файл - открыть его или сохранить в указанную папку.
По умолчанию, страница, на которую ведёт ссылка открывается в том же окне, где находится текущая ссылка. Ссылка, которая ведёт на несуществующую страницу, файл или изображение называется "мёртвая" или "битая".
Ссылки для перехода внутри веб-страницы
Ссылки можно также использовать для перехода к определенному месту внутри веб-страницы (не обязательно в текущей). Для определения места на странице, к которому будет осуществлён переход по ссылке, используется любой HTML-элемент. Чтобы определить элемент к которому будет сделан переход по ссылке, нужно использовать глобальный атрибут id
, указав его у нужного элемента:
<!-- значение атрибута может быть произвольным --> <h2 id="a1">Заголовок</h2>
Теперь, чтобы перейти к нему, в значении атрибута href
элемента <a>
мы должны указать значение атрибута id
(идентификатор), перед которым нужно поставить символ решетки (#
). Если элемент к которому будет сделан переход находится на одной странице с ведущей на него ссылкой, то имя документа в атрибуте href
можно опустить, написав только идентификатор.
<a href="#a1">ссылка</a>
Чтобы перейти к определённому месту на другой странице, нужно указать необходимый идентификатор после URL-адреса:
<a href="httр://www.example.com#a1">ссылка</a> <a href="example/page.html#a1">ссылка</a>
Примечание: основная польза от ссылок внутри веб-страницы заключается в том, что пользователю не приходится просматривать всю веб-страницу в поисках нужного раздела. Такие ссылки удобно применять на страницах с большим объемом содержимого, чтобы посетители могли быстро переходить к нужному им разделу.
Ссылка на почтовый ящик
Чтобы сделать ссылку на электронную почту, нужно в значении атрибута href
ввести ключевое слово mailto
, поставить после него двоеточие и написать адрес электронной почты, на который вы хотите сослаться:
<html> <body> <p> Это ссылка на почту: <a href="mailto:someone@someone.ru">моя почта</a> </p> </body> </html>
Такая ссылка ничем не будет отличаться от остальных ссылок вашего документа. Только вместо другой страницы при нажатии на такую ссылку откроется установленная у вас по умолчанию программа почты.
Атрибуты
- download:
- Указывает, что файл, на который ведёт ссылка, будет загружен, когда пользователь кликнет по ссылке:
<a href="sun.png" download>
Значение атрибута определяет под каким именем будет сохранён файл. Например, оригинальное имя файлаsun.png
, если в качестве значения указаноflower.png
, то файл будет сохранён под именемflower.png
. Если значение не указано, то будет использовано оригинальное имя файла.<a href="sun.png" download="flower.png">
Примечание: атрибут
download
используется только совместно с атрибутомhref
. - href:
- Указывает URL-адрес веб-страницы, на которую будет сделан переход (количество символов в значении адреса не должно превышать 255). Поскольку в качестве адреса ссылки может быть указан путь к файлу любого типа, то результат перехода по ссылке будет зависеть от конечного файла.
Примечание: в качестве URL может быть использован абсолютный или относительный адрес.
Пример » - hreflang:
- Определяет язык текста в документе, на который ведет ссылка. Пример »
- media:
- Указывает тип носителя документа, на который ведёт ссылка.
- rel:
- Указывает отношение между текущим документом и документом, на который ведет ссылка. Возможные значения атрибута:
alternate
- ссылка на альтернативную версию документа (страница для печати, страница на другом языке и тд.)author
- ссылка на автора документаbookmark
- постоянный URL-адрес, используемый для закладокhelp
- ссылка на документ-справкуlicense
- ссылки на сведения об авторских правах для документаnext
- следующий документ в выделенной областиnofollow
- ссылка на документ, который не нужно индексировать («nofollow» используется поисковой системой Google, чтобы указать, что поисковый бот не должен переходить по этой ссылке)noreferrer
- указание браузеру не посылать HTTP-заголовок если пользователь перешел по ссылкеprefetch
- указывает, что следует кэшировать целевой документprev
- предыдущий документ в выделенной областиsearch
- ссылка на поиск для документаtag
- тег (ключевое слово) для текущего документа
- target:
- Определяет, в каком окне откроется документ (по умолчанию ссылки открываются в текущем окне). Возможные значения атрибута:
_blank
- открывает документ в новом окне или вкладке_parent
- открывает документ в родительском фрейме_self
- открывает документ в той же директории, где располагается ссылка (значение по умолчанию)_top
- открывает документ во всю ширину окнаимя_фрейма
- открывает документ в элементе iframe, имя которого было указано в качестве значения
- type:
- Определяет MIME-тип документа, на который ведёт ссылка. Пример »
Примечание: атрибуты: hreflang, media, rel, target
и type
не могут быть использованы, если не установлен атрибут href
.
Тег <a>
так же поддерживает Глобальные атрибуты и События
Стиль по умолчанию
a:link, a:visited { color: (зависит от браузера); text-decoration: underline; cursor: auto; } a:hover, a:active { color: (зависит от браузера); }
Пример
<a href="some_document.html">Это ссылка</a>
Результат данного примера в окне браузера: