Ссылки в HTML

143
посл. ред. 14.12.2016

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

В качестве ссылки может служить текст, картинка или другие элементы HTML-страницы.

Для задания ссылки элемент заключается в пару тегов <a> и </a>. Все свойства ссылки определяются атрибутами тега <a>.

Атрибут href

Главный атрибут, в котором указывается адрес документа. Существует два вида записи адреса: абсолютный и относительный.

Абсолютные адреса

Абсолютный адрес (URL) содержит полный путь к документу, например http://WebGentleman.ru/images/image.gif. Такой же адрес отображается в адресной строке браузера.

При использовании абсолютных адресов указывать протокол (http:, https: и т.д.) не обязательно. В этом случае адрес начинается с двух слешей //:

<a href="//WebGentleman.ru/index.html">На главную страницу</a>

Если необходимо открыть страницу в том же домене, тогда указывать домен (WebGentleman.ru, example.WebGentleman.ru и т.д.) не обязательно. В этом случае адрес начинается с одного слеша /:

<a href="/index.html">На главную страницу</a>

Преимуществом абсолютного адреса является то, что ссылка остаётся рабочей вне зависимости от того, в каком каталоге находится текущая страница.

Относительные адреса

Относительный адрес указывает расположение документа относительно того каталога сайта, в котором располагается текущая страница. Если пользователь находится на странице http://WebGentleman.ru/html/link.html, то ссылка с адресом text.html отправит его по адресу http://WebGentleman.ru/html/text.html.

Чтобы перейти на уровень выше, надо в адресе добавить ../. Например, ../index.html отправит пользователя на страницу http://WebGentleman.ru/index.html в корневом каталоге.

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

Чтобы перейти к определенному элементу на той же странице, нужно воспользоваться глобальным атрибутом id. Например, если элемент страницы имеет атрибут id="spisok", то в адресе ссылки нужно написать href="#spisok".

Атрибут title

Глобальный атрибут title определяет комментарий, который будет выводиться при наведении на ссылку. Можно не использовать или оставлять пустым, если комментарий не нужен.

Атрибут target

Атрибут target указывает, в какой вкладке открыть документ:

  • "_blank" - для открытия в новой вкладке;
  • "_self" - для открытия в той же вкладке.

А также с его помощью можно задать имя новой вкладке (окну). Имя не должно содержать пробелов. Если вкладка с указанным именем уже открыта, то ссылка откроется именно в этой вкладке (окне).

Атрибут download

Если указан атрибут download, то документ не откроется в браузере, а скачается. Например:

<a href="http://WebGentleman.ru/public/images/favicon.ico" title="Картинка" download>Скачать картинку</a>
Скачать картинку