На этой странице

Cсылки в HTML

Тег <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>

Рекомендуемые материалы

Спецификации