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

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

Путь к файлу описывает, где находится файл в структуре папок сайта. Пути к файлам используются при ссылке на внешние файлы, такие как веб-страницы, изображения, таблицы стилей и файлы JavaScript.

Несколько примеров: picture.jpg находится в той же папке, что и текущая страница; images/picture.jpg находится в папке images внутри текущей папки; /images/picture.jpg находится в папке images в корне сайта; а ../picture.jpg находится в папке на уровень выше текущей.

Абсолютные пути к файлам

Абсолютный путь к файлу — это полный URL файла.

Пример

Изображение, на которое ссылаются по его полному URL.

Страница с изображением, использующим абсолютный путь к файлу: полный URL https://prompt-cookbook.com, alt "Гора".

> Результат: полная HTML-страница

Prompt

Страница с изображением, использующим абсолютный путь к файлу: полный URL https://prompt-cookbook.com, alt "Гора".

Результат: полная HTML-страница

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Абсолютный путь</title>
</head>
<body>

<img src="https://prompt-cookbook.com" alt="Гора">

</body>
</html>

Относительные пути к файлам

Относительный путь к файлу указывает на файл относительно текущей страницы.

Корень сайта

Путь к папке images в корне сайта.

Страница с изображением, использующим относительный путь к папке images в корне сайта: /images/picture.jpg, alt "Гора".

> Результат: полная HTML-страница

Prompt

Страница с изображением, использующим относительный путь к папке images в корне сайта: /images/picture.jpg, alt "Гора".

Результат: полная HTML-страница

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Относительный путь (корень сайта)</title>
</head>
<body>

<img src="/images/picture.jpg" alt="Гора">

</body>
</html>

Текущая папка

Путь к папке images в текущей папке.

Страница с изображением, использующим относительный путь к папке images в текущей папке: images/picture.jpg, alt "Гора".

> Результат: полная HTML-страница

Prompt

Страница с изображением, использующим относительный путь к папке images в текущей папке: images/picture.jpg, alt "Гора".

Результат: полная HTML-страница

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Относительный путь (текущая папка)</title>
</head>
<body>

<img src="images/picture.jpg" alt="Гора">

</body>
</html>

На уровень выше

Путь к папке images на уровень выше текущей папки.

Страница с изображением, использующим относительный путь к папке images на уровень выше: ../images/picture.jpg, alt "Гора".

> Результат: полная HTML-страница

Prompt

Страница с изображением, использующим относительный путь к папке images на уровень выше: ../images/picture.jpg, alt "Гора".

Результат: полная HTML-страница

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Относительный путь (на уровень выше)</title>
</head>
<body>

<img src="../images/picture.jpg" alt="Гора">

</body>
</html>

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

Хорошей практикой считается использование относительных путей к файлам, когда это возможно. С относительными путями ваши страницы не привязаны к текущему базовому URL, поэтому ссылки работают как на вашем собственном компьютере (localhost), так и на текущем и будущих публичных доменах.