Тег <a> используется для создания гипертекстовой ссылки . Гиперссылка может быть на другую web – страницу , на какое-либо место внутри самой web – страницы , на любой документ , на электронный адрес и т.д.
Ссылки позволяют перемещаться между страницами сайта , а также по всему интернету , именно гиперссылки связывают все Web – страницы в единую сеть .
По умолчанию все Web - браузеры отображают ссылки следующим образом:
<a href="https://google.com/">Google</a>
- Непосещенная ссылка - подчеркнутый текст синего цвета
- Посещенная ссылка - подчеркнутый текст фиолетового цвета
- Активная - подчеркнутый текст красного цвета
Атрибуты контента тега <a>
Глобальные атрибуты
href - Адрес гиперссылки
target - Этот атрибут определяет, где показать содержимое по ссылке.
_self – Загружает документ в текущем документе . Значение по умолчанию.
_blank – Загружает документ в новой вкладке в HTML5.
_parent – Загружает документ в родительской вкладке в HTML5. Если нет родителя, параметр будет вести себя как - _self.
_top – В HTML5 загружает в окне высшего уровня. Если родителя нет, опция ведёт себя как – _self.
Используйте этот атрибут только если указан - href.
<a href="https://google.com/" target="_blank">Google</a>
download – Указывает, что браузер не должен переходить по ссылке, а скачать документ, указанный в адресе ссылки.
ping – Этот атрибут уведомляет URL-адрес, что пользователь перешёл по ссылке.
rel – Связь между местом в документе, содержащем гиперссылку, и целевым ресурсом.
Атрибут rel имеет несколько значений.
hreflang – Язык документа по ссылке.
type – Этот атрибут определяет MIME-тип связанного документа, например, браузер может добавить маленькую иконку, если тип установлен файла как MIME-типa udio/wav
referrerpolicy – Этот атрибут сообщает, какой информационный ресурс по ссылке:
no-referrer-when-downgrade – Не отправляет заголовок Referer ресурссу без TLS (HTTPS). Это стандартное поведение.
origin – Отправляет такую информацию на текущей странице, как адрес, протокол, хост и порт.
origin-when-cross-origin – Отправляет другим ресурсам только протокол, хост и порт, а внутри ресурса также отправляет путь.
unsafe-url – Отправляет только ресурс и адрес (но не пароли или никнеймы). Это небезопасно, так как могут быть утечь ресурс и адрес с TLS-защищенных ресурсов на небезопасные.
Внешние гиперссылки
Атрибут href – тега <a> , именно этот атрибут задает адрес Web – страницы , которая будет загружена при переходе по ссылке , в качестве указателя может быть текст или изображение .
<a href="http://www.mysite.ru/file.html">Текст ссылки</a>
<a href="http://www.mysite.ru/file.html">
<img src="foto.gif" alt="Подсказка"></a>
Внутренние ссылки
С помощью внутренних ссылок можно создать ссылки на другие разделы текущей Web – страницы .
Атрибут href – Содержит имя указателя , а не URL – адрес , перед указателем ставиться знак # .
<a href="#chapter1">Глава 1</a>
<a href="http://www.mysite.ru/file.html#chapter1">Текст</a>
Структура документа с внутренними ссылками
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Внутренние ссылки</title>
<style type="text/css">
@media screen and (max-width: 767px) {
body {
max-width: 767px;
height: auto;
}
}
h1 {
color: blue;
}
p {
font-size: 1.2em; /*Размер шрифта*/
}
</style>
</head>
<body>
<h1>Внутренние ссылки</h1>
<h2>Название документа</h2>
<h3>Оглавление</h3>
<ul>
<li><a href="#chapter1">Глава 1</a>
<li><a href="#chapter2">Глава 2</a>
<li><a href="#chapter3">Глава 3</a>
</ul>
<h2 id="chapter1">Глава 1</h2>
<p>Содержание главы 1</p>
<h2 id="chapter2">Глава 2</h2>
<p>Содержание главы 2</p>
<h2 id="chapter3">Глава 3</h2>
<p>Содержание главы 3</p>
</body>
</html>
Ссылки на изображение
<a href="foto.png">Открыть</a>
<a href="foto.png" download type="image/gif">Скачать</a>
<a href="foto.png" download="test.png" type="image/gif">
Скачать и сохранить под названием test.png</a>
Относительный URL-адрес
Относительный URL – адрес указывается между страницами своего сайта , рассмотрим несколько примеров :
Страница находиться в том же папке , что и Web – страница содержащая ссылку .
<a href="file1.html">Текст ссылки</a>
Страница находиться в другой папке , относительно Web – страницы содержащей ссылку .
<a href="folder1/file1.html">Текст ссылки</a>
Страница находится на каталог выше , относительно Web – страницы содержащей ссылку .
<a href="../file1.html">Текст ссылки</a>
Страница находится на два каталога выше , относительно Web – страницы содержащей ссылку .
<a href="../../file1.html">Текст ссылки</a>
Атрибут target – тега <a> , с помощью этого атрибута можно открывать Web – страницу в отдельном окне Web – браузера , придав ему значение _blank .
<a href="http://www.mysite.ru/file.html" target="_blank">Текст ссылки</a>