HTML тег <a>

Значение и применение

Гиперссылки (или просто "ссылки") определяются тегом <a> (HTML Anchor Element).

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

Поддержка браузерами

Тег	Chrome	Firefox	Opera	Safari	IExplorer	Edge
<a>	Да	Да	Да	Да	Да	Да

Атрибуты

Атрибут	Значение	Описание
charset	char_encoding	Не поддерживается в HTML5. Определяет кодировку, связанного документа.
coords	coordinates	Не поддерживается в HTML5. Определяет координаты ссылки.
download	filename	Если атрибут указан, то браузер не переходит по ссылке, а предлагает скачать документ, указанный в адресе ссылки.
href	URL	Задает URL страницы, или документа на которую ведёт ссылка.
hreflang	language_code	Определяет язык связанного документа на который ведёт ссылка.
media	media_query	Указывает, что документ на который ведёт ссылка адаптирован под определённые виды устройств.
name	section_name	Не поддерживается в HTML5. Задает имя якоря. Вместо этого атрибута используйте глобальный атрибут id.
rel	alternate author bookmark help license next nofollow noreferrer prefetch prev search tag	Указывает отношение между текущим документом и связанным документом (на который ведёт ссылка).
rev	text	Не поддерживается в HTML5. Указывает отношение между текущим документом и связанным документом (на который ведёт ссылка).
shape	default rect circle poly	Не поддерживается в HTML5. Определяет форму ссылки (использовался с атрибутом coords). Используйте вместо данного тега элемент <area>.
target	_blank _parent _self _top framename	Указывает, где открыть документ.
type	media_type	Указывает MIME-тип документа на который осуществляется переход.

Пример использования

<!DOCTYPE html>
<html>
	<head>
		<title>Пример размещения ссылки в HTML документе<title>
	</head>
	<body>
		<a href = "http://www.yandex.ru">Найдется всё</a>
	</body>
</html>

В браузере же это будет отображаться по умолчанию следующим образом: Найдется всё.

Атрибут href (аббревиатура от hyper reference) - это основной атрибут тега <a>, указывающий браузеру, URL-адрес страницы, куда ведет ссылка. Единый указатель ресурса (англ. Uniform Resource Locator, URL) — единообразный локатор (определитель местонахождения) ресурса.

Относительные и абсолютные пути ссылок

В приведенном выше примере используется абсолютный адрес пути. Название абсолютный связано с тем, что мы задаем полный веб-адрес страницы в качестве пути к файлу. Ниже приведены примеры указания абсолютных путей:

<a href = "https://www.yandex.ru">Содержимое элемента</a> <!-- указываем полный путь (протокол https) -->
<a href = "http://www.yandex.ru">Содержимое элемента</a> <!-- указываем полный путь (протокол http) -->
<a href = "//www.yandex.ru">Содержимое элемента</a> <!-- допускается указывать полный путь без протокола -->

Обращаю Ваше внимание, что в большинстве случаев, абсолютные пути ссылок применяются для страниц или файлов, которые находятся на других ресурсах (распологаются не на том же сервере, что и страница с которой ссылаются).

Если страница или файл на который ссылаются расположен на том же сервере, что и страница с которой ссылаются, то, как правило используются относительные адреса ссылок. Основная особенность относительных ссылок заключается в том, что они размещаются относительно корня сайта или относительно текущего HTML документа.

Путь относительно текущего документа

Предлагаю для начала разобраться с путями относительно текущего HTML документа. Независимо в каких дебрях находится файл, путь вы будете задавать относительно этого файла.

подключение файлов к HTML документу из той же папки

Пример подключения файлов:

<!DOCTYPE html>
<html>
	<head>
		<title>Пример подключения файлов к HTML документу из той же папки<title>
	</head>
	<body>
		<img src = "image.png" alt = "someimage info"> <!-- размещаем изображение -->
		<a href = "page.html">Содержимое элемента</a> <!-- ссылаемся на страницу -->
	</body>
