Почему относительные ссылки сбиваются к корню?

Question

[KrisTeylor]

Есть следующий проект:

index.html
sedona
    index.html
    photo.html
    form.html
    styles
    img
    js

Ссылки на него: https://kristeylor.github.io/ и https://github.com/kristeylor/kristeylor.github.io

В корневом index.html есть ссылка:
<a href="sedona/index.html"></a>
Она работает.
В index.html в папке sedona есть следующие ссылки:

<a href="photo.html">Фото и видео</a>
<a href="form.html">Форма отзыва</a>

Но если я перехожу по ним, то браузер не находит страницы в папке catalog, а почему-то ищет их в корне сайте, где их и нет.
Пробовал варианты: "/photo.html", "./photo.html" - не работают.
Та же проблема и с подключением стилей, шрифтов, изображений.
Допустим страницы из папки catalog ссылаются на стили в папке styles, которая в этом же catalog и находится. Однако страницы ищут эту папку не у себя на одном уровне, а в корне сайта.
Был тег <base href="/">, но без него проблема остаётся.
Как исправить данную проблему?

Comments

[Lynn «Кофеман»]

Не верю.
У вас точно никакой сборки нет?

[iBird Rose]

тег <base> не используешь, случаем?

[KrisTeylor]

iBird Rose, да, есть такой <base href="/">

[iBird Rose]

KrisTeylor, ну вот он и определяет относительно чего у тебя пути будут работать. в твоем случае всегда относительно корневого

[KrisTeylor]

iBird Rose, не помогло. Выложил проект на гит: https://kristeylor.github.io/ и https://github.com/kristeylor/kristeylor.github.io

[KrisTeylor]

Lynn «Кофеман», https://kristeylor.github.io/ и https://github.com/kristeylor/kristeylor.github.io

[Lynn «Кофеман»]

KrisTeylor, ну так у вас там все ссылки начинаются со слеша

[iBird Rose]

KrisTeylor, ты в посте говоришь что у тебя <a href="photo.html">Фото и видео</a> но по ссылке у тебя там /photo.html - это не одно и то же. в общем читай документацию про пути

[Ankhena]

Почитайте https://htmlacademy.ru/blog/boost/frontend/links

[KrisTeylor]

iBird Rose, для моей проблемы это одно и тоже, оба варианта не рабочие.

Answer 1

[lyaVav]

<a href="/catalog/photo.html">Фото и видео</a>
<a href="/catalog/reviews.html">Отзывы</a>

Comments

[KrisTeylor]

В чём смысл, если это почти тоже самое как и абсолютные ссылки? Разве относительные ссылки не должны работать относительно источника?

[nowm]

KrisTeylor, смысл в том, что у вас в шаблоне указано «/photo.html» это корневая относительная ссылка (всегда идёт отсчёт от корня сайта, а не от текущей папки), а нужно «/catalog/photo.html», если уж вы используете корневые относительные ссылки.

Вариант с не-корневой относительной ссылкой «./photo.html» (точка в начале адреса), я уверен, не работал, когда у вас был тег base, а после того, как вы тег base убрали, вы вариант с точкой не пробовали. Без тега base он корректно работает.

[KrisTeylor]

nowm, Спасибо за помощь!