HTML тег <a>

HTML теги

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

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

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

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

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

Атрибуты

АтрибутЗначениеОписание
charsetchar_encodingНе поддерживается в HTML5.
Определяет кодировку, связанного документа.
coordscoordinatesНе поддерживается в HTML5.
Определяет координаты ссылки.
downloadhtml5filenameЕсли атрибут указан, то браузер не переходит по ссылке, а предлагает скачать документ, указанный в адресе ссылки.
hrefURLЗадает URL страницы, или документа на которую ведёт ссылка.
hreflanglanguage_codeОпределяет язык связанного документа на который ведёт ссылка.
mediahtml5media_queryУказывает, что документ на который ведёт ссылка адаптирован под определённые виды устройств.
namesection_nameНе поддерживается в HTML5.
Задает имя якоря. Вместо этого атрибута используйте глобальный атрибут id.
relalternate
author
bookmark
help
license
next
nofollow
noreferrer
prefetch
prev
search
tag
Указывает отношение между текущим документом и связанным документом (на который ведёт ссылка).
revtextНе поддерживается в HTML5.
Указывает отношение между текущим документом и связанным документом (на который ведёт ссылка).
shapedefault
rect
circle
poly
Не поддерживается в HTML5.
Определяет форму ссылки (использовался с атрибутом coords). Используйте вместо данного тега элемент <area>.
target_blank
_parent
_self
_top
framename
Указывает, где открыть документ.
typemedia_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>

Где:

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

<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> обзавелся таким новым атрибутом как downloadhtml5, он сообщает браузеру пользователя, что необходимо скачать документ, указанный в адресе ссылки, а не переходить по ней.

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

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

ТегChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
downloadhtml514.020.015.010.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 теги