Ссылка — текст, кликая на который вы переходите на другую страницу. Иногда после клика открывается картинка, скачивается файл или вы переходите к другой части страницы.
В HTML ссылки создаются с помощью тега <a>
. Например:
<a href="https://htmlacademy.ru">HTML Academy</a>
href
— это атрибут, в котором мы прописываем адрес для перехода.
Тег <a>
можно использовать вообще без адреса, то есть без атрибута href
. Такой тег обозначает «ссылку-заглушку», которая в других условиях может стать обычной ссылкой. Ссылки-заглушки показывают, что мы находимся на текущей странице, и отсюда не нужно никуда уходить:
<ul>
<li><a>1 страница</a></li>
<li><a href="2">2 страница</a></li>
<li><a href="3">3 страница</a></li>
</ul>
В ссылке без href
лучше оставить подсказку о том, почему мы это сделали. Подсказку можно добавить с помощью атрибута title
. Подсказка появится, когда курсор задержится над ссылкой некоторое время.
Абсолютные ссылки
Если нужно сделать ссылку на другой сайт в интернете, используйте полный адрес сайта — он называется абсолютным. Выглядит он, например, так:
https://site.ru/blog/index.html
Абсолютные адреса содержат минимум три части: протокол, имя сервера и путь. В нашем случае это:
https://
— протокол, по которому мы обращаемся к сайту.
site.ru/
— имя сервера.
/blog/index.html
— путь к файлу.
Если в адресе есть все эти части — это абсолютный адрес.
Относительные ссылки
Когда файл по ссылке лежит на вашем компьютере, используются относительные адреса. В отличие от «обычных» адресов, в них нет адреса сайта. Например:
day-2.html
Как написать и запустить HTML на компьютере
Относительные адреса иногда используют и для страниц в интернете. Если выложить два каких-то файла в интернет (не меняя их взаимное расположение), то их ссылка друг на друга всё равно будет работать.
Если в адресе нет имени сервера или протокола, то это относительный адрес.
Ссылки на файл
По ссылкам можно не только переходить на другие сайты, но и скачивать файлы. Для этого пропишите в атрибуте href
ссылку на этот файл. А чтобы предотвратить открытие файлов прямо в браузере, добавьте атрибут download
у тега <a>
.
<a href="file.pdf" download>Браузер скачает меня lt;/a>
Ссылки-якоря
Ссылка-якорь — это обычная ссылка, в адресе которой используется символ #
, после которого следует идентификатор элемента. Идентификатор создаётся с помощью атрибута id
у того тега, к которому надо перейти при щелчке по ссылке.
<a href="#part1">Раздел 1</a>
Ссылка-якорь используется для прокрутки к заданной части страницы, в том числе используется и в абсолютных адресах.
Больше про ссылки