Что такое относительная ссылка?

Краткий ответ

Относительная ссылка — это ссылка, которая указывает путь к файлу относительно текущего местоположения страницы:

Текущая папка — page.html 📁
Подпапка — folder/page.html 📂
Родительская папка — ../page.html ⬆️
Корень сайта — /page.html 🏠
Якорь на странице — #section ⚓
Текущая страница — ?param=value 🔗

<!-- Основные типы относительных ссылок -->
<a href="about.html">О нас</a>
<a href="pages/contact.html">Контакты</a>
<a href="../index.html">Главная</a>
<a href="/products.html">Товары</a>

Полный ответ

Относительные ссылки — это как указания направления: “иди прямо”, “поверни налево” вместо полного адреса! Они указывают путь относительно текущего местоположения. 🧭

Синтаксис относительных ссылок

<!-- Относительная ссылка -->
<a href="relative/path">Ссылка</a>
 
<!-- Абсолютная ссылка для сравнения -->
<a href="https://example.com/full/path">Ссылка</a>

1. Файл в той же папке

Просто указываем имя файла:

<!-- Структура папок:
     /current-folder/
       ├── index.html (текущая страница)
       └── about.html
-->
 
<a href="about.html">О нас</a>
<a href="contact.html">Контакты</a>
<a href="services.html">Услуги</a>

2. Файл в подпапке

Указываем папку и файл через слеш:

<!-- Структура папок:
     /current-folder/
       ├── index.html (текущая страница)
       └── pages/
           ├── about.html
           └── contact.html
-->
 
<a href="pages/about.html">О нас</a>
<a href="images/photo.jpg">Фото</a>
<a href="css/style.css">Стили</a>

3. Файл в родительской папке

Используем ../ для подъёма на уровень выше:

<!-- Структура папок:
     /root/
       ├── index.html
       └── subfolder/
           └── page.html (текущая страница)
-->
 
<a href="../index.html">Главная</a>
<a href="../about.html">О нас</a>
<a href="../../other.html">Два уровня выше</a>

4. Абсолютный путь от корня

Начинаем с / для пути от корня сайта:

<!-- Всегда от корня сайта -->
<a href="/index.html">Главная</a>
<a href="/products/catalog.html">Каталог</a>
<a href="/images/logo.png">Логотип</a>

5. Якоря и фрагменты

Ссылки на разделы страницы:

<!-- На текущей странице -->
<a href="#header">К шапке</a>
<a href="#footer">К подвалу</a>
 
<!-- На другой странице -->
<a href="about.html#team">Команда</a>
<a href="../contact.html#form">Форма</a>

6. Параметры запроса

Добавляем параметры к ссылкам:

<!-- Параметры для текущей страницы -->
<a href="?category=books">Книги</a>
<a href="?sort=price&order=asc">По цене</a>
 
<!-- Параметры для другой страницы -->
<a href="catalog.html?page=2">Страница 2</a>

Практические примеры

Навигационное меню

<nav>
  <a href="/">Главная</a>
  <a href="/about">О нас</a>
  <a href="/products">Товары</a>
  <a href="/contact">Контакты</a>
</nav>

Хлебные крошки

<div class="breadcrumbs">
  <a href="/">Главная</a> /
  <a href="../catalog.html">Каталог</a> /
  <span>Товар</span>
</div>

Галерея изображений

<div class="gallery">
  <img src="images/photo1.jpg" alt="Фото 1">
  <img src="images/photo2.jpg" alt="Фото 2">
  <img src="../shared/logo.png" alt="Логотип">
</div>

Подключение ресурсов

<head>
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="../shared/common.css">
  <script src="js/script.js"></script>
</head>

Отличия от абсолютных ссылок

Относительные	Абсолютные
`about.html`	`https://site.com/about.html`
`../index.html`	`https://site.com/index.html`
`/products`	`https://site.com/products`
Зависят от текущего пути	Полный адрес

Преимущества относительных ссылок

Портативность — сайт работает на любом домене 🌐
Простота — короче абсолютных ссылок ✂️
Гибкость — легко перемещать файлы 📦
Скорость — браузер не ищет домен 🚀

<!-- Портативно - работает везде -->
<a href="contact.html">Контакты</a>
 
<!-- Привязано к домену -->
<a href="https://mysite.com/contact.html">Контакты</a>

Недостатки относительных ссылок

Зависимость от структуры — при перемещении ломаются 💔
Сложность отладки — труднее найти ошибки 🐛
Путаница в глубокой структуре — много ../ 🌀

Лучшие практики

Используйте от корня для основной навигации 🏠
Относительные пути для связанных файлов 📁
Проверяйте ссылки при изменении структуры ✅
Документируйте структуру папок 📋

<!-- Хорошо: основная навигация от корня -->
<nav>
  <a href="/">Главная</a>
  <a href="/about">О нас</a>
</nav>
 
<!-- Хорошо: связанные файлы относительно -->
<link rel="stylesheet" href="css/page.css">
<img src="images/banner.jpg" alt="Баннер">

Частые ошибки

❌ Неправильно:

<!-- Лишний слеш в начале -->
<a href="/folder//page.html">Ссылка</a>
 
<!-- Неправильное количество ../  -->
<a href="../../folder/page.html">Ссылка</a>

✅ Правильно:

<a href="/folder/page.html">Ссылка</a>
<a href="../folder/page.html">Ссылка</a>

Инструменты для проверки

Валидатор HTML — проверяет корректность ссылок 🔍
Инструменты разработчика — показывают 404 ошибки 🛠️
Линтеры — автоматическая проверка 🤖

Заключение

Относительные ссылки — основа навигации в HTML:

Текущая папка — file.html
Подпапка — folder/file.html
Родительская — ../file.html
От корня — /file.html

Используйте их для создания гибкой и портативной структуры сайта! 🎯