Это ссылка, которая указывает путь к ресурсу относительно текущей страницы или корневого каталога веб-сайта, вместо указания полного пути (абсолютной ссылки).
Относительная ссылка
<a href="../contact.html">Контакты</a>
Абсолютная ссылка
<a href="https://example.com/contact.html">Контакты</a>
Указывают путь к ресурсу, который находится в текущем каталоге или подкаталоге.
<a href="page.html">Страница</a> <!-- Ресурс в текущем каталоге -->
Используются два символа точки (
..
) для перехода на уровень выше.<a href="../folder/page.html">Страница</a> <!-- Подъем на один уровень вверх -->
Указывают путь относительно корня веб-сайта, начиная с
/
.<a href="/images/photo.jpg">Фото</a> <!-- Начало пути от корня сайта -->
Относительные ссылки работают независимо от домена. Если вы разрабатываете сайт локально (например, через
localhost
), вам не нужно указывать абсолютный путь с доменом.Если домен или структура сайта меняется, относительные ссылки автоматически адаптируются, если структура каталогов остается прежней.
Меньше текста в коде, особенно если проект содержит множество ссылок.
Ссылка на файл в текущей папке
<a href="file.html">Файл в текущей папке</a>
Ссылка на файл в подкаталоге
<a href="subfolder/file.html">Файл в подкаталоге</a>
Ссылка на файл в родительской папке
<a href="../file.html">Файл в родительской папке</a>
Ссылка на файл относительно корня сайта
<a href="/folder/file.html">Файл в папке от корня</a>
Ставь 👍 и забирай 📚 Базу знаний