</html>

Перейдем к следующему примеру, допустим у нас есть файл index.html, в этом же каталоге есть папка (каталог) с именем etc из которой нам необходимо подключить изображение и сделать ссылку на документ page.html:

подключение файлов из дочернего каталога

<!DOCTYPE html>
<html>
	<head>
		<title>Пример подключения файлов из дочернего каталога<title>
	</head>
	<body>
		<img src = "etc/image.png" alt = "someimage info"> <!-- размещаем изображение из дочернего каталога -->
		<a href = "etc/page.html">Содержимое элемента</a> <!-- ссылаемся на страницу, из дочернего каталога -->
	</body>
</html>

Обратите внимание, как мы указываем путь к нашим файлам - мы задаем название каталога и через прямой слеш указываем название необходимого нам файла. Данный каталог является по отношению к текущему каталогу дочерним и чтобы подключить необходимые файлы мы спускаемся на один уровень ниже (название_каталога/необходимый_файл).

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

подключение файлов из родительского каталога

<!DOCTYPE html>
<html>
	<head>
		<title>Пример подключения файлов из родительского каталога<title>
	</head>
	<body>
		<img src = "../../image.png" alt = "someimage info"> <!-- размещаем изображение, которое находится на 2 уровня выше -->
		<a href = "../page.html">Содержимое элемента</a> <!-- ссылаемся на страницу, которая находится на 1 уровень выше -->
	</body>
</html>

Обратите внимание, что если файл находится в родительской папке, то необходимо использовать символы ../ это позволит подняться на один уровень вверх. Вы можете, используя символы ../ подниматься вверх пока не доберетесь до корневой папки Вашего сайта или жесткого диска.

Путь относительно корня сайта

Хочу сразу обратить ваше внимание, чтобы путь относительно корня сайта работал на локальном компьютере, то у вас должна быть установлена программная среда, которая позволяет эммулировать веб-сервер.

Если вы планируете создавать сайты и у вас нет среды для ваших тренировок, то рекомендую Вам скачать программный комплекс, предназначенный для локальной разработки, отладки и тестирования веб проектов. Я использую Open Server, он предназначен для пользователей, которые используют операционную систему Windows. В качестве аналога Open Server под Mac, могу предложить MAMP, если он вам не подойдет, можете попробовать выбрать другой.

Перейдем к следующему примеру, в котором нам необходимо подключить файлы, которые находятся на веб-сервере. На примере куска этого сайта, подключим из папок primer по одному изображению и одному html файлу:

подключение файлов относительно корня сайта

Как и при использовании абсолютных адесов, способ задавать путь относительно корня сайта довольно-таки прост. Разница заключается лишь в том, что у нас отпадает необходимость указывать имя домена, ну и соответственно относительные пути используются только в рамках одного сервера.

<!DOCTYPE html>
<html>
	<head>
		<title>Пример подключения файлов относительно корня сайта<title>
	</head>
	<body>
		<img src = "/html/primer/anyimage.png" alt = "someimage info"> <!-- размещаем изображение, которое находится на 2 уровня ниже относительно корня сайта -->
		<a href = "/html/primer/anypage.html">Содержимое элемента</a> <!-- ссылаемся на страницу, которая находится на 2 уровня ниже относительно корня сайта -->
		<img src = "/css/primer/anyimage.png" alt = "someimage info"> <!-- размещаем изображение, которое находится на 2 уровня ниже относительно корня сайта -->
		<a href = "/css/primer/anypage.html">Содержимое элемента</a> <!-- ссылаемся на страницу, которая находится на 2 уровня ниже относительно корня сайта -->
	</body>
</html>

Обратите внимание, что необходимо указывать прямой слэш в начале пути, это сообщает браузеру пользователя, что путь начинается с корневого каталога.

Атрибут target

Атрибут target используется для того, чтобы указать браузеру, где необходимо открыть веб страницу. Следующий пример открывает документ в новом окне браузера:

