Пути к файлам: абсолютные и относительные

Пути к файлам в HTML-атрибутах (src, href, action) указывают браузеру, где найти ресурс; они бывают абсолютными (полный URL) и относительными (относительно текущего документа).

Зачем нужно

Понимание разницы между абсолютными и относительными путями предотвращает классические ошибки: «картинка видна локально, но не на сервере», «ссылка работает в одной папке, но не в другой». Выбор правильного типа пути влияет на переносимость кода при переезде сайта.

Где используется

  • <img src="..."> — изображения
  • <link href="..."> — CSS, favicon
  • <script src="..."> — JavaScript
  • <a href="..."> — ссылки
  • <form action="..."> — адрес отправки формы
  • <video src="...">, <audio src="..."> — медиа

Типы путей

1. Абсолютный URL (полный адрес)

Включает протокол, домен и путь. Работает из любого контекста:

<!-- Внешний ресурс -->
<img src="https://example.com/images/photo.jpg" alt="Фото">
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

<!-- Ссылка на страницу другого сайта -->
<a href="https://developer.mozilla.org/ru/">MDN</a>

2. Корневой относительный путь (root-relative)

Начинается с /. Отсчёт от корня домена:

<!-- Всегда ведёт на https://example.com/images/logo.png -->
<img src="/images/logo.png" alt="Логотип">
<link rel="stylesheet" href="/css/main.css">
<a href="/about">О нас</a>

Используй для внутренних ресурсов — работает из любой страницы сайта.

3. Относительный путь (document-relative)

Отсчёт от расположения текущего файла:

<!-- Файл находится в той же папке -->
<img src="photo.jpg" alt="Фото">

<!-- Файл в подпапке images/ -->
<img src="images/banner.jpg" alt="Баннер">

<!-- Подняться на уровень выше -->
<link rel="stylesheet" href="../css/style.css">

<!-- Подняться на два уровня -->
<script src="../../js/app.js"></script>

Структура файлов — пример

my-site/
├── index.html
├── about/
│   └── index.html
├── css/
│   └── style.css
└── images/
    └── logo.png

<!-- Из about/index.html -->
<link rel="stylesheet" href="../css/style.css">   <!-- относительный -->
<link rel="stylesheet" href="/css/style.css">     <!-- корневой (предпочтительно) -->
<img src="../images/logo.png" alt="Лого">
<img src="/images/logo.png" alt="Лого">           <!-- лучше -->

Протокол-относительный путь (устаревший)

<!-- Устаревший паттерн — не использовать -->
<script src="//cdn.example.com/lib.js"></script>

Сейчас все сайты на HTTPS, поэтому лучше использовать https:// явно.

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

Ошибка Почему плохо Как правильно
Путь работает локально, но не на сервере Используется Windows-путь C:\... Только URL-пути, только / как разделитель
Относительный путь из вложенной страницы images/logo.png из /about/ → /about/images/logo.png Используй корневой путь /images/logo.png
Двойной слеш //path Протокол-относительный, может подставить HTTP Используй https:// явно
Смешение типов путей Непоследовательность, трудно поддерживать Используй корневые пути для всего внутреннего

Связанные темы

Ресурсы