Пути к файлам в HTML

Вы уже умеете писать страницы с заголовками, абзацами и комментариями. Настоящие сайты редко живут в одном файле. Изображения, другие страницы, таблицы стилей и скрипты лежат в папках рядом с HTML — и HTML должен указывать на них правильно. Эти указатели — пути к файлам. Если путь неверен, файл может существовать на диске, а браузер всё равно покажет битое изображение или мёртвую ссылку. Освоение путей — один из самых практических навыков раннего HTML: без него «правильная» разметка кажется сломанной без видимой причины.

Что такое путь к файлу?

Путь к файлу — это адрес, по которому браузер запрашивает другой файл. Обычно его пишут в атрибутах вроде src (изображения, скрипты, медиа) и href (ссылки, таблицы стилей и многие связанные ресурсы). Путь — не украшение. Это инструкция: «смотри сюда». Когда инструкция неверна, запрос не срабатывает, даже если теги разметки выглядят безупречно. Думайте о пути как о карте: она говорит браузеру, какие папки пройти и какое имя файла открыть в конце маршрута.

Прямой ответ

Используйте относительный путь, когда целевой файл перемещается вместе с папками проекта — например images/logo.png со страницы в той же родительской папке или ../images/logo.png со страницы на один уровень глубже. Используйте корневой абсолютный путь, начинающийся с /, когда сайт размещён на хостинге и все страницы должны делить один устойчивый путь от корня сайта. Используйте полный URL (https://…), когда файл лежит на другом хосте или CDN. Новичкам сначала стоит освоить относительные пути, потому что локальные учебные папки зависят от них. Когда дерево папок станет понятным, корень и URL станут осознанным выбором, а не запутанным ярлыком.

Относительный и абсолютный путь с первого взгляда

Небольшая карта проекта

Представьте папку с именем project. Внутри неё есть:

• index.html (домашняя страница)
• about.html (та же папка, что и домашняя)
• папка images с файлом logo.png
• папка pages с файлом contact.html
  Важная привычка такова: всегда спрашивайте, какой HTML-файл вы редактируете, прежде чем писать src или href. Одно и то же изображение требует разных относительных путей с разных страниц. Если вы правите index.html, а затем contact.html, не переосмыслив точку отсчёта, легко скопировать путь, который работал в другом месте, и сломать картинку. Всегда отталкивайтесь от положения текущего файла в дереве.

Относительные пути из папки проекта

Из index.html или about.html папки images и pages — дочерние. Чтобы до них дойти, ../ не нужен. Браузер начинает в папке текущего HTML и входит в имена, которые вы написали, сегмент за сегментом.

Почему эти значения работают

• images/logo.png означает «войти в папку images рядом с этим HTML-файлом, затем открыть logo.png»
• pages/contact.html означает «войти в pages, затем открыть contact.html»
• about.html означает «другой файл в той же папке, что и текущая страница»
• Текст alt — не путь; это доступный текст, когда изображение показать нельзя
  Если логотип не появляется в браузере, проверьте орфографию, реальное имя папки и то, сохранили ли вы HTML в той папке, о которой думаете. Лишний пробел, другая регистровая буква или файл, сохранённый в «копии» рядом с настоящим проектом, — частые причины. Убедитесь также, что расширение файла изображения точно совпадает с тем, что написано в атрибуте.

Относительные пути из вложенной папки

contact.html лежит внутри pages/. Оттуда images/ не является дочерней для pages/. Она стоит рядом с pages/ под project/. Нужно подняться на один уровень с помощью ../, затем войти в images/. Без этого шага вверх браузер ищет папку images внутри pages, которой в этой карте нет.

Как читать ../

• ../ означает «подняться в родительскую папку»
• ../images/logo.png означает «вверх до project/, затем в images/logo.png»
• ../index.html означает «вверх до project/, затем открыть index.html»
• Запись images/logo.png из contact.html ищет pages/images/logo.png, которой в этой карте нет
  Эта одна ошибка — забытый ../ из вложенной папки — даёт большую долю сообщений о «битом изображении» в проектах новичков. Можно написать ../../, чтобы подняться на два уровня, но только если дерево папок действительно этого требует. Каждый лишний ../ меняет цель; слишком много ../ тоже ломает путь.

Корневые абсолютные пути и полные URL

Корневой абсолютный путь начинается с / и вычисляется от корня сайта на настоящем веб‑сервере, а не от текущей папки. Полный URL включает протокол и домен. Полные URL обычны для сторонних файлов. Корневые абсолютные пути полезны на хостинге, когда многим страницам нужен один устойчивый путь независимо от глубины папки каждой страницы.

Локальные файлы и корень на хостинге

Когда вы открываете HTML прямо с диска (file://…), настоящей корневой точки сайта часто нет. Путь вроде /images/logo.png может не совпасть с папкой на компьютере так, как он совпадёт на сервере. Для локальной практики новичков предпочитайте относительные пути, совпадающие с реальными папками. После размещения сайта корневые абсолютные пути становятся надёжнее между страницами. Кратко: относительные — для учебных папок на диске; корень или URL — когда этого требует модель хостинга.

Практика: пути по карте папок

Папка shop содержит:

• home.html
• папку assets с файлом hero.jpg
• папку help с файлом faq.html
  Сделайте в редакторе следующее:

1. В home.html добавьте img, который загружает hero.jpg относительным путём.
2. В help/faq.html добавьте img, который загружает тот же файл с помощью ../.
3. Из faq.html добавьте относительную ссылку обратно на home.html.
4. Откройте обе страницы в браузере и убедитесь, что изображение и ссылка работают.
5. Намеренно сломайте один путь, обновите страницу, увидьте сбой, затем исправьте — такая обратная связь тренирует глаз быстрее, чем одно чтение.
   Ожидаемые относительные ответы для этой карты: assets/hero.jpg из home.html; ../assets/hero.jpg и ../home.html из faq.html. Если картинка видна на одной странице и пропадает на другой, проблема почти наверняка в относительной точке отсчёта, а не в самом файле hero.jpg.

Ошибки путей, которые ломают страницы

• Написание images/logo.png из вложенной папки, когда нужен ../images/logo.png
• Опечатка в имени файла или папки либо несовпадение регистра на хостах, где Logo.PNG и logo.png считаются разными файлами
• Использование Windows-слэша \ в веб‑путях — в HTML-атрибутах предпочитайте /
• Вставка дискового пути вроде C:\site\img.png в src или href обычной веб‑страницы
• Копирование корневого пути /images/... в проект, который открывают только как локальный файл, с ожиданием поведения хостинг‑сайта
• Ссылка на contact.html, когда файл на самом деле лежит в pages/contact.html
• Перенос папок в Проводнике/Finder без обновления всех путей, указывавших на старую раскладку
  Каждая из этих ошибок даёт один и тот же внешний симптом: запрос не проходит. Исправление всегда начинается с того, чтобы найти редактируемый HTML-файл и заново просчитать путь от его папки.

Итог

• Пути к файлам сообщают браузеру, где находятся связанные файлы для src, href и похожих атрибутов
• Относительные пути вычисляются от папки текущего HTML-файла
• ../ поднимает на одну папку в относительном пути; используйте его, когда цель выше текущего файла
• Корневые абсолютные пути начинаются с /; полные URL включают протокол и домен
• Сопоставляйте стиль пути с раскладкой: относительный для локальной практики, корень/URL когда этого требует хостинг
• Сломанные пути — одна из самых частых причин «загадочных» сбоев изображений и ссылок
• Всегда выбирайте путь исходя из файла, который редактируете, а не из памяти о другой странице