Самоучитель HTML Справочник HTML Глобальные атрибуты События Типы элементов Таблица цветов Спецсимволы HTML
Теги HTML

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>

Результат данного примера в окне браузера:

Пример использования тега <a>
Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011-2018 © puzzleweb.ru

Реклама на сайте | puzinfo@puzzleweb.ru