Главная/ Cправочник HTML, CSS, Javascript/ HTML справочник : HTML теги, HTML атрибуты, мета теги, спецсимволы/ Tags/ HTML тег a | назначение, синтаксис, атрибуты, примеры

Тег a

Последнее обновление: 22.01.2011

Тег <a> (anchor — якорь) — тег-контейнер, предназначен для создания cсылки или якоря.
Строчный элемент.

HTML: 3.2 | 4 / XHTML: 1.0 | 1.1

Синтаксис

<a href="URL">...</a> <a name="идентификатор">...</a>

Атрибуты



acceskey указываем горячую кнопку, при нажатии которой (+Alt) срабатывает ссылка (не работает в IE)
charset определяет набор символов, используемый браузером для отображения страницы, на которую оказывает ссылка
class определяет имя используемого класса
coords применяется в процессе создания клиентских карт изображений
dir определяет направление символов:

  • ltr — слева направо
  • rtl — справа налево
href задает адрес документа (объекта), на который следует перейти. При наличии этого параметра тег работает как ссылка.
Чтобы не плодить дополнительных элементов, можно использовать параметр id любых тегов для установки закладки
hreflang определяет используемый язык в документе, на который указывает ссылка
id уникальный идентификатор
lang определяет используемый язык в документе, на который указывает ссылка
name устанавливает имя якоря (закладку) внутри документа.
onblur потеря фокуса элементом
onclick щелчок на элементе
ondblclick двойной щелчок на элементе
onfocus получение фокуса элементом
onkeydown нажатие клавиши, когда элемент имеет фокус
onkeypress нажатие и освобождении клавиши, когда элемент имеет фокус
onkeyup освобождение ранее нажатой клавиши, когда элемент имеет фокус
onmousedown нажатие кнопки мыши, когда элемент имеет фокус
onmousemove движение указателя мыши, когда элемент имеет фокус
onmouseout смещение указателя мыши с элемента
onmouseover помещение указателя мыши на элемент
onmouseup освобождение ранее нажатой кнопки мыши, когда элемент имеет фокус
rel указываем тип ресурса, на который ссылаемся (выражаем свое отношение к ресурсу)
rel=»nofollow»
 сообщает поисковой системе, что рейтинг со страницы, на которой ссылка размещена, не должен передаваться странице, на которую данная ссылка ведет. Использовать только для ссылок, ведущих на другие сайты.
Рекомендовано Google. Не поддерживается Yandex.
rev определяем обратную связь целевого документа к текущему
shape применяется при создании клиентских карт изображений

  • circle
  • default
  • poly
  • rect
style задает встроенную таблицу стилей
tabindex порядок обхода элементов с помощью Tab
target имя окна или фрейма, где будет открыт документ, который указан в href. В качестве аргумента используется имя окна или фрейма.
Зарезервированные имена:

  • _blank — откроет документ в новом окне
  • _parent — откроет документ во фрейме-родителе. Если такого нет, откроет в текущем окне.
  • _top — отменяет все фреймы и загружает страницу в полном окне браузера, если фремов нет, откроет в текущем окне
  • _self — откроет в текущем окне (по умолчанию)
title добавляет всплывающую подсказку к тексту ссылки
type подсказка о типе содержимого, находящегося по адресу ссылки

Примеры

Пример ссылки:


<a href="http://www.google.com/">Самый продвинутый поисковик</a>

Пример якоря:

<a name="top"></a>
...

<a href="#top">Наверх</a>

Пример якоря через id:

<body>...
<p id="paragraf1">text...text</p>
...

<a href="#paragraf1">Перейти к первому параграфу</a>

Если якорь в другом документе (работает не во всех браузерах):


<a href="http://adress-doka.com#yakor-name">Перейти к якорю в др доке</a>

Пример использования подсказки и открытия ссылки в новом окне:


<a href="http://google.com/" target="_blank" title="откроется в новом окне">Самый продвинутый поисковик</a>

Особенности использования

  • должен быть закрыт (</a>)
  • может содержать CDATA и строчные элементы (кроме тега <a>)
  • обязательных атрибутов нет
  • ссылка может указывать на любой документ (папку), находящийся в интернет (.html, .php, .doc, .jpeg, .avi и т.д.)

Для тега <a> рекомендуется устанавливать атрибут title, содержащий информацию о ссылке, которая, обычно, отображается как всплывающая подсказка. Точное описание всех внутренних и внешних ссылок с помощью информативных подсказок и текста ссылки может улучшить юзабилити веб-сайта. Кроме того, значение этого атрибута может служить в качестве дополнительного источника информации для поисковых роботов.

Для обозначения имени якоря можно использовать как id так и name. Но при этом нужно помнить, что тег <a> с атрибутом name не пройдет валидацию по спецификации XHTML 1.1. Если вы используете оба атрибута одновременно, их значение должно быть идентичным. Например:


<a name="top" id="top"></a>

При использовании атрибута name можно употреблять символьные мнемоники (например &lt;, &#229;).

В атрибуте href можно использовать различные схемы доступа:

  • file — доступ к файлу на локальном диске
  • ftp — доступ к архивам файлов при помощи протокола передачи файлов (FTP — file transfer protocol)
  • gopher — ссылка на Gopher–сервер
  • http — ссылка на документ в интернет (по умолчанию)
  • mailto — ссылка на адрес электронной почты
  • news — ссылка на новостную конференцию Usenet
  • nntp — доступ к новостям Usenet с использованием протокола NNTP — Network News Transfer Protocol
  • telnet — ссылка на telnet-сессию с удаленным сервером
  • wais — ссылка на WAIS–сервер

Например, для отправки почты можно использовать следующую конструкцию (адрес вымышленный):


<a href="mailto:admin@mpbox.ru">Письмо нам</a>

Клик по такой ссылке откроет окно почтовой программы MS Outlook, с заполненным полем адреса.

Используйте тег <a> только для создания ссылок и якорей, для задания элементу нужно указателя, используйте нейтральный тег <span> в сочетании с таблицами стилей (свойство cursor).

Твой код:

Результат: