Относительный адрес

Познакомьтесь с начинающим верстальщиком Петей. Он обожает слушать рэп, учится кататься на скейтборде и уже неделю как осваивает HTML. Петя с головой погрузился в мир фронтенда и его глаза горят энтузиазмом — он разбирает на запчасти все сайты, которые только встречает в интернете.

Только что Пете приглянулся сайт с ярким оформлением и красивой анимацией. Юный верстальщик тут же сохранил страницу к себе на компьютер в папку "C:\site\". К своему стыду Пете не хватило денег на столь желанный Mac Book Air, а потому работает он с обычного ноутбука на Windows.

Внутри каталога Петя находит файл index.html, открывает его в текстовом редакторе и сразу же натыкается на интересный тег с картинкой:

<img src="./imgs/photo.jpg"/>

Странное дело — файл index.html находится на машине с Windows, здесь в файловых путях используется обратная косая черта \, но “путь к картинке” указан с другой чертой — /. Если совместить эти пути, то получится что-то противоестественное "C:\site\/imgs/photo.jpg".

Всё встанет на свои места, если Петя вспомнит, что браузер работает не с путями, а с адресами. Петя открыл в браузере файл C:\site\index.html, но в адресной строке теперь указано file://C:\site\index.html — это браузер догадался чего от него хотят и сам составил адрес для доступа к файлу. Теперь, когда в HTML разметке браузер обнаружит тег <img src="./imgs/photo.jpg"/>, с относительным адресом "./imgs/photo.jpg", сделает он следующее:

1. Разберет относительный адрес ./imgs/photo.jpg на части — imgs и photo.jpg
2. За основу возьмет адрес HTML странички file://C:\site\index.html
3. Составит полный адрес для каталога imgs: file://C:\site\imgs\
4. Уточнит адрес для photo.jpg: file://C:\site\imgs\photo.jpg

Если бы Петя верстал на macOS вместо Windows, то браузер получил бы другой итоговый адрес, например такой file:///tmp/site/imgs/photo.jpg. Раз в HTML файле указаны не пути к файлам, а их адреса, то сохраненная страничка будет одинаково хорошо работать на всех ОС, браузер сам побеспокоится о составлении платформоспецифичных адресов и даже заменит косые черты на обратные в случае Windows.

Фронтенд работает только с адресами, пути к файлам вычисляет браузер

Внутри HTML документа или внутри CSS вы не найдете путей к файлам, там есть только адреса. Стандарт требует использовать косую черту / в качестве разделителя, независимо от платформы.

HTML не терпит обратной косой черты \

Страница в интернете

Использование адресов вместо путей максимально упрощает портирование вёрстки. Можно сверстать страничку на рабочем ноутбуке с Windows, затем скопировать все файлы на сервер с Linux и сайт будет работать без каких-либо изменений.

Сейчас у Пети в браузере открыта страничка по адресу file://C:\site\index.html, а в каталоге C:\site\ лежат несколько файлов, необходимых сайту:

├── index.html
├── style.css
└── imgs
    └── photo.jpg

Если у Пети есть Linux сервер, домен petr-ab.org, и он заранее всё настроил, то скопировав файлы из каталога C:\site на сервер в папку /var/www/site он сделает сайт доступным для всех по адресу:

http://petr-ab.org/index.html

А если ещё немного поколдавать на сервере, то можно скрыть стандартное название файла index.html и сократить адрес странички до http://petr-ab.org/. Сайт будет работать благодаря использованию относительных адресов. Для сравнения, вот итоговые адреса к каждому из ресурсов/файлов:

index.html - это особый файл, в адресе прячут его название