Пути к файлам в HTML
Узнайте о путях к файлам в HTML: разница между абсолютными и относительными путями с наглядными примерами.
Путь к файлу описывает расположение файла в структуре папок веб-сайта. Всякий раз, когда страница должна загрузить или указать на другой ресурс, она использует путь к файлу для его нахождения.
На этой странице рассматриваются два типа путей — абсолютные и относительные, — различные формы относительного пути, а также рекомендации по их использованию на практике. Пути к файлам постоянно используются при работе с:
- веб-страницами (в ссылках)
- изображениями
- файлами JavaScript
- таблицами стилей
Типы путей: краткий обзор
Каждый путь, который вы пишете, относится к одному из следующих типов. Одни и те же правила применяются независимо от того, встречается ли путь в <a href>, <img src>, <link href> или <script src>.
| Путь | Тип | Значение | Когда использовать |
|---|---|---|---|
https://example.com/img/cat.jpg | Абсолютный URL | Полный адрес, включая протокол и домен. | Ссылка на файл на другом сайте. |
/images/cat.jpg | Корневой относительный | Начинается от корня сайта (ведущий /), независимо от расположения текущей страницы. | Общесайтовые ресурсы (логотипы, глобальные CSS/JS), используемые на многих страницах. |
images/cat.jpg | Относительный (та же папка) | Начинается от папки текущей страницы. Эквивалентно ./images/cat.jpg. | Файлы, расположенные рядом со страницей. |
../images/cat.jpg | Относительный (родительская папка) | .. поднимается на один уровень вверх, затем переходит в папку images. | Доступ к файлу, расположенному выше текущей страницы. |
Корневой относительный путь технически тоже является относительным, однако ведущий / делает его относительным к корню сайта, а не к текущей странице, поэтому его удобнее рассматривать как отдельную категорию.
Абсолютные пути к файлам
Абсолютный путь к файлу — это полный URL для доступа к файлу, включающий протокол (https://) и доменное имя. Он работает с любой страницы, так как не зависит от её местоположения.
Пример абсолютного пути к файлу:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Absolute File Path Example</h2>
<img src="https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" alt="W3docs logo" style="width:300px" />
</body>
</html>Используйте абсолютный URL, когда ресурс находится на другом домене (например, изображение, размещённое на CDN или другом сайте).
Относительные пути к файлам
Относительный путь к файлу указывает на файл относительно текущей страницы, а не задаёт полный адрес с доменом. Относительные пути бывают нескольких видов.
Та же папка
Если нужный файл находится в той же папке, что и текущая страница, достаточно написать только имя файла. Добавление ./ (что означает «текущая папка») необязательно и работает идентично.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Same-Directory Path Example</h2>
<img src="images/smile.jpg" alt="Smile" width="290" height="260" />
</body>
</html>Здесь images/smile.jpg разрешается начиная с папки, в которой находится текущая страница.
Родительская папка
Используйте ../, чтобы подняться на один уровень вверх по дереву папок. Каждый ../ поднимает ещё на одну папку выше. Например, ../images/smile.jpg выходит из текущей папки и затем ищет файл внутри папки images, расположенной уровнем выше.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Parent-Directory Path Example</h2>
<img src="../images/smile.jpg" alt="Smile" width="290" height="260" />
</body>
</html>Корневой относительный путь
Путь, начинающийся с косой черты (/), является корневым относительным: браузер разрешает его от корня веб-сайта, игнорируя расположение текущей страницы. Это удобно для ресурсов, общих для всего сайта, поскольку путь остаётся неизменным независимо от того, насколько глубоко вложена страница.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Root-Relative Path Example</h2>
<img src="/images/smile.jpg" alt="Smile" width="290" height="260" />
</body>
</html>Пути используются не только для изображений
Те же правила применяются к любому атрибуту, ссылающемуся на файл. В одном документе нередко встречаются все их виды одновременно:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<!-- root-relative stylesheet, shared site-wide -->
<link rel="stylesheet" href="/css/styles.css" />
</head>
<body>
<!-- relative link to a page in the same folder -->
<a href="about.html">About us</a>
<!-- relative link to a page one level up -->
<a href="../index.html">Home</a>
<!-- absolute link to an external site -->
<a href="https://www.w3docs.com/">W3docs</a>
<!-- relative script next to the page -->
<script src="js/app.js"></script>
</body>
</html>Рекомендации
Отдавайте предпочтение относительным путям для ресурсов, расположенных на вашем собственном сайте. Поскольку они не содержат жёстко заданного домена, сайт продолжает работать при переносе на новый домен, смене http на https или запуске локально во время разработки. Используйте абсолютные URL для файлов, размещённых на других сайтах, и корневые относительные пути для глобальных ресурсов, которые используются на многих страницах.
Подробнее о создании ссылок между страницами — в главе HTML Links, а о встраивании изображений — в главе о теге <img>.