Это ссылка, которая указывает путь к ресурсу относительно текущей страницы или корневого каталога веб-сайта, вместо указания полного пути (абсолютной ссылки).
Относительная ссылка
<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>
Ставь 👍 и забирай 📚 Базу знаний