Пути: абсолютные и относительные

Разбираемся, как правильно указывать путь к файлам — частый источник ошибок у новичков.

Абсолютный путь — полный адрес от начала. Относительный путь — адрес относительно текущего файла.

Абсолютный путь

Абсолютный путь — это полный адрес, который работает откуда угодно. Чаще всего это ссылка на внешний ресурс целиком, с https://:

<img src="https://example.com/images/logo.png" alt="Логотип">

Такой путь указывает на конкретный файл в интернете независимо от того, на какой странице вы находитесь.

Относительный путь

Относительный путь отсчитывается от текущего файла. Если картинка лежит рядом с вашей HTML-страницей, достаточно написать её имя:

<img src="photo.jpg" alt="Фото">

Если файлы разложены по папкам, путь показывает дорогу к ним. Допустим, структура такая:

сайт/
  index.html
  images/
    cat.jpg
  pages/
    about.html

Тогда из index.html картинка в папке images указывается так:

<img src="images/cat.jpg" alt="Кот">

Подъём на уровень вверх — ../

Два символа .. означают «выйти из текущей папки на уровень вверх». Это нужно, когда файл лежит «выше» по дереву. Например, из pages/about.html добраться до картинки в images:

<img src="../images/cat.jpg" alt="Кот">

Здесь ../ поднимает нас из pages в корень сайта, а затем мы заходим в images. Можно подниматься на несколько уровней: ../../.

Памятка по обозначениям

Запись	Значение
`file.jpg`	файл в текущей папке
`./file.jpg`	то же самое (явно «текущая папка»)
`papka/file.jpg`	в подпапке
`../file.jpg`	на уровень выше

Когда что использовать

Для файлов внутри вашего сайта используют относительные пути — тогда сайт можно перенести в другую папку или на другой домен, и ссылки не сломаются. Абсолютные пути нужны для внешних ресурсов на чужих сайтах.

Самая частая ошибка новичка

Картинка не показывается, вместо неё — иконка «битого» изображения. В девяти случаях из десяти виноват путь. Пройдитесь по чек-листу:

Опечатка в имени. Файл называется Photo.JPG, а в коде написано photo.jpg. На многих серверах регистр букв важен: Photo и photo — разные файлы.
Неверная папка. Картинка лежит в images, а путь указывает в корень. Сверьте реальное расположение файла с тем, что написано в src.
Лишний или недостающий ../. Пересчитайте, на сколько уровней нужно подняться от текущего файла.

Совет: называйте файлы латиницей в нижнем регистре, без пробелов (cat-photo.jpg, а не Фото кота.JPG). Это избавит от множества проблем с путями.

Итог

Абсолютный путь — полный адрес (часто с https://), работает откуда угодно.
Относительный путь отсчитывается от текущего файла; ../ поднимает на уровень вверх.
Внутри своего сайта используйте относительные пути, для внешних ресурсов — абсолютные.