<a href="http://yandex.ru" target="_blank">Поиск </a>

Ниже представлены все значения этого атрибута:

Атрибут	Значение
_blank	Загружает страницу в новое окно браузера.
_self	Загружает страницу в текущее окно. Это значение по умолчанию.
_parent	Загружает страницу во фрейм-родитель, если фреймов нет, то это значение работает как _self.
_top	Отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то это значение работает как _self.
framename	Открывает ссылку в указанном фрейме.

Работа с фреймами будет рассмотрена позднее в статье учебника "HTML фреймы".

Атрибут mailto

Использование атрибута "mailto" в HTML документе позволяет создать ссылку для отправки письма:

<a href = "mailto:smbd@some.com">Написать автору</a>

Для того, чтобы ссылки mailto корректно работали необходимо чтобы на компьютере или в браузере посетителя был настроен почтовый / веб клиент по умолчанию, иначе при клике на ссылку ничего не произойдет.

В значении атрибута можно сразу указать значения для заголовков (тема, копии, тело письма и т.п.). Пробелы и переносы строки нельзя вставить без кодирования:

<a href = "mailto:mail_1@some.com?subject=Тема%20моего%20письма&cc=mail2@some.com&body=
Здравствуй%20уважаемый%20автор">Написать автору</a>

Где:

subject—тема письма.
cc—копия письма.
bcc—скрытая копия письма.
body—тело письма.

Допустимо указывать несколько адресов (либо не указывать вовсе):

<a href=" mailto:mail_1@some.com, mailto:mail_2@some.com ">Написать автору </a>

Изображение как ссылка

Для того, чтобы использовать изображение в качестве ссылки, вам необходимо поместить изображение между тегами <a> </a>:

<!DOCTYPE html>
<html>
	<head>
		<title>Использование изображения в качестве ссылки<title>
	</head>
	<body>
		<a href = "http://yandex.ru">
			<img src="10.jpg" alt="Поиск в Яндекс"> <!-- размещаем изображение в качестве содержимого гиперссылки -->
		</a>
	</body>
</html>

При этом при клике на картинку будет осуществлён переход по указанной ссылке:

Размещение файлов на сайте для скачивания

С выходом HTML 5 тег <a> обзавелся таким новым атрибутом как download html5 , он сообщает браузеру пользователя, что необходимо скачать документ, указанный в адресе ссылки, а не переходить по ней.

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования атрибута download<title>
	</head>
	<body>
		<a href = "/path/to/file.mp3" download>Любимая песня</a> <!-- указываем файл, который предназначается для скачивания -->
	</body>
</html>

Обращаю Ваше внимание, что к сожалению, в настоящее время еще не все браузеры поддерживают применение этого атрибута:

Тег	Chrome	Firefox	Opera	Safari	IExplorer	Edge
download	14.0	20.0	15.0	10.1	Нет	13.0

Если использовать только HTML, то единственный вариант, который позволит посетителям скачать, а не открыть, с вашего сайта, например, текстовый файл, это поместить его предварительно в архив (заархивировать файл). Алгоритм работы любого браузера такой, что если он не может открыть файл (не поддерживает формат), то он предлагает скачать / скачивает файл.

Отличия HTML 4.01 от HTML 5

В HTML 4.01 элемент мог быть как гиперссылкой, так и якорем, а в HTML5 элемент всегда гиперссылка (в случае отсутствия атрибута href является контейнером для гиперссылки). В HTML5 добавлено два новых атрибута и пять удалено.

Значение CSS по умолчанию

a:link, a:visited {
color: (internal value); <!-- в зависимости от браузера пользователя --> 
text-decoration: underline;
cursor: auto;
}
a:link:active, a:visited:active {
color: (internal value);  <!-- в зависимости от браузера пользователя --> 
}

Поддержка глобальных атрибутов

Элемент поддерживает "глобальные атрибуты".

Атрибуты событий

Элемент поддерживает "атрибуты событий".

HTML